Ajax learning notes: five steps to create an XMLHTTPRequest object

The XMLHTTPRequest object has been implemented in most browsers and has a simple interface that allows data to be transmitted from the client to the server, but does not interrupt the user's current operation. This is a very popular practice. How do I create an XMLHTTPRequest object?

1. Create an XMLHTTPRequest object

2. register the callback function

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

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

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.

The following describes the five steps through code. (First, we will introduce the get method)

// Define the global variable var xmlhttp;/* 1. Create an XMLHTTPRequest object *. This is a relatively complicated process because different browsers */If (window. XMLHttpRequest) {// applicable to IE7, IE8, Firefox, opera, and other browsers XMLHTTP = new XMLHttpRequest (); If (XMLHTTP. overrideminetype) {XMLHTTP. overrideminetype ("text/XML")} else if (window. activexobject) {// IE6, ie5, ie5.5var activexname = ["msxml2.xmlhttp", "miscrosoft. XMLHTTP "]; for (VAR I = 0; I <activexname. length; I ++) {try {XMLHTTP = new activexobject (Activexname [I]);} catch (e) {}} if (XMLHTTP = undefind | XMLHTTP = NULL) {alert ("the current browser does not support creating XMLHttpRequest objects"); return;}/* 2. Register a callback method for the XMLHTTPRequest object * Note: Although callback is a method, however, the method name must be used here, without adding () */XMLHTTP. onreadystatechange = callback;/** 3. Set the parameter for interacting with the server * // username is the control idvar username = Document on the page. getelementbyid ("username "). value; XMLHTTP. open ("get", "Ajax? Name = "+ username, true); // Several important parameters of the Open Method: Get/post, server address, // The Interaction Mode of the XMLHTTPRequest object is synchronous/asynchronous, true indicates asynchronous mode)/** 4. Set the data sent to the server and start interaction with the server */XMLHTTP. send (null); function callback () {/** 5. Determine whether the interaction with the server is complete, and determine whether the server correctly returns data */If (XMLHTTP. readystate = 4) {// indicates that the interaction with the server has completed if (XMLHTTP. status = 200) {// indicates that the server's response code is 200. The correct method for receiving data // plain text data var message = XMLHTTP is returned. responstext (); // If the DOM object receiving method is used, // var doxxml = XMLHTTP. responsexml (); // but there is a premise that the server needs to set Content-Type to text/xmlvar DIV = document. getelementbyid ("the ID of the page Div") Div. innerhtml = message ;}}}

The above method uses the get method. Next we will introduce the POST method.

The post method is different from the get method in Steps 3 and 4. The others are the same.

/** 3. Set the corresponding parameter for interaction with the server * // username is the control idvar username = Document in the page. getelementbyid ("username "). value; XMLHTTP. open ("Post", "ajax", true); // Several important parameters of the Open Method: Get/post, server address, // The Interaction Mode of the XMLHTTPRequest object is synchronous/asynchronous, and true indicates asynchronous.)/** 4. Set the data sent to the server and start interaction with the server */XMLHTTP. setRequestHeader ("Content-Type", "application/X-WWW-fora-urlencoded"); XMLHTTP. send ("name =" + username );