Imagine scrolling down on twitter when suddenly the whole page refreshes on you! Imagine this happening every ten seconds just so twitter can show you new tweets. You were probably reading comments or a post that you were very interested in, but now lost your spot because the whole page just refreshed on you. If this happened, you will probably think the website is broken and never want to use it again. To prevent this bad experience, Twitter and Instagram use AJAX. AJAX stands for Asynchronous Javascript and XML. It uses an asynchronous processing model to render dynamic components of a page without having to refresh the entire page. The features that update itself without having to refresh the browser like amount of followers, new tweets, and new post are all results of using AJAX.
Working AJAX
Since you don’t have to load the whole page the data will load faster! This improves the users experience and also allows users to do other things on the page until that section of the page comes back with new data. AJAX gets the browser to request data from the server. Then the server sends back data that is in HTML , XML or JSON format. You can read more about AJAX response data formats here . Once the browser has successfully received the data it needs, it will fire an event that renders the new data to the page.
This AJAX call is enclosed in a jQuery on click event.
There are some settings you must set before making the AJAX call. The first to take a look at is the url property. You must have the correct endpoint to get back data from your server. In this, i'm using a joke api to render random jokes to my plain Jane page. The type property will take a HTTP verb GET or POST to retrieve data depending on what you need back. GET will retrieve data already saved to the database and POST will update the database with new information retrieved. Timeout will do what it says, timeout after five seconds if the server doesn't respond. BeforeSend method will display loading if it takes a while to load or an error occurs. Finally if the request come back correctly the success function will run which appends my jokes to the web page. If there is a problem with the request, the error function will fire off!
Now when you click the joke button it will request new jokes from the server.
Conclusion
My example was plain but I wanted to show at the simplest level how AJAX is used. This can be a powerful technique due to its asynchronous processing model. You can improve the users experience by having components on the page render without refreshing the page entirely. It also makes your data load faster. Also, using Ajax with Jquery can also make things easier when requesting and appending data back onto the page. Thank you for reading ! Happy coding!
Top comments (3)
Something the entire javascript community should never use.
Why do you think so Alfredo? I have heard Ajax can really compliment a performance increase and have lots of problems which it can solve. Just eager to understand.
Thanks for the insight Alfredo. Just learning about all these new concepts and have to blog about them for school. hahaha