What is AJAX?
AJAX stands for asynchronous JavaScript and XML, which means the client send the request to the server in the form of XMLHttpRequest and server will respond back to the client where the JavaScript is used to make everything happen. It is the combination of JavaScript, DOM, and XMLHttpRequest. JavaScript is used to process whole AJAX operation, DOM is the API for manipulating the document and the XMLHttpRequest is the JavaScript object which performs the asynchronous operation with the server.
Before Ajax there is no way for the client to communicate with the server without page load, now after evolution of AJAX the client can able to communicate with the server very easily.
How Ajax works
In convention way the client sends a request to the server, and server respond back to the request till the wait time user can’t do any operation in the client and finally once the server sends a response the page will get refreshed, In AJAX world when client send a request to the server, user can do any other operation in client simultaneously, which means the user doesn’t need to wait till the server respond back to the request and also the page will not get refreshed once the server respond back the request.
From the above figure just consider we have a web page, where we have two forms. when use trigger an action in form1 it will send a HTTP request to the web server, using Ajax user doesn’t need to wait till the server respond to the request, user can start an action on form 2, now the HTTP request from form 2 will be send to the server , based on the response from the server the form 1 and form 2 will load partially without loading the entire page, which makes the application more user friendly as well as there will be a big improvement in performance. Let’s experiment it, through building the application
Let’s experiment it, through building the application
Ajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button id="ajaxBtn" type="button">Click Me</button>
</body>
<script>
(function () {
document.getElementById("ajaxBtn").addEventListener('click', makeRequest);//attaching click event for button
function makeRequest() {
var httpRequest = new XMLHttpRequest();// Initiatlization of XMLHttpRequest
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = function () { // ready state event, will be executed once the server send back the data
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
};
httpRequest.open('GET', 'http://localhost:11207/api/Products/ProductDetails'); // service call
httpRequest.send();
}
})();
</script>
</html>
The HTTPRequest to the server can be made through instance of the XMLHttpRequest
var httpRequest = new XMLHttpRequest();
The open method in XMLHttpRequest is used to open the HTTP request to the server, it has five paraments
httpRequest.open(method, URL, async, user, password);
The First parameter of the call defines the HTTP request method type whether it is GET, POST or any other method which is supported by the web server, it should in capital letter to follow the standard
The second parameter is the URL of the HTTP request.
async – is a boolean type, by default it is true which says the call is Asynchronous, which means the user can interact with the page while server response is yet to arrive, when it is false the call will be a conventional synchronous call
user & password – These optional parameters are used for authentication
The send method is used to post the data to the server from client, it can be a queystring , JSON, XML , and so on.
httpRequest.send();
Finally, when the data return from the server, we need to provide the function to handle it, so onreadystatechange event will be used to process the response, which will be fired once the server sends back the data.
Now just run this HTML page you can see the button, click on the button, you will get a server response as a JSON data in the alert box as shown in below figure without refreshing the page, that’s the power of the ajax call.
Need of Ajax:
The main benefit by using AJAX in application
- Asynchronous call
Ajax allow us to do the asynchronous call to the server, which makes the user to interact with client more without waiting for the response.
2. Quick round Trip
Ajax makes a quick round trip to and from the server to retrieve or save a data without posting the entire page in the server, it will do only partial post back by sending only the necessary data to the server and process if after receiving the data from the server.
3. User Friendly
User will have a far better experience with this ajax call since it allows data to be refreshed as a part the page where user performs some action without reloading the entire page, and same time user can also do some other action during the wait time of the request.
4. Performance
Ajax will give a drastic improvement in the performance and speed of the application, there are many case we can give example for the Ajax which creates a major impact in the application like updating the user information in the form, populating the cascading dropdownlist like based on selected country need to load the cities in another dropdown and rating the product and many more where the updated data will be stored in the application without reloading the entire page.
Conclusion:
We have seen what Ajax is, how to work with it and what is the need of using the Ajax in application, Ajax can be applied anywhere in the application it’s up to the requirement. The ultimate objective of using the AJAX in the application is to provide a better user friendly or usability and speedy application to end user.
