Ajax is a technology that allows us to dynamically send and receive data from the server without having to reload the page or browser. Ajax works very well with XML and JSON, infact ‘X’ in AJAX stands for XML.
- What is AJAX?
- AJAX stands for Asynchronous Javascript and XML.
- In web development Asynchronous means getting information without having to reload the page.
- AJAX is not a programming language but a way to use existing standards.
- AJAX was made popular in 2005. It was first used in Google Suggest where when you try to search anything in the Google search engine, various suggestions are given in a drop down list for that particular word or phrase. AJAX is also used in Google maps.
- It can interact with servers and files without needing to refresh the browser.
- XML, but as JSON became popular due to its easy, fast and lightweight property, it is used with it also.
- How AJAX Works?
- Here, when an event occurs in a browser, an XMLHttpRequest object is created and sent to the server through internet.
- The server, on receiving the request, processes it, creates a response and sends it back to the browser.
- The browser then receives the response, processes the data using javascript and updates the page content.
- In this only the part of the page data to be modified is sent to the server, not the whole page, hence the changes are reflected without page refresh.
- AJAX Internet Standards
- AJAX is based on current internet standards. It uses a combination of the following technologies:
- XMLHttpRequest object: Lets us interact with server data asynchronously (without page refresh).
- Javascript/DOM: Lets us interact with the information.
- CSS: Lets us to style the returned data.
- XML/JSON: XML or JSON is often used as the format for transferring data. We can use plain text as well.
- XMLHttpRequest Object:
- The XMLHttpRequest is a javascript object used to send and receive information to and from the browser asynchronously.
- The XMLHttpRequest object is instantiated differently in older versions of IE.
- The instantiation of XMLHttpRequest object for different browsers is shown below:
It works well with XML and JSON. Ajax was initially made to work with
Let us learn more about XMLHttpRequest object.
if(window.XMLHttpRequest) { //code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { //code for IE6, IE5 xmlhttp=new ActiveXObject(“Microsoft XMLHTTP”); }
- onreadystatechange is an event which occurs whenever the server readyState changes and holds the status of the XMLHttpRequest object.
- The important properties of the XMLHttpRequest object are readyState and status.
- The readyState property has five stages in its process numbered 0 to 4 as shown below:
- 0 : request not initialized
- 1 : server connection established
- 2 : request received
- 3 : processing request
- 4 : request finished and response is ready.
- As the stages from 0 to 3 are in process, a rotating image appears indicating that work is in progress.
- Status property have two values:
- 200 : “OK”
- 404 : Page not found
- We should make sure that we check for value 4 in readyState and value 200 in Status property, so that our request is processed successfully.
- Syntax for checking the status and readyState is given below:
xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4 && xmlhttp.status==200) { //do something } }
The readystate and status of the request is matched to 4 and 200 respectively in the statement if(xmlhttp.readyState==4 && xmlhttp.status==200).
- The whole code of a page with the XMLHttpRequest object is shown below:
<!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlhttp; if(window.XMLHttpRequest) { //code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { //code for IE6, IE5 xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); } xmlhttp.onreadychange=function() { if(xmlhttp.readyState==4 && xmlhttp.status==200) { Document.getElementById(“myDiv”).innerHTML= xmlhttp.responseText; } } xmlhttp.open(“GET”,”ajax_info.txt”,true); xmlhttp.send(); } </script> </head> <body> <div id=”myDiv”><h2>Let AJAX change this text</h2></div> <button type=”button” onclick=”loadXMLDoc()”>Change Content</button> </body> </html>
Thus we studied the basics of AJAX Fundamentals and will try it in next session.