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.
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!