In this post, we will discuss what AJAX is, the stepwise working of AJAX, and walk through an example to better understand the implementation of AJAX.
What Is AJAX?
AJAX, which stands for Asynchronous Javascript and XML, is a method(not a programming language) that is used for web applications to transmit and receive data from the server asynchronously, without affecting the rest of the page’s content or requiring a page reload.
The abbreviation XML stands for Extensible Markup Language that is used to encrypt messages so that it can be read by humans and machines. XML is similar to HTML, but it lets you build and customize your own tags.
AJAX communicates with the server using the XMLHttpRequest object, JavaScript/DOM to make requests, and XML as a data transmission mechanism. It became popular only when google put it in google suggest in 2005
To put it in simple words AJAX is a method of reducing the server-client interactions which are accomplished by only updating a portion of a web page instead of updating the entire webpage. The goal of AJAX is to send small quantities of data to the server without having to refresh the page.
StepWise Working of AJAX
- Some event is executed and the browser creates an XMLHttpRequest object after which the HttpRequest is sent to the server.
- The server gets the HttpRequest and then processes it, after processing, the server generates a response and sends the response back to the browser with some data.
- The returned data is then processed by the browser with the help of JavaScript and depending on the response JavaScript updates the contents of the webpage.
Let us go through some examples to better understand AJAX.
Example 1:
This example will demonstrate how to change the content of an h2 tag using AJAX. First, we will implement the structure of our web page using HTML.
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
In the above code, we defined a div container and gave it the id attribute due to which we can reference this div container later in our JavaScript code. This div section is defined so that it can display information from a server. Next, we defined an h2 tag and a button in which we passed an onclick event. Whenever a user will click on this button, an event will be generated and the function changeContent() will be executed.
// XMLHttpREquest Object initialization
constxhttp = newXMLHttpRequest();
// using onload built-in function
xhttp.onload = function() {
// updating div element content
document.getElementById("example").innerHTML =
this.responseText;
}
// get file ajax_info.txt
xhttp.open("GET", "ajax_info.txt");
// Send Request
xhttp.send();
}
Now that we are done with the HTML page setup, we need to write some script code. For this tutorial, we are going to be including JavaScript code inside the <script> tag. In our script code, we first need to create the function changeContent() that will be executed with the click of the button, we can do that with the following lines of code:
// XMLHttpREquest Object initialization
constxhttp = newXMLHttpRequest();
// using onload built-in function
xhttp.onload = function() {
// updating div element content
document.getElementById("example").innerHTML =
this.responseText;
}
// get file ajax_info.txt
xhttp.open("GET", "ajax_info.txt");
// Send Request
xhttp.send();
}
As you can see in the above code snippet, the function generates a new XMLHttpRequest and waits for the response from the server. Upon receiving the response, the content of the div will be replaced by this function.
Let us now create a file with the name of ajax_info.txt and write some dummy information in this file for example:
The whole code is given below:
<html lang="en">
<head>
<title>AJAX Example</title>
</head>
<body>
<div id="example">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="changeContent()">Change Content</button>
</div>
<script>
function changeContent() {
// XMLHttpREquest Object initialization
const xhttp = new XMLHttpRequest();
// using onload function
xhttp.onload = function() {
// updating div element content
document.getElementById("example").innerHTML =
this.responseText;
}
// get file ajax_info.txt
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
</script>
</body>
</html>
The output of the above code is provided below:
We can see that when the user clicks on the button, the text “changes” to the text that was present inside the ajax_info.txt file.
Conclusion
JavaScript executes code line by line that is called synchronous execution and hence AJAX comes into play as it is a method that helps in implementing asynchronous execution of the code in JavaScript. In asynchronous execution a statement or a line of code does not have to wait for the finishing of the previous line of code and both can execute parallel. AJAX is used to transmit and receive data from the server asynchronously without affecting the rest of the page and doesn’t even require the entire page reloading.
In this post, we saw what AJAX is and then we went to see how AJAX works by describing the process stepwise, and at the end, we provided you with an example to make your concept clearer.
