A review of the original XMLHttpRequest method

Use a typical example of login authentication to demonstrate this

In general, using the XMLHttpRequest object for login verification goes through the following steps

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

var userName = document.getElementById("userName").value;

2. Creating an XMLHttpRequest object is a complicated step, mainly because of browser compatibility.            

if (window.XMLHttpRequest) {
        //For FireFox, mozilla, Opera, Safari, IE7, IE8
        xmlhttp = new XMLHttpRequest();
        //BUG fixes for certain versions of the mozillar browser
        if (xmlhttp.overrideMimeType) {
            xmlhttp.overrideMimeType("text/xml");
        }
    } else if (window.ActiveXObject) {
         //For IE6, IE5.5, IE5
        //The names of the two controls that can be used to create the XMLHTTPRequest object are stored in an array of js
        //The first version is newer
        var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for (var i = 0; i < activexName.length; i++) {
            try{
                //Takes a control name to create, and terminates the loop if the creation succeeds
                //If the creation fails, an exception is thrown back, and then you can continue the loop and continue trying to create
                xmlhttp = new ActiveXObject(activexName[i]);
                break;
            } catch(e){
            }
        }
    }

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

//When registering a callback function, the function name is required without parentheses
    //We need to register the name of the function, and if we put parentheses around it, it will register the return value of the function, which is wrong
    xmlhttp.onreadystatechange = callback;

4. Set (GET) connection information          

//The first parameter represents the HTTP request mode, which supports all HTTP requests, mainly using get and post
//The second parameter represents the url address of the request, and the parameter of the get request is also in the url
//The third parameter is asynchronous or synchronous, and true is asynchronous
xmlhttp.open("GET","AJAXServer?name="+ userName,true);

5. Send a request  

xmlhttp.send(null);

6. (POST) mode, you need to set the HTTP request header by yourself, and since you want to encode, you cannot send the data directly in the second parameter of xhr.open, instead, you should send() method to send the data

//POST request code
//xmlhttp.open("POST","AJAXServer",true);
//The POST method needs to set the HTTP request header itself
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST sends data
xmlhttp.send("name=" + userName);

Callback function:

//The callback function
function callback() {
    //alert(xmlhttp.readyState);
    //5. Receive response data
    //Determining the state of an object is interactive completion
    if (xmlhttp.readyState == 4) {
        //Determine whether the HTTP interaction was successful
        if (xmlhttp.status == 200) {
            //Gets the data returned from the service lacquer side
            //Gets the plain text data output from the server segment
            var responseText = xmlhttp.responseText;
            //Displays the data on the page
            //Find the element node corresponding to the div tag in the dom way
            var divNode = document.getElementById("result");
            //Sets the HTML content in the element node
            divNode.innerHTML = responseText;
        } else {
            alert(" Error!! ");
        }
    }
}