Ajax + PHP simple basic getting started instance tutorial

First, let's know how to create this object in javascript:
Program code
Var xmlHttp = new XMLHttpRequest ();
This line of simple code creates the XMLHttpRequest object in Mozilla, Firefox, Safari, Opera, and basically all non-Microsoft browsers that support Ajax in any form or method. However, for IE with a market share of 70%, this method is not feasible, and different IE versions have different creation methods, therefore, we need to use the following two methods to create objects in IE:
Program code
Try {
XmlHttp = new ActiveXObject ("Msxml2.XMLHTTP"); // for newer browsers
} Catch (err ){
Try {
XmlHttp = new ActiveXObject ("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. Therefore, when the creation is unsuccessful, we need to add the following sentence:
Program code
If (! XmlHttp ){
Alert ("unable to create XMLHttpRequest object! ");
}
The combination is:
Program code
Var xmlHttp = false;
Try {
XmlHttp = new XMLHttpRequest ();
} Catch (trymicrosoft ){
Try {
XmlHttp = new ActiveXObject ("Msxml2.XMLHTTP ");
} Catch (othermicrosoft ){
Try {
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
} Catch (failed ){
XmlHttp = false;
}
}
}
If (! XmlHttp ){
Alert ("unable to create XMLHttpRequest object! ");
}
Then, let's create a function getInfo () to open the asynchronous request:
Program code
Function getInfo (){
Var num = document. getElementById ("num"). value; // obtain the data of the form.
Var url = "/ajax/1.php? N = "+ escape (num );
XmlHttp. open ("GET", url, true); // true indicates an asynchronous request.
}
Once configured with open (), you can send the request. Although you can use send () to send data, you can also use the URL itself to send data. In fact, in most GET requests, it is much easier to send data using URLs. Therefore, null can be used as the send () parameter here. The PHP file in the url address is the PHP file requested to process the required data. Just like when we use PHP, the following parameters can be added and separated.
XmlHttp. send (null );
After the data is sent, we need to use the callback method to obtain the server status, so the onreadystatechange attribute is used.
XmlHttp. onreadystatechange = updatePage;
This statement must be placed before the send () statement. The updatePage is a function for processing the returned information. The complete getInfo () is as follows:
Program code
Function getInfo (){
Var num = document. getElementById ("num"). value; // obtain the data of the form.
Var url = "/ajax/1.php? N = "+ escape (num );
XmlHttp. open ("GET", url, true); // true indicates an asynchronous request.
XmlHttp. onreadystatechange = updatePage;
XmlHttp. send (null );
}
We also need to trigger this function in html:
Program code
<Input name = "num" id = "num" onblur = "getInfo ()" type = "text"/>
Next we need to compile the updatePage () function:
Program code
Function updatePage (){
If (xmlhttp. readyState = 4 ){
Var response = xmlhttp. responseText;
Document. getElementById ("city"). value = response;
}
}
The readyState in the above Code is a status returned by the server. 4 This status indicates that the request has been sent and processed. ResponseText is a form that obtains the information returned by the server and assigns it to the city ID through javascript.
At this point, a simple Ajax program is completed. The complete javascript code is as follows:
Program code
Var xmlHttp = false;
Try {
XmlHttp = new XMLHttpRequest ();
} Catch (trymicrosoft ){
Try {
XmlHttp = new ActiveXObject ("Msxml2.XMLHTTP ");
} Catch (othermicrosoft ){
Try {
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
} Catch (failed ){
XmlHttp = false;
}
}
}
If (! XmlHttp ){
Alert ("unable to create XMLHttpRequest object! ");
}
Function getInfo (){
Var num = document. getElementById ("num"). value; // obtain the data of the form.
Var url = "/ajax/1.php? N = "+ escape (num );
XmlHttp. open ("GET", url, true); // true indicates an asynchronous request.
XmlHttp. onreadystatechange = updatePage;
XmlHttp. send (null );
}
Function updatePage (){
If (xmlhttp. readyState = 4 ){
Var response = xmlhttp. responseText;
Document. getElementById ("city"). value = response;
}
}
There is still a PHP file missing, because the processing method is different, the writing method is different, and this is not the main part of Ajax, so I will not put the code here. Remember that php outputs and returns the required data.
This tutorial is suitable for beginners.