Let’s demonstrate using a typical login verification example.
Generally speaking, using the XMLHttpRequest object for login verification requires the following steps:
1. Use DOM method to obtain the value in the input box
Copy the code code as follows:
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 the code code as follows:
if (window.XMLHttpRequest) {
//For FireFox, Mozillar, Opera, Safari, IE7, IE8
xmlhttp = new XMLHttpRequest();
//Correction for bugs in some specific versions of mozillar browser
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//For IE6, IE5.5, IE5
//Two control names that can be used to create XMLHTTPRequest objects, stored in a js array
//The version ranked first is newer
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try{
//Take out a control name and create it. If the creation is successful, terminate the loop.
//If the creation fails, an exception will be thrown, and then the loop can continue to try to create
xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch(e){
}
}
}
3. Register the callback function of the XMLHttpRequest object. When registering the callback function, you need the function name and do not add parentheses.
Copy the code code as follows:
//When registering the callback function, the function name is required, do not add parentheses
//We need to register the function name. If we add parentheses, the return value of the function will be registered. This is wrong.
xmlhttp.onreadystatechange = callback;
4. Set (GET) connection information
Copy the code code as follows:
//The first parameter indicates the http request method, supports all http request methods, mainly uses get and post
//The second parameter represents the URL address of the request, and the parameters requested by the get method are also in the URL.
//The third parameter indicates whether to use asynchronous or synchronous interaction, true indicates asynchronous
xmlhttp.open("GET","AJAXServer?name="+ userName,true);
5. Send a request
Copy the code code as follows:
xmlhttp.send(null);
6. (POST) method, you need to set the http request header yourself, and because it needs to be encoded, you cannot directly send the data in the second parameter of XHR.open. Instead, you should use the send() method to send the data.
Copy the code code 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 in POST mode
xmlhttp.send("name=" + userName);
Callback function:
Copy the code code as follows:
//callback function
function callback() {
//alert(xmlhttp.readyState);
//5. Receive response data
//Determine whether the status of the object is interactive completion
if (xmlhttp.readyState == 4) {
//Determine whether the http interaction is successful
if (xmlhttp.status == 200) {
//Get the data returned by the lacquerware server
//Get the plain text data output by the server segment
var responseText = xmlhttp.responseText;
//Display data on the page
//Find the element node corresponding to the div tag through dom
var divNode = document.getElementById("result");
//Set the html content in the element node
divNode.innerHTML = responseText;
} else {
alert("An error occurred!!!");
}
}
}