Ajax php Simple Getting Started tutorial code _php Tips

Let's begin by understanding how to create this object in JAVASCRĪPT:
var xmlHttp = new XMLHttpRequest ();
This simple code creates the XMLHttpRequest object in Mozilla, Firefox, Safari, Opera, and virtually all non-Microsoft browsers that support Ajax in any form or mode. But for IE, which has a market share of 70%, this method is not good, and different IE versions have different methods of creation, so we need to use the following two to create objects under IE:

Copy Code code as follows:

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 can't anticipate that some browsers may not be able to create this object, so in the event of an unsuccessful creation, we add one more sentence:

if (!xmlhttp) {
Alert ("Cannot create a XMLHttpRequest Object!") ");
}
The combination is:

Copy Code code 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 a XMLHttpRequest Object!") ");
}

Then, let's create a function getinfo () to open the asynchronous request:

Copy Code code as follows:

function GetInfo () {
var num = document.getElementById ("num"). value;//get the data for the form
var url = "/ajax/1.php?n=" + Escape (num);
Xmlhttp.open ("Get", url, true);//Here's true to represent an asynchronous request
}

Once you have configured it with open (), you are ready to send the request. 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 with a URL, so it's OK to use NULL as the parameter of Send (). The php file in the URL address is requested to process the required data php file, as we usually use PHP, the following parameters can be added, and separated by &.

Xmlhttp.send (NULL);
After sending the data, we need to use the callback method to obtain the state of the server, so we use the onreadystatechange attribute.

Xmlhttp.onreadystatechange = Updatepage;
This statement is already in front of the Send () statement, which is valid, and the following updatepage is a function to process the return information. The complete GetInfo () is as follows:

Copy Code code as follows:

function GetInfo () {
var num = document.getElementById ("num"). value;//get the data for the form
var url = "/ajax/1.php?n=" + Escape (num);
Xmlhttp.open ("Get", url, true);//Here's true to represent an asynchronous request
Xmlhttp.onreadystatechange = Updatepage;
Xmlhttp.send (NULL);
}

We also need to trigger this function in HTML:

<input name= "num" id= "num" onblur= "GetInfo ()" type= "text"/>
Here 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 state that the server returns, 4 This state indicates that the request has been sent and disposed of. ResponseText is to get the information returned by the server, and then assign the form to the city ID by javascrīpt.

Here, a simple AJAX program is complete, 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 a XMLHttpRequest Object!") ");
}

function GetInfo () {
var num = document.getElementById ("num"). value;//get the data for the form
var url = "/ajax/1.php?n=" + Escape (num);
Xmlhttp.open ("Get", url, true);//Here's true to represent an asynchronous request
Xmlhttp.onreadystatechange = Updatepage;
Xmlhttp.send (NULL);
}

function Updatepage () {
if (xmlhttp.readystate = = 4) {
var response = Xmlhttp.responsetext;
document.getElementById ("City"). Value = response;
}
}
Here is also missing a PHP file, because the way to deal with different, writing is not the same, and this is not the main part of Ajax, so here is not put code. Just remember that PHP is the output and returns the data you need.




Long time no update, see this tutorial today, very suitable for beginners.