Asynchronous JavaScript And Xml (AJAX) is the best solution, whenever you want to update your webpages asynchronously by exchanging the data to/from the server . It simply means that without reloading the complete webpage for your application we can update parts of the web application dynamically and asynchronously without sending the request back to the server. AJAX is the combination of XMLHttpRequest Object, JavaScript and HTML DOM (Document Object Model).
As we already know, JavaScript allows us to add enhanced functionality and helps web pages to interact with the clients asynchronously. JavaScript mainly runs on the client side, which is known as the browser. Whenever a JavaScript function sends the request asynchronously from the client to the server, the server responds back with the response which is used to update the page. Generally, the response is in XML format, but it may be in JSON also. In simple terms, AJAX means the interaction between client and server.
AJAX enables us to partially update our web applications asynchronously. When the Ajax interaction is complete, JavaScript updates the HTML source of the page. The changes are made immediately without requiring a page refresh. Ajax interactions can be used to validate form entries while the user enters the data using server-side logic, to retrieve data from the server and to dynamically update data on a page.
With the help of AJAX, we can create dynamic web pages which allow us to display the changes immediately without the request having to be sent to the server again. AJAX helps to send only the important data/information to server instead of the entire web page which will eliminate the load on the server. This will help in faster processing and loading of the interactive web pages.
AJAX combines other technologies as it cannot work independently to create dynamic and interactive web pages. Below is the list of technologies which AJAX uses for building the web pages.
var req = new XMLHTTPRequest();
Sending the request to the server, we use open()
req.open(“GET”,”test.txt”); the file can be of any type .txt or .xml
req.open(“POST”, add-emp.php);
GET is generally used to send small amounts of data to the server and using POST methods data is sent as part of HTTP request body. When data is sent using GET, data is sent as query URL parameter, whereas in POST data is not visible.
Using send() of XMLHTTPRequest(); we can send the request to the server
req.send(); Send() accepts optional parameter body which will allow us to specify the request body.
GET is typically used to retrieve the information from the server. The send() returns immediately as the request is asynchronous; hence we must check where the response exists in its life cycle before processing it further. It uses readyState property of XMLHTTPRequest; readyState is simply an integer value which describes the status of HTTP request, whenever onreadystatechange function is called when readyState property changes. Values of readyState:
readstatechange event is triggered every time the readyState property is changed.
The HTTP status code returns status property of the XMLHTTPRequest’s response, most commonly used status code.
POST is used to submit form data to the server. Form data can be sent using FormData object or using query string as req.send(key=value1&key=value2&..&keyN=valueN). Whenever we are sending the data as query string, we need to explicitly set the request header using setRequestHeader();
Req.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
The setrequestHeader() is called just after open() is called and before calling send();
Most commonly used request headers as part of setRequestHeader();
txt/html, text/plain, application/xml, application/json.
With the help of form data we can easily construct set of key/value pairs used for representing form fields and their values are sent using XMLHTTPRequest.send().
Below are the list of actions that happen in AJAX.
Client-side security in AJAX –
Conclusion
In this blog we have learnt that using AJAX we can simply exchange the data asynchronously over the network; updating the page dynamically without reloading the entire content. The popularity of AJAX is increasing as it is a scripting language using JavaScript which provides numerous advantages.
Ajax enabled applications will always be more responsive, faster and more user-friendly; with vastly improved speed, performance and usability.
Every Application has an important building block,... Read More
In this tutorial, we will learn how to send email ... Read More
With over 1.7 billion websites worldwide and 4.54 ... Read More
Join the Discussion
Your email address will not be published. Required fields are marked *