A Beginner's Guide to AJAX

AJAX is an acronym for Asynchronous JavaScript and XML. Ever wondered how Google returns suggested searches as soon as you start typing? Or why the page url doesn’t change when you refresh some data on the page? That’s AJAX.

"AJAX is a way to have a 'conversation' with the server and display the results without reloading the page."

Why is it useful?

  • Allows separation of front-end and back-end code.
  • The number of page transitions in a web application is reduced.
  • Reduces the amount of uploaded and downloaded data on a page.
  • AJAX can be used to retrieve API data and multiple APIs can be compiled on one page.

How it works

  1. Initiate an HTTP request to a server by inputting the url of the website you're visiting, e.g. google.com. Page loads when response is received from the server.
  2. Event triggered on client-side - e.g. a user starts typing a search.
  3. AJAX call fired: XML HTTP request sent to server.
  4. Server script processes the request.
  5. Server sends data back to client using XML.
  6. Javascript callback function  retrieves the data and updates page with suggested searches.

Sample AJAX  function with jQuery


Disadvantages of AJAX and single page applications

  • Data loss - in a basic SPA (single page application), your viewing history is not stored like your browser history.
  • The browser bookmarking, back and refresh functions are useless.
  • More difficult for search engines to crawl.
  • Security! No sensitive data should be passed using AJAX.

Thanks to Rosie for help with research and the beautiful diagram!