Using Javascript accessing the minimalistic data from server and partially refreshing the content in webpage. In general, HTTP request will try to refresh/restore the entire HTTPDocument, instead of that just refresh particular area in HTTPDocument.
In 2005, Google suggest has heavily used AJAX and bring it in to familiar. If we type in google search bar, we will get some suggestion based on the typed character sequence, with number of people has searched the same phrase till now. This made googler smile and select the right phrase combination listed by google search bar.
AJAX uses XMLHttpRequest in browser, to send and receive the information from server. This object will be created using ActiveXObject in older browsers, in IE7 onwards we can created directly using new XMLHttpRequest().
function getXMLHTTP()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
XMLHttpRequest object has two public apis (open(), send()) and two property (onreadystatechange, readyState).
Open API: This method call establishes connection to the server with using three arguments.
xmlhttp.open("GET","greetings.asp",true);
First argument tells what HTTP method used.
Second argument hold URL, and third talks about Asynchronous call or not.
Send API:This method call sends the request to URL specified in open API, where this API capable of passing the QueryString to the Server.
xmlhttp.send(null);
No queryString passed to Server
xmlhttp.send("action=Greetings&name=Krishna");
Send querystring to the server.
If open API's third argument is false, then we will get the response in synchrnous.
If the third argument set to true then Asynchronously response will come .
How to catch the reponse which comes in asynchronously, yeah, we have a property that will help us to refer a javascript function.
xmlhttp.onreadystatechange=function(){}
whenever http connection state get change this method will be get called. There are five states possible for this XMLHTTPRequest are given below.
| State | Description |
|---|---|
| 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 |
Now, we have to write the program which will act based on the state.
if(xmlhttp.readyState==4){//do something for request completion.}
Sample code to play with AJAX
<html>
<body>
<script type="text/javascript">
function searchFunction(str)
{
xmlhttp=getXMLHTTP();
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.getElementById("searchResult").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://www.google.com/search?q="+str,true);
xmlhttp.send(null);
}
function getXMLHTTP()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
</script>
<form name="myForm">
Search <input type="text" id="search" name="search" onkeyup="searchFunction(this.value);" />
<p/>
</form>
<div id="searchResult">ads</div>
</body>
</html>
For tutorials and more details : http://www.w3schools.com/Ajax/
1 comment:
Very nice one and easy to understand.
Post a Comment