Home >Web Front-end >JS Tutorial >Original XMLHttpRequest method details review_jquery

Original XMLHttpRequest method details review_jquery

WBOY
WBOYOriginal
2016-05-16 17:11:571188browse

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                                                                                                                🎜>



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
  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 {
                                                                                                                                                                 
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn