Why You Should Use AJAX with JavaScript on an HTML5 Page - dummies

Why You Should Use AJAX with JavaScript on an HTML5 Page

By John Paul Mueller

Many JavaScript users and web developers have heard of AJAX, assumed it was a special sort of language, and never went any further. AJAX isn’t a new language; it’s a reuse of existing technology to create a new way of dealing with updates to documents. All you need to do is apply the technologies behind AJAX in a new way to gain some major advantages in presenting content online.

The benefits of AJAX

AJAX makes it possible to create dynamic applications that load and run faster and also use fewer network and server resources. The goal of AJAX is to allow changes to a page without having to reload the entire page.

Using AJAX makes it possible to create applications that are quite fast without loading the server down with large requests. All the server has to do is send a small piece of data to the caller when requested. This small piece of data travels faster over the network, which means that request latency is also smaller.

One of the bigger reasons to use AJAX is that it’s standards-based (created and administered by a standards group). There isn’t some large company out there that controls AJAX. Because it’s standards-based, AJAX runs on any newer browser and platform combination that supports the standards it uses. AJAX relies on these standards:

  • JavaScript: You use JavaScript to write the code required to handle events at the browser, make requests to the server, and update areas on the page as needed.

  • Document Object Model (DOM): JavaScript makes use of the DOM to gain access to specific locations on the page.

  • Cascading Style Sheets (CSS): Using CSS makes it possible to create special effects during data updates. In addition, CSS makes the new data fit in with the existing page content.

  • eXtensible Markup Language (XML): Any update is going to require some sort of data. XML is a perfect choice because it works anywhere.

  • XMLHttpRequest object: Communication with the server requires a connection, and the XMLHttpRequest object creates this connection. AJAX performs its tasks asynchronously.

How AJAX works

AJAX doesn’t perform magic. There’s nothing behind the scenes that doesn’t make sense once you understand it. AJAX performs the task over a network wire rather than locally in the same page or an external page in the same folder. Here’s the sequence of events that occur when using AJAX.

  1. An event occurs at the browser. (The nature of the event is irrelevant but generally involves a data request of some sort.)

  2. JavaScript creates a new XMLHttpRequest object. In this case, the object will be configured to perform its work asynchronously using a callback function.

  3. JavaScript sends the request to the server for processing. At this point, the page continues performing tasks as it normally does while waiting for a response.

  4. The server receives the XMLHttpRequest object that JavaScript sent and processes it.

  5. The server creates a response and sends it back to the browser.

  6. The browser’s callback function provided with the original request receives the response from the server.

  7. The callback function performs any required post-processing of the response.

  8. An update of the information onscreen occurs, and the user sees the result.