How to use Ajax properly

Ajax is an important part of making an interactive web applications. Based on my experience working with developers and interviewing developers, I am however seeing that a lot of them are not structuring their form properly to fully utilize the power of Ajax.

For example, imagine that you needed to build a page like this:

Most developers would produce code such as below for making this feature work:

ajax_user_rating_filter() {
  // captures information in the html
  // make an ajax call
  // update the html
}
ajax_year_filter() {
  // captures information in the html
  // make an ajax call
  // update the html
}
ajax_rating_filter() {
  // captures information in the html
  // make an ajax call
  // update the html
}
ajax_search() {
  // captures information in the input
  // capture information in the other filters
  // make an ajax call
  // update the html
}

When everything is done this way, your javascript code could really be 50–100 lines long, depending on how efficiently you’ve put together your code.

What if the requirement for this page was that when you adjust any of the setting, the page number was also supposed to be updated by Ajax? Even further, clicking on the page number, instead of redirecting to a new url, you were also supposed to reload the result via Ajax AND remember all the other filter setting specified on the other areas?

Many developers, when faced with this challenge, adds more complexity in the code by adding codes such as this:

ajax_pagination() {
 // capture information specified in other filters
 // make an ajax call
 // update the html
}

Can you see how complex things get? Usually, when this happens, your javascript code doubles or even triples to make everything all work together. Now it’s not uncommon for your javascript at this point to become 100–300 lines.

There is a better way!

Imagine that the way you approached every Ajax is to think of it just as a plain old form but without a submit button. After all, isn’t that what Ajax is? It’s a form submission without a submit button.

So, imagine that you put together your html as follows

<form id='ajax_form' action="url_for_ajax" method="post">
   <input type="checkbox" name="user_rating[]" value="95">...
   <input type="checkbox" name="user_rating[]" value="90">...
   <input type="checkbox" name="user_rating[]" value="85">...
   <input type="checkbox" name="user_rating[]" value="80">...
   <select name="year_after">
      <option>2020</option>
      <option>2019</option>
      <option>2018</option>
      ...
   </select>
   <input type="checkbox" name="rating[]" value="R">...
   <input type="checkbox" name="rating[]" value="PG13">...
   <input type="checkbox" name="rating[]" value="PG">...
   <input type="checkbox" name="rating[]" value="G">...
   <input type='text' name="movie_name" placeholder='search a movie' />
   ...
   <input type='hidden' id='hidden_page_number' name='page_number' value="1" />
</form>
//this is where the http response from the Ajax call is placed
<div id='ajax_table_output'></div>

If you’ve structured your html this way as a single form, then your Ajax would all the sudden reduce to something like these few lines (in this example, let me show how this would look with jQuery).

$("#ajax_form").on("submit", function(){
   $.post( $(this).attr("action"), $(this).serialize(), function(data) {
      $("#ajax_table_output").html(data);
   });
   return false; //to prevent the browser going to the form's action url
}

And that’s it! Not 100–300 lines but merely 6 lines for the Ajax request!

When the http response from the Ajax call has pagination, I would structure the pagination as links and then simply use the text in the pagination link to update the hidden input in the Ajax form for the pagination. For example, if you were using jQuery, you would do:

$("#ajax_table_output a").click(function(e){
  e.preventDefault(); //prevent the browser to actually go to that link
  $("#hidden_page_number").value($(this).text());  //update the hidden page number in the form
  //then submit the form by ajax just like shown above
});

In fact, if you follow this approach where with Ajax, where

1. You always figure out what information you need to render Ajax output and write them down
2. Put ALL of that information as a form

Then, all of your Ajax would always be no more than a few lines. This approach can simplify your code and save you hours and hours of debugging especially when you have so many Ajax calls being made.

So, now think about all the Ajax features you’ve implemented and ask yourself if your Ajax code in Javascript were more than 3 lines. If you answered yes, then this approach could save you lots of time and help you build things much much faster.

Please share?

If you found my tip helpful, please share this with people you know especially your developer friends or those who are learning to code. They may appreciate your sharing this. I would also love to get their thoughts and feedback on what they think also.