Getting started with Ajax --- use XMLHTTPRequest object in five steps

XMLHttpRequest introduction:

The XMLHTTPRequest object can be used to update webpages without submitting the entire page to the server. After all the pages are loaded, the client requests data from the server through this object. After the server receives and processes the data, it reports the data to the client. The XMLHTTPRequest object provides full access to the HTTP protocol, including the ability to make post and head requests and common GET requests. XMLHttpRequest can synchronously or asynchronously return the response of the web server and return the content in the form of text or a DOM document. Although the name is XMLHttpRequest, it is not limited to use with XML documents: it can receive any form of text documents.

Step 5 use the XMLHTTPRequest object 1. Create the XMLHTTPRequest object as follows:

(XMLHttpRequest objects in different browsers are created in different ways: newxmlhttprequest (); IE6, ie5.5 and so on, you need to use a correct activexobject Control name through the new activexobject (Control name) method)

if (window.XMLHttpRequest) {    xmlhttp=new XMLHttpRequest();    if (xmlhttp.overrideMimeType) {        xmlhttp.overrideMimeType("text/xml");    }}else if (window.ActiveXObject) {    var activexName=["MSXML.2.XMLHTTP.6.0","MSXML.2.XMLHTTP.5.0",                    "MSXML.2.XMLHTTP.4.0","MSXML.2.XMLHTTP.3.0",                    "MSXML.2.XMLHTTP","Miscrosoft.XMLHTTP"];    for (var i = 0; i <activexName.length; i++) {        try {            xmlhttp=new ActiveXObject(activexName[i]);        } catch (e) {        }    }}

2. register the callback function

(Set the callback function. Do not enclose the function name in parentheses. Brackets indicate registering the callback function return value to the onreadystatechange attribute)

xmlhttp.onreadystatechange=callback; 

3. Use the open method to set the basic information of server interaction

(The open method can have up to five parameter bureaus. The first three parameters are required)

// When the get method is used, the request data is located in the URL link, and nullxmlhttp. Open ("get", "Ajax? Name = "+ username, true); // when using the POST method, the setRequestHeader method must be called after the open method to set the value of Content-Type and then call the send method, the send parameter is the request data XMLHTTP. open ("Post", "ajax", true); XMLHTTP. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded ");

4. Set the sent data to start interacting with the server.

// Get method XMLHTTP. Send (null); // POST method XMLHTTP. Send ("name =" + username );

5. Check whether the interaction ends and the response is correct in the callback function. Obtain the data returned by the server and update the page content as needed.

(In the callback function, it is best to separate the two if conditions for determining readystate and status)

Function callback () {// 5. determine whether the interaction with the server is complete, and determine whether the server correctly returns the data if (XMLHTTP. readystate = 4) {// indicates that the interaction with the server has completed if (XMLHTTP. status = 200) {// indicates that the response code of the server is 200. The correct method of accepting data // plain text data is returned. var message = XMLHTTP. responsetext; // The Acceptance Method of the DOM object corresponding to the XML data // The premise is that the server needs to set Content-Type to text/XML // var domxml = XMLHTTP. responsexml; // The method for filling text content in the DIV label var DIV = document. getelementbyid ("message"); Div. innerhtml = message ;}}}

Summary:

Of course, through this small example, we can only say that we have gone through a process that we never knew, and initially understood the usage of the XMLHTTPRequest object, A deeper understanding also requires us to learn more deeply and make use of it in practice.

Demo source code free download link: http://download.csdn.net/detail/senior_lee/7707257