Ajax

What is Ajax

AJAX (Asynchronous JavaScript and XML) is not programming language it is new techniques for refer server side data and update page content without reload web page. That is useful to create interactive web applications. If you use AJAX you can speed up your web application.

How AJAX Works



How to use AJAX in Web Application

Now we study how AJAX use in web application against above diagram. According to diagram we can see 5 steps for use AJAX
  1. Create XMLHttp Object
  2. Send XMLHttp Request
  3. Process XMLHttp Request
  4. Send response to browser
  5. Process response
Now we study step by step how ajax works

1. Create XMLHttp Object
We use two method for create XMLHttp Object. "XMLHttpRequest()" for modern browsers(IE7+, Firefox, Chrome, Safari, and Opera) and ActiveXObject("Microsoft.XMLHTTP") for old IE version(IE5,IE6). But we have to create object for all browsers. For achieve this requirement we check if the browser supports the XMLHttpRequest object. If it is we create a XMLHttpRequest object, if is not create an ActiveXObject

var obj_xmlhttp;

if (window.XMLHttpRequest){//Create XMLHttp object for modern browsers(IE7+,Firefox,Chrome,Opera,Safari)
  obj_xmlhttp=new XMLHttpRequest();

}else{//Create XMLHttp object for old IE browsers(IE6,IE5)
  obj_xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2. Send XMLHttp Request
After creating XMLHttp object we have to send it to the server. For do this we use open() and send() methods
  • Syntax of open method : open(request_type,url,is_asynchronously)
  • Syntax of send method : send(string)
In open() the 'request_type' parameter mean the type of request(GET or POST) and 'url' mean "the location of the file on the server" and 'is_asynchronously' mean "the request is asynchronously or synchronously"

Note: The GET type is faster than POST but GET type has limitations

 obj_xmlhttp.open("GET","ajax-demo.php",true);
 obj_xmlhttp.send();

3. Process XMLHttp Request
This step works in server side. After sending XMLHttp Request in to a server, the server processes it and generates response. This process is under five states and two statuses. The state 4 mean request process finished and response is ready. The status 200 mean response is 'OK'

<?php
  echo "Hello! You are welcome to AJAX";
?>

4. Send response to browser
After genarating response the server send back to the browser. We use responseText method for get server feedback

  var response = obj_xmlhttp.responseText;

5. Process response
After getting server response the browser process it and display or update page content. For update page content we use innerHTML property. Before do this we usually check is response state is in 4(use readyState property) and status is in 200(use status property).

 if (obj_xmlhttp.readyState==4 && obj_xmlhttp.status==200){
  document.getElementById("content").innerHTML = obj_xmlhttp.responseText;
 }


Try It

HTML Code
Copy this code and save as ajax-demo.html
<html>
<head>
<title>Welcome AJAX</title>
</head>
<body>
<div id="content"></div>
</body>
</html>

JavaScript Code
Insert this JavaScript in the head section of your html code
<script type="text/javascript">

//Step 1: Create XMLHttp object
var obj_xmlhttp;

if (window.XMLHttpRequest){//Create XMLHttp object for modern browsers(IE7+,Firefox,Chrome,Opera,Safari)
obj_xmlhttp=new XMLHttpRequest();
}else{//Create XMLHttp object for old IE browsers(IE6,IE5)
obj_xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

//Step 2: Send XMLHttp request to server
obj_xmlhttp.open("GET","ajax-demo.php",true);
obj_xmlhttp.send();

//Step 3: Process XMLHttp request and create response
obj_xmlhttp.onreadystatechange=function(){
if (obj_xmlhttp.readyState==4 && obj_xmlhttp.status==200){
//Step 4 & 5 Send response and process it
document.getElementById("content").innerHTML = obj_xmlhttp.responseText;
}
}
</script>

PHP Code
Copy this code and save as ajax-demo.php
<?php
  echo "Hello! You are welcome to AJAX";
?>


Ajax Example


Subscribe to: Posts (Atom)