Ajax and jQuery Summary

Ajax and JQuery in a Webpage
Firstname LastnameUniversity Name
Ajax and JQuery in a Webpage
Asynchronous JavaScript and XML (AJAX) allows a webpage to send/receive data with the server in the background and update only specific portions of a webpage that require an update rather than reload contents of the entire page. AJAX uses some of JQuery methods for its functionalities. Some important JQuery methods for Ajax are load(), get() and post(). These JQuery methods allow a webpage to use HTTP get and post methods to request data (text/JSON/XML/HTML) from the server and load it into an HTML element on the webpage.
Adding Ajax and JQuery
To explain how to add Ajax and JQuery to a webpage, we use the following example.

Figure SEQ Figure * ARABIC 1 Ajax JQuery Example
In this example, the data contained in a text file will be loaded into the webpage when the user clicks the button. We start by referring to the JQuery library of Ajax, which is available online, in the <script> elements of the webpage.
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>
Next we define the data on the server the contents of which may get updated with time. For instance, we define a text file on the server with the name ‘data.txt’ and add some data into it as shown below.

Figure SEQ Figure * ARABIC 2 Data on Server
We define the element in the page (i.e. with an id ‘serverdata’ in this case) where the server data will be loaded in the following way.

<div id=”serverdata”></div>
We define the button, which when clicked would load the data.
<button id=”dataBtn”>Get Server Data</button>
Next, we add the button click event handler script in the following way.
<script>
$(document).ready(function(){
$(“dataBtn”).click(function(){
$(“#serverdata”).load(“data.txt”);
});
});
</script>
The output of the above example in browser is shown below.

(a) Page loaded (b) button clicked
Figure SEQ Figure * ARABIC 3 Output
The above example shows how Ajax and JQuery allow a specific element of the webpage to get updated instead of having to reload the entire page’s data.
References
W3Schools. (2016). jQuery – AJAX Introduction. Retrieved from http://www.w3schools.com/jquery/jquery_ajax_intro.asp