Original XMLHttpRequest method details review_jquery

Let’s demonstrate with a typical login verification example

Generally speaking, using the XMLHttpRequest object for login verification requires the following steps

1. Use DOM to get the value in the input box                                                                                                                🎜>

var userName = document.getElementById("userName").value;2. Create an XMLHttpRequest object. This step is more complicated. The main reason is to consider Browser compatibility issues.  

Copy code

The code is as follows:

if (window.XMLHttpRequest) { //For FireFox, Mozillar, Opera, Safari, IE7, IE8 overrideMimeType) {                                                                        /Two of the control names that can be used to create the XMLHTTPREQUEST object, and store in a JS array // The previous version is newer VAR Activexname = ["msxml2.xmlhtttt", "Microsoft.xmlhttp" ]; for (var i = 0; i < activexName.length; i ) {

try{

//Take out a control name to create, and terminate the loop if the creation is successful
// If the creation fails, an exception will be thrown, and then you can continue to loop and try to create
xmlhttp = new ActiveXObject(activexName[i]);
break;
🎜>       }
   }



3. Register the callback function of the XMLHttpRequest object. When registering the callback function, the function name is required and no parentheses are required.
 




Copy code


The code is as follows:


//When registering the callback function, it is required Function name, do not add parentheses
//We need to register the function name. If we add parentheses, the return value of the function will be registered, which is wrong
xmlhttp.onreadystatechange = callback;

4. Set (GET) connection information
 

Copy code

The code is as follows:

//The first parameter indicates the http request method, supports all http request methods, mainly uses get and post
//The second parameter indicates the requested url address, which is requested by get method The parameters are also in the url
//The third parameter indicates whether to use asynchronous or synchronous interaction, true means asynchronous

xmlhttp.open("GET","AJAXServer?name=" userName,true);

5. Send request

Copy the code

The code is as follows:


xmlhttp.send(null);

6. (POST) method, you need to set the http request header yourself, and because it needs to be encoded, it cannot be directly used in XHR. The data is sent in the second parameter of open, but the send() method should be used to send the data

Copy code The code is as follows:

//Code for POST request
//xmlhttp.open("POST","AJAXServer",true);
//POST method requires you to set the http request header yourself
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//Send data via POST
xmlhttp.send("name=" userName);

Callback function:

Copy code The code is as follows:

//Callback function
function callback() {
//alert(xmlhttp.readyState);
//5. Receive response data
// Determine whether the object's status is interaction completed
if (xmlhttp.readyState == 4) {
// Determine whether the http interaction is successful
if (xmlhttp.status == 200 ) {
//Get the data returned by the server end
//Get the plain text data output by the server segment
var responseText = xmlhttp.responseText;
//Display the data on the page
                                                                                                                                                                                                                                                                                                         ;
       } else {