Ajax PHP simple getting started tutorial code

Source: Internet
Author: User

First, we will learn how to create this object in javascr sans PT:
VaR XMLHTTP = new XMLHttpRequest ();
This line is simple Code The XMLHTTPRequest object is created 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: Copy code The 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 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:

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 ("unable to create XMLHTTPRequest object! ");
}

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

Copy code The Code is as follows: function getinfo (){
VaR num = Document. getelementbyid ("num"). value; // obtain the data of the form.
VaR url = "/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:

Copy code The Code is as follows: function getinfo (){
VaR num = Document. getelementbyid ("num"). value; // obtain the data of the form.
VaR url = "/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:

<Input name = "num" id = "num" onblur = "getinfo ()" type = "text"/>
Next we need to compile 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. 4 This status indicates that the request has been sent and processed. Responsetext is used to obtain the information returned by the server, and then assign the form with the ID of city to the form with the forward Cr forward PT.

At this point, a simple AjaxProgramThe complete javascr merge 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 ("unable to create XMLHTTPRequest object! ");
}

Function getinfo (){
VaR num = Document. getelementbyid ("num"). value; // obtain the data of the form.
VaR url = "/ajax/1.php? N = "+ escape (Num );
XMLHTTP. Open ("get", URL, true); // true indicates 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, 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. 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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.