“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
- 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.
- Event triggered on client-side – e.g. a user starts typing a search.
- AJAX call fired: XML HTTP request sent to server.
- Server script processes the request.
- Server sends data back to client using XML.
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!