Five-step usage -- deal with XMLHttpRequest and xmlhttprequest

Five-step usage -- deal with XMLHttpRequest and xmlhttprequest
I. What is XMLHttpRequest?

XMLHttpRequest object is the core of AJAX Web application architecture. The XMLHttpRequest object is used to exchange data with the server in the background. 

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.

XMLHttpRequest object is a developer's dream, because:
Update the webpage without reloading the page
Request data from the server after the page has been loaded
Receive data from the server after the page is loaded
Send data to the server in the background

Ii. How to Use -- five-step method 1. Create an XMLHttpRequest object
Syntax for creating an XMLHttpRequest object:
Modern browsers (IE7 +, Firefox, Chrome, Safari, and Opera) have built-in XMLHttpRequest objects.

<strong><span style="font-size:18px;">xmlhttp=new XMLHttpRequest();</span></strong>

Earlier versions of Internet Explorer (IE5 and IE6) Use ActiveX objects:

<strong><span style="font-size:18px;">xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");</span></strong>

Different browsers use different methods to create XMLHttpRequest objects:
IE7, IE8, FireFox, Mozilla, Safari, and Opera directly use new XMLHttprequest ()
For IE6, IE5.5, and IE5, you must use the new ActiveXObject (Control name) method to use the correct ActiveXObject Control name.

2. register the callback object

<Span style = "font-size: 18px;"> <strong> // register the callback method xmlhttp. onreadystatechange = callback; </strong> </span>

When setting a callback function, do not enclose the function name in parentheses. Brackets indicate registering the callback function return value to the onreadystatechange attribute. The correct method should be to register the callback function name to this attribute.

In fact, the callback function is called every time the value of readyState changes, but we generally only care about status 4. If you only care about the correct response data, you only need to set the callback function before executing the send method.

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

<Strong> <span style = "font-size: 18px;"> xmlhttp. open ("GET", "Ajax? Name = "+ userName, true); // true indicates asynchronous, and false indicates synchronous xmlhttp. open ("post", "Ajax", true); // code xmlhttp to be added for post interaction. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); </span> </strong>

In the GET method, the request data is located in the url link. You can directly write null to the parameters of the send method.
When using the POST method, you must call the setRequestHeader method next to the open method to set the ContentType value, and then call the send method. The send parameter is the request data.

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

<Span style = "font-size: 18px;"> <strong> // sets the data sent to the server, and starts interaction with the server. xmlhttp. send (null); xmlhttp. send ("name =" + userName); // fill in the submitted data for post </strong> </span>

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

<Pre name = "code" class = "html"> <span style = "font-size: 18px;"> <strong> // checks whether the interaction with the server is complete, determine whether the server correctly returns the data if (xmlhttp. readyState = 4) {// status = 4 Response Data received successfully 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. 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 // The method for memorizing text content to the div label var div = document. getElementById ("message"); div. innerHTML = message ;}}</strong> </span>

Iii. attributes and Methods Method:
Attribute:

Summary AJAX is nothing more than a new idea (asynchronous) Old technology (B/S ). XMLHttpRequest is the core of AJAX and is responsible for asynchronous data retrieval. It exchanges data with the Web server without reloading the page for a better user experience.