AJAX technology is a technology for asynchronous interaction with the server. Thanks to this technology, we can send requests to the server and receive responses from it without reloading the page in the background, creating rich interactive web applications, such as web chats.
Initially, the ability to interact with the server asynchronously was used in the form of an ActiveX object at Microsoft. Subsequently, the idea of asynchronous interaction was picked up by other companies. And currently, the functionality of asynchronous requests in browsers is available to web developers through the XMLHttpRequest object.
Since this article is about jQuery, I won’t go into detail about the XMLHttpRequest. But I will briefly show the essence of its use.
So, first of all, to work with AJAX, we need a web server. It can be Node.js, IIS, Apache, nginx. In the future, I will use the Apache web server.
Let’s create a web page where XMLHttpRequest will be used:
<html>
<head>
<metacharset='utf-8'>
</head>
<body>
<button onclick="ajaxload();">Load</button>
<div id="news"><h3>No news</h3></div>
<script type="text/javascript">
function ajaxload(){
varxhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(this.readyState==4){
if(this.status >=200 && xhr.status < 300){
document.getElementById('news').innerHTML=this.responseText;
}
}
}
xhr.open('GET', 'ajax.php');
xhr.send();
}
</script>
</body>
</html>
In terms of markup, we have two elements: a button, upon clicking on which the function is performed ajaxload, and a div block, into which data will be loaded upon request.
All the main action we have takes place in the ajaxload function. First, we create an XMLHttpRequest: object var xhr=new XMLHttpRequest();.
Through this object, we will send requests. When a response is received, the on ready state change event will fire. And to handle this event, we assign xhr.onreadystate change a response processing function to the property.
In the processing function, we first look at the readiness of the response through the readyState property (the state this.readyState==4 means that the request is completed). Next, we check the status code of the response: if the server returned a status code from 200 to 300, then the request was successful.
And then we pass the response text to the div we have on the page via the responseText.
In the line xhr.open(‘GET’, ‘ajax.php’);, we set the request method and the resource to which the request will go.
Well, the last line xhr.send()is sending a request. We ended up writing a lot of code to make a simple request.
Let us have a request handler in the PHP language on our server. I will make it extremely simple. It will just send HTML markup in response:
<?php echo "<h3>F1 current title holder is Max Verstappen in the 2022 season</h3>"; ?>
Now, when the button is clicked, an ajax request will occur, the results of which will be loaded onto the page:
Now let’s rewrite the page code using jQuery:
<html>
<head>
<metacharset='utf-8'>
<script src="jquery-1.10.1.min.js"></script>
</head>
<body>
<button>Download</button>
<div id="news"><h3>No news</h3></div>
<script type="text/javascript">
$(function(){
$('button').click(function(){
$('#news').load('ajax.php');
});
});
</script>
</body>
</html>
Thus, the code becomes cleaner and simpler by using the jQuery library. It is enough for us to apply the method load, passing the address of the resource as a parameter. And the end result will be the same.