To see how AJAX works, we will develop small AJAX Web Application.
First of all we need some HTML file with forms to input data. This will be one input field where we can write some text. In our case this will be some name. This HTML file we will save under ajax.html name. The code of HTML file can taken from box bellow: (Please note that the text input handle onkeypress event and call to ajax(); function and there is no “Submit” button in HTML form)
AJAX Tutorial
|
<html>
<body>
<input type="text" onkeyup="ajax(this.value);">
</br>
<div id="result"></div>
</body>
</html>
The key of each AJAX application is the XMLHttpRequest object. In some browsers we have to use one methods to create the XMLHttpRequest object. In other browser we have to use other method. Because we don’t know what browser use the user we will try each method until we successfully make XMLHttpRequest object.
var xmlhttp;
try {
xmlhttp=new XMLHttpRequest();
}
catch (e) {
try {
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
Now some explanation:
First we create variable named xmlhttp were we put the XMLHttpRequest object. Then try to create the object with xmlxttp=new XMLHttpRequest(). This method will work in Firefox, Opera, and Safari browsers. If the method return false fails, then try xmlhttp=new ActiveXObject("Msxml2.XMLHTTP") which is method for Internet Explorer 6.0+, if this method also return false, finaly we try xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") which is method for Internet Explorer 5.5+
If no one of these three methods return the XMLHttpRequest object, we will alert user with message that says " Your browser doesn't support AJAX!.
When we already have XMLHttpRequest object we have to send the request to the server. This we make with open() and send() methods. The open() method have three parameters. The first parameter sets with which method to send the request (GET or POST). The second parameter sets the URL of the server-side script. The third parameter sets handle method of request " asynchronously true/false. The send() method is exact way to send the request to the server.
After sending a request to the server, we have to receive the data that is returned by the server-side script. This is made with onreadystatechange function. The onreadystatechange function have five states:
0 - The request is not initialized
1 - The request has been set up
2 - The request has been sent
3 - The request is in process
4 - The request is complete
In our code we will check the state and when we have 4 - The request is complete for onreadystatechange function we will display result for the user. Now lets assemble all of this and update our ajax.html file:
First we create variable named xmlhttp were we put the XMLHttpRequest object. Then try to create the object with xmlxttp=new XMLHttpRequest(). This method will work in Firefox, Opera, and Safari browsers. If the method return false fails, then try xmlhttp=new ActiveXObject("Msxml2.XMLHTTP") which is method for Internet Explorer 6.0+, if this method also return false, finaly we try xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") which is method for Internet Explorer 5.5+
If no one of these three methods return the XMLHttpRequest object, we will alert user with message that says " Your browser doesn't support AJAX!.
When we already have XMLHttpRequest object we have to send the request to the server. This we make with open() and send() methods. The open() method have three parameters. The first parameter sets with which method to send the request (GET or POST). The second parameter sets the URL of the server-side script. The third parameter sets handle method of request " asynchronously true/false. The send() method is exact way to send the request to the server.
After sending a request to the server, we have to receive the data that is returned by the server-side script. This is made with onreadystatechange function. The onreadystatechange function have five states:
0 - The request is not initialized
1 - The request has been set up
2 - The request has been sent
3 - The request is in process
4 - The request is complete
In our code we will check the state and when we have 4 - The request is complete for onreadystatechange function we will display result for the user. Now lets assemble all of this and update our ajax.html file:
<html>
<script type="text/javascript">
function ajax(str) {
var xmlhttp;
try {
xmlhttp=new XMLHttpRequest();
}
catch (e) {
try {
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
var url='ajax.php?data='+str;
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState==4) {
document.getElementById('result').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
</script>
<body>
<input type="text" onkeyup="ajax(this.value);">
</br>
<div id="result"></div>
</body>
</html>
Next we have to prepare small PHP file. This is the server-side file where the requests will sends and AJAX function will get the result. We use some PHP array for store the names. And will check for match with stristr() case-insensitive function. You can use the code below:
<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 1 Jan 1990 01:00:00 GMT");
$names=array(John,Will,Kelly,Diana,Robert,Nina,George,Michael,Clint,Debora,Nick,Jeff,Kevin,Samuel,David,Peter,Patrick,Quest,Silvia,Umbro,William,Zita,Yantra,Xena,Albert,Ulrich);
for ($i=0;$i<count($names);$i++) {
if (stristr($names[$i], $_GET[data])) {
$result.=$names[$i]."\n";
}
}
echo nl2br($result);
?>
And now let see how our AJAX application works. Please type some name, for example Nina:
Need a specific tutorial? Do not hesitate and submit a request!
posted on 2009-Aug-09 | 04:52:38 PM
it is so usefull
posted on 2009-Nov-24 | 05:09:59 AM
regards
http://www.srisoftwarez.com
posted on 2009-Dec-11 | 01:25:53 AM
posted on 2010-Jul-30 | 09:26:03 AM