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

ajax_diagram

  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

ajax_example

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!

Advertisements

One thought on “A Beginner’s Guide to AJAX

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s