Now that we are familiar with jQuery, let us trigger an AJAX request on an event such as a button click.
In this snippet, let us begin by observing the HTML document object. We have a div element that has an empty unordered list. The aim of this script is to populate the unordered list with list items on the click of a button. The input button element has an id with the value "getFeed", and the click event handler will be tied to this button. Since AJAX is asynchronous and as we are tying a callback to this button, no AJAX calls are made to our live server when the document object is loaded. The HTML structure alone is loaded onto the page, and the events are tied to these elements.
When the button is clicked on, we are using the method getJSON to make an AJAX call to the live web server to retrieve the JSON data. Since we are getting an array of students, we will pass the retrieved data into jQuerys' each iterator to retrieve one element at a time. Inside the iterator, we...