Ajax + PHP getting started

Ajax + PHP simple Getting Started Tutorial, read Ajax + PHP simple Getting Started Tutorial, Ajax consists of HTML, JavaScript technology, DHTML and DOM, this outstanding method can transform clumsy Web interfaces into interactive Ajax applications. For Ajax, the core object is XMLHttpRequest. All Ajax operations cannot be separated from this object.

Ajax is composed of HTML, JavaScript™ technology, DHTML, and DOM. This outstanding method converts clumsy Web interfaces into interactive Ajax applications. For Ajax, the core object is XMLHttpRequest. All Ajax operations cannot be separated from operations on this object.

First, let's know how to create this object in javascript:

VarxmlHttp = newXMLHttpRequest ();
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:

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. Therefore, when the creation is unsuccessful, we need to add the following sentence:

If (! XmlHttp ){
Alert ("unable to 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 ("unable to create XMLHttpRequest object! ");
}
Then, let's create a function getInfo () to open the asynchronous request:

FunctiongetInfo (){
Varnum = document. getElementById ("num"). value; // obtain the data of the form.
Varurl = "/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:
FunctiongetInfo (){
Varnum = document. getElementById ("num"). value; // obtain the data of the form.
Varurl = "/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:

Next we need to compile 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. 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:

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 ("unable to create XMLHttpRequest object! ");
}
 
FunctiongetInfo (){
Varnum = document. getElementById ("num"). value; // obtain the data of the form.
Varurl = "/ajax/1.php? N = "+ escape (num );
XmlHttp. open ("GET", url, true); // true indicates 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, 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. Just remember that php outputs and returns the required data.

I haven't updated it for a long time. Today I see this tutorial, which is suitable for beginners.