Ajax PHP simple introductory tutorial code_PHP tutorial

First let's understand how to create this object in javascript:
var xmlHttp = new XMLHttpRequest();
This simple line of code works in Mozilla, Firefox, Safari, Opera and basically everything that supports Ajax in any form or manner In non-Microsoft browsers, an XMLHttpRequest object is created. 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:

Copy code The code is as follows:

try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//For more detailed New 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, so if the creation is unsuccessful, we have to add Previous sentence:

if (!xmlHttp){
alert("Cannot create XMLHttpRequest object!");
}
The combination is:

Copy code The code is as follows:

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("Cannot create XMLHttpRequest object ! ");
}

Then, let us create a function getInfo() to open the asynchronous request:

Copy code The code is as follows:

function getInfo() {
var num = document.getElementById("num").value;//Get the form data
var url = "/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 in front of 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:

Copy code The code is as follows:

function getInfo() {
var num = document.getElementById("num").value;//Get the form data
var url = "/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:


Now we need to write the updatePage() function:

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. The 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 javascrīpt code is as follows:

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( "Cannot create XMLHttpRequest object!");
}

function getInfo() {
var num = document.getElementById("num").value;//Get the form data
var url = "/ajax/1.php?n=" + escape(num);
xmlHttp.open("GET", url, true);//true here represents 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 here. Because the processing method is different, the writing method is also different, and this It is not the main part of Ajax, so I won’t put the code here. Just remember that php outputs and returns the required data.




It’s been a long time since I updated. I saw this tutorial today. It’s very suitable for beginners.

http://www.bkjia.com/PHPjc/319034.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/319034.htmlTechArticleFirst, let’s understand how to create this object in javascrīpt: varxmlHttp=newXMLHttpRequest(); This simple line of code is in Mozilla, Firefox, Safari, Opera and basically anything else...