ajax+php Simple Basics Primer Tutorial _ajax Related

Let's start by understanding how to create this object in javascript:
Program code
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:
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 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:
Program code
if (!xmlhttp) {
Alert ("Cannot create a 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 ("Cannot create a XMLHttpRequest Object!") ");
}
Then, let's create a function getinfo () to open the asynchronous request:
Program code
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:
Program code
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:
Program code
<input name= "num" id= "num" onblur= "GetInfo ()" type= "text"/>
Here we need to write 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 state that the server returns, 4 This state indicates that the request has been sent and disposed of. ResponseText is the information that is returned by the server, and then it is assigned to a form with the ID city by JavaScript.
Here, a simple AJAX program is complete, and 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 ("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.
This tutorial is very suitable for beginners.