Consisting of HTML, JavaScript™ technology, DHTML, and the DOM, Ajax is a brilliant way to transform cumbersome Web interfaces into interactive Ajax applications. For Ajax, the core object is XMLHttpRequest, and all Ajax operations are inseparable from the operation of this object.
First let's understand how to create this object in javascript:
varxmlHttp=newXMLHttpRequest();
This simple line of code creates an XMLHttpRequest object in Mozilla, Firefox, Safari, Opera, and basically any non-Microsoft browser that supports Ajax in any form or fashion. But for IE, which has a market share of 70%, this method is not possible, and different IE versions have different creation methods, so we need to use the following two methods of creating objects under IE:
try{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");//For newer browsers
}catch(err){
try{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");//For older browsers
}catch(err2){
xmlHttp=false;
}
}
Even so, we cannot predict that some browsers may not be able to create this object, so if the creation is unsuccessful, we have to add a sentence:
if(!xmlHttp){
alert("Cannot create XMLHttpRequest object!");
}
The combination is:
varxmlHttp=false;
try{
xmlHttp=newXMLHttpRequest();
}catch(trymicrosoft){
try{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(othermicrosoft){
try{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}catch(failed){
xmlHttp=false;
}
}
}
if(!xmlHttp){
alert("Cannot create XMLHttpRequest object!");
}
Then, let's create a function getInfo() to enable asynchronous requests:
functiongetInfo(){
varnum=document.getElementById("num").value;//Get the form data
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//true here represents an asynchronous request
}
Once configured with open(), you can send requests. Although you can send data using send(), you can also send data through the URL itself. In fact, in most GET requests, it is much easier to send data using the URL, so just use null as the parameter of send() here. The php file in the url address is the php file that is requested to process the required data, just like when we usually use PHP. Multiple parameters can be added and separated by &.
xmlHttp.send(null);
After sending the data, we need to use the callback method to obtain the status of the server, so the onreadystatechange attribute is used.
xmlHttp.onreadystatechange=updatePage;
This statement must be placed before the send() statement so that it will be effective. The subsequent updatePage is a function that processes the returned information. The complete getInfo() is as follows:
functiongetInfo(){
varnum=document.getElementById("num").value;//Get the form data
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//true here represents an asynchronous request
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(null);
}
We also need to trigger this function in html:
<inputname="num"id="num"onblur="getInfo()"type="text"/>
Next we need to write the updatePage() function:
functionupdatePage(){
if(xmlhttp.readyState==4){
varresponse=xmlhttp.responseText;
document.getElementById("city").value=response;
}
}
The readyState in the above code is a status returned by the server. This status 4 indicates that the request has been sent and processed. responseText is to obtain the information returned by the server, and then assign it to the form with ID city through javascript.
At this point, a simple Ajax program is completed. The complete javascript code is as follows:
varxmlHttp=false;
try{
xmlHttp=newXMLHttpRequest();
}catch(trymicrosoft){
try{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(othermicrosoft){
try{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}catch(failed){
xmlHttp=false;
}
}
}
if(!xmlHttp){
alert("Cannot create XMLHttpRequest object!");
}
functiongetInfo(){
varnum=document.getElementById("num").value;//Get the form data
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//true here represents an asynchronous request
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(null);
}
functionupdatePage(){
if(xmlhttp.readyState==4){
varresponse=xmlhttp.responseText;
document.getElementById("city").value=response;
}
}
There is still a php file missing here. Since the processing method is different and the writing method is different, and this is not the main part of Ajax, the code will not be included here. Just remember that PHP outputs and returns the required data. It has
not been updated for a long time. I saw this tutorial today and it is very suitable for beginners.