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:
"exact phrase" include -exclude
will give you more specific results
will give you more specific results
AJAX Tutorial [2/3]
<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);
?>
|
- AJAX Tutorial [2/3] - | |
RECOMMENDED TUTORIALS
Need a specific tutorial? Do not hesitate and submit a request!