Core Ajax technology-XMLHttpRequest object

Core Ajax technology-XMLHttpRequest object

What is the XMLHttpRequest object? What is the connection with Ajax? Before learning about it, you should first understand Ajax functions. Unlike previous technologies, Ajax is designed to implement asynchronous operations.

So about Asynchronization, it seems that a manager has arranged a project plan and handed it over to its subordinates, and then continues to do other things he should do. When a subordinate completes the project, the working status or process of the manager is not affected. Only when the project is delivered, the manager can accept it. In asynchronous operations, the subordinates here are equivalent to the Ajax engine. To facilitate understanding, they can also be directly understood as XMLHttpRequest objects, which do not conflict with each other.

When asynchronous operations are performed, the Ajax engine is used to submit and receive data. In this process, the XMLHttpRequest object is responsible for retrieving asynchronous data, that is, its main function is to exchange data between the backend and the server during asynchronous operations.

When using this object, you must first create an object like other objects. The components supported are different for IE and W3C, the creation process needs to be encapsulated.

 

// 1. create the XMLHttpRequest object 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
 
2. five-step operation method for XMLHttpRequest objects
1. Create (the code above is encapsulated)
2. register the callback method for the object to interact with the server.
Xmlhttp. onreadystatechange = callback;
3. 4. Obtain parameters and submit data to the server
Var userName = document. getElementById ("UserName"). value;
There are two submission methods:
 
// 3. Set the corresponding parameter xmlhttp. open ("GET", "Ajax? Name = "+ userName, true); // 4. sets the data sent to the server, and starts sending xmlhttp to the server. send (null); // submit in POST mode // 3. set the corresponding parameter xmlhttp for interaction with the server. open ("POST", "Ajax", true); // code xmlhttp to be added for post interaction. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); // 4. sets the data sent to the server, and starts interaction with the server xmlhttp. send ("name =" + userName );

5. Receive and determine whether the callback function is successfully written.
 
 
Function callback () {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 ;}}}
The get and post client submission methods are involved here. The differences between the two methods are obvious in the code. The Get method directly displays the parameters in the link, which is not secure. The post method submits the parameters in the background by sending. So what is the difference between the two on the server side? There is no difference between receiving the two on the server side in the XMLHttp object. Both are receiving through the processRequest method, obtaining the parameters submitted by the client through the request object, and responding to the client request through the response. For more information, see the next blog.