Ajax php Simple Getting Started tutorial code _php Tutorial

Let's start by understanding how to create this object in JAVASCRĪPT:
var xmlHttp = new XMLHttpRequest ();
This simple code creates XMLHttpRequest objects in Mozilla, Firefox, Safari, Opera, and virtually all non-Microsoft browsers that support Ajax in any form or manner. But for the market share of 70% of IE, this method is not possible, and different versions of IE have different ways to create, so we need to use the following two kinds of object creation under IE:
Copy CodeThe code is 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 not expect that some browsers may not be able to create this object, so in the case of the creation is not successful, we will add a sentence:

if (!xmlhttp) {
Alert ("Cannot create XMLHttpRequest Object! ");
}
Together It is:

Copy CodeThe 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's create a function getinfo () to open the asynchronous request:

Copy CodeThe code is as follows:
function GetInfo () {
var num = document.getElementById ("num"). value;//getting the form's data
var url = "/ajax/1.php?n=" + Escape (num);
Xmlhttp.open ("GET", url, true);//Here the true represents an asynchronous request
}
Once the open () is configured, the request is ready to be sent. Although you can send data by 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 null is used as a parameter to send (). The php file in the URL address is a PHP file that is requested to process the required data, as we usually do with PHP, and the parameters can be added and separated by &.

Xmlhttp.send (NULL);
After sending the data, we need to use the callback method to get the state of the server, so we use the onReadyStateChange property.

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

Copy CodeThe code is as follows:
function GetInfo () {
var num = document.getElementById ("num"). value;//getting the form's data
var url = "/ajax/1.php?n=" + Escape (num);
Xmlhttp.open ("GET", url, true);//Here the true represents an asynchronous request
Xmlhttp.onreadystatechange = Updatepage;
Xmlhttp.send (NULL);
}

We also need to trigger this function in HTML:


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 returned by the server, and 4 indicates that the request has been sent and processed. ResponseText is to obtain the information returned by the server, and then assigns the form with the ID of city through 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 XMLHttpRequest Object! ");
}

function GetInfo () {
var num = document.getElementById ("num"). value;//getting the form's data
var url = "/ajax/1.php?n=" + Escape (num);
Xmlhttp.open ("GET", url, true);//Here the true 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;
}
}
Here is also missing a PHP file, due to different ways of processing, the wording is not the same, and this is not the main part of Ajax, so here is not put code. Just remember that PHP is output and returns the data you need.




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

http://www.bkjia.com/PHPjc/319034.html www.bkjia.com true http://www.bkjia.com/PHPjc/319034.html techarticle First, let's learn how to create this object in Javascrīpt: Varxmlhttp=newxmlhttprequest (); This simple code is in Mozilla, Firefox, Safari, opera, and basically any ...

