Ajax Basics

Ajax Basics


Posted in : Ajax Posted on : March 7, 2011 at 5:30 PM Comments : [ 0 ]

This section contains the Ajax basics with an example.

Ajax Basics

AJAX (Asynchronous JavaScript and XML) make use of  XML, HTML, CSS and Java Script  to develop, better and faster application.

            Using AJAX, you can send data asynchronously with the server . Without changing the whole page, a part of the page can be change by Ajax. For creating an Ajax, you need to follow the following steps :

Step 1. Create an XMLHttpRequest Object :

For exchanging data with server, XMLHttpRequest object is incorporated . The XMLHttpRequest object is built-in  with almost all modern browsers For example-IE7+, Firefox, Chrome, Safari, and Opera.

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} 	 	
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

 Step 2. Send a Request To a Server :

To send a request to a server, open() and send() functions of  XMLHttpRequest object are used :

xmlhttp.open("GET","ajax-text-data.php",true);
xmlhttp.send();

Step 3. Server Response :

The responseText or responseXML property of XMLHttpRequest object is incorporated to get the response from a server.

1 .The responseText Property :

The responseText property is incorporated when the response is not a XML data. It returns the response as a string.

var textDoc=xmlhttp.responseText;

2.The responseXML Property :

The responseXML property is used when the response (from server) is XML data and it need to parse as an XML object.

var xmlDoc=xmlhttp.responseXML;

Step 4. The onreadystatechange Event :

For checking - whether the response from the server  is ready to processed, we use onreadystatechange event. The response is ready, when readyState is 4 and status is 200. Given below is implementing on the same concept :

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    var xmlDoc=xmlhttp.responseText;
    }
  } 

Example :

 In this example  use two php file :

  • ajax-form.php
  • ajax-text-data.php

The code of "ajax-form.php" given below :

<html>
<head>
<script type="text/javascript">
function loadDoc()
{
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var textDoc=xmlhttp.responseText;
document.getElementById("ajax-text").innerHTML=textDoc; 
}
}
xmlhttp.open("GET","ajax-text-data.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="ajax-text"><h2>AJAX search text</h2></div>
<button type="Submit" value="Search" onclick="loadDoc()">Search</button>
</body>
</html> 

In the "ajax-form.php"  display some message  and one Button  , when click  "Search"  Button  call  loadDoc() function that create XMLHttpRequest object and send the request to the server as :

xmlhttp.open("GET","ajax-text-data.php",true);
xmlhttp.send();

 The response of XMLHttpRequest  object display inside of  "ajax-text"  div.

The code of  "text-data.php" given below :

<h2>AJAX search response text.</h2>

 

output :

 when run  "ajax-form.php" file display output as :

Again click "Search" Button , then call  loadDoc() function  (AJAX ) display output as :

Download Source Code

Go to Topic «PreviousHomeNext»

Your Comment:


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 

 
Tutorial Topics