XMLHttpRequest详解-优快云博客

本文链接：https://blog.youkuaiyun.com/zhanghefu/article/details/1433851

一．基本函数

onreadystatechange

Callback function; the function assigned to this property is called whenever readyState changes.

readyState

Number; 0 means uninitialized, open( ) has not yet been called; 1 means loading, send( ) has not been called; 2 means loaded, send( ) has been called, and headers/status are available; 3 means interactive, responseText holds partial data; 4 means completed.

responseText

string; the plain text of the response.

responseXML

DOM Document object; an XML return value.

status

Response status code, such as 200 (Okay) or 404 (Not Found).

statusText

string; the text associated with the HTTP response status.

The methods supported include:

abort( )

void; cancels the HTTP request.

getAllResponseHeaders( )

string; returns all of the response headers in a preformatted string (see "Dig into the HTTP Response" [Hack #9]).

getResponseHeader(string header)

string; returns the value of the specified header.

open(string url,string asynch)

void; prepares the HTTP request and specifies whether it is asynchronous or not.

send(string)

void; sends the HTTP request.

setHeader(string header,string value)

void; sets a request header, but you must call open( ) first!

２．XMLHttpRequest.

Here's an example of an entire compatibility check:
/* Wrapper function for constructing a request object.
 Parameters:
  reqType: The HTTP request type, such as GET or POST.
  url: The URL of the server program.
  asynch: Whether to send the request asynchronously or not. */

function httpRequest(reqType,url,asynch){
    //Mozilla-based browsers
    if(window.XMLHttpRequest){
        request = new XMLHttpRequest(  );
    } else if (window.ActiveXObject){
        request=new ActiveXObject("Msxml2.XMLHTTP");
        if (! request){
            request=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    //the request could still be null if neither ActiveXObject
    //initialization succeeded
    if(request){
        initReq(reqType,url,asynch);
    } else {
        alert("Your browser does not permit the use of all "+
              "of this application's features!");
    }
}
/* Initialize a request object that is already constructed */
function initReq(reqType,url,bool){
    /* Specify the function that will handle the HTTP response */
    request.onreadystatechange=handleResponse; 
    request.open(reqType,url,bool);
    request.send(null);
}

Here's the code for the HTML page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
    <script type="text/javascript" src="/parkerriver/js/hack2.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Send a data tidbit</title>
</head>
<body>
<h3>A Few Facts About Yourself...</h3>
<form action="javascript:void%200" onsubmit="sendData(  );return false">
    <p>First name: <input type="text" name="firstname" size="20"> </p>
    <p>Last name: <input type="text" name="lastname" size="20"> </p>
    <p>Gender: <input type="text" name="gender" size="2"> </p>
    <p>Country of origin: <input type="text" name="country" size="20"> </p>
    <p><button type="submit">Send Data</button></p>
</form>
</body>
</html>

function setQueryString(  ){
    queryString="";
    var frm = document.forms[0];
    var numberElements =  frm.elements.length;
    for(var i = 0; i < numberElements; i++) {
        if(i < numberElements-1) {
            queryString += frm.elements[i].name+"="+
                           encodeURIComponent(frm.elements[i].value)+"&";
        } else {
            queryString += frm.elements[i].name+"="+
                           encodeURIComponent(frm.elements[i].value);
        }

    }
}

AJAX基础总结