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 :
[ 0 ] Comments