Ajax基础教程【2】使用XMLHttpRequest对象

1. 创建 XMLHttpRequest 对象的一个实例

var xmlHttp;
function createXMLHttpRequest() {
    //检查是否支持 ActiveXObject 控件（IE浏览器）
    if(window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else if(window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest(); 
    }
}

2. 方法和属性

2.1 常用的方法有 open( ) 和 send( ) 。

void open(string method, string url, boolean async, string username, string password) 建立对服务器的调用。

• method: GET、POST或PUT。
• url：相对url或绝对url。
• async：可选，默认值为true，表示异步请求；false表示同步。

void send(context)：具体向服务器发出请求。如果请求声明为异步，这个方法就会立即返回，否则它会等待直到接收到响应为止。

• 可选参数可以是 DOM 对象的实例、输入流、或者串。若请求类型为 GET 时，参数使用 null；若为 POST 时，参数内容将作为请求体的一部分发送。

void setRequestHeader(string header, string value)：为请求中一个给定的首部设置值。这个方法必须在 open() 之后才能调用。

• header：要设置的首部。
• value： 在首部中放置的值。

void abort()：停止请求。

string getAllResponseHeaders()：返回一个串，其中包含HTTP请求的所有响应首部，首部包括Content-length、Data和URL。

string getResponseHeaders(string header)：与上面的 getAllResponseHeaders( ) 对应。

• header表示你希望得到的指定首部值，并且把这个值作为串返回。

2.2 标准 XMLHttpRequest 属性

属性	描述
onreadystatechange	每个状态改变时都会触发这个事件处理器，值可以为回调函数的指针
readyState	请求的状态。有5个可取值。（在下方有说明）
responseText	服务器的响应，表示一个串
responseXML	服务器的响应，表示为XML。这个对象可解析为一个 DOM 对象
status	服务器的 HTTP 状态码（200对应 OK，404对应 Not Found …）
statusText	HTTP 状态码的相应文本（OK 或 Not Found …）

readyState 请求状态的5个值：

• 0：未初始化
• 1：正在加载
• 2：已加载
• 3：交互中
• 4：完成

3. Ajax 交互示例

请求返回到浏览器时的首部设置：

• Content-Type：text/html
• Cache-Control：no-cache

4. GET 与 POST

GET 请求通过向 url 传递参数，浏览器和服务器会限制其长度。
POST 则不会限制发送给服务器的数据量大小。一般来讲，

• 使用 GET 方法从服务器获取数据。
• 使用 POST 方法改变服务器上的状态。

使用 POST 时，需要设置 XMLHttpRequest 对象的 Content-Type 首部：

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

5. 简单请求

5.1 回调

onreadystatechange 属性存储了回调函数的指针。当 XMLHttpRequest 对象的内部状态发生改变时，就会调用这个回调函数。当进行了异步调用，请求就会发出，脚本立即处理执行。一旦发出了请求，对象的 readyState 属性会经过几个变化，一般处理的是服务器响应结束时的状态。
回调函数 callback 方法：

xmlHttp.onreadystatechange = callback; //函数指针
function callback() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.Status == 200) {
            //可以简单的设置div的文本等等
        }       
    }
}

5.2 简单请求的示例

//javascript
var xmlHttp;

function createXMLHttpRequest() {
    //检查是否支持 ActiveXObject 控件（IE浏览器）
    if(window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else if(window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest(); 
    }
}

function startRequest() {
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", "simpleResponse.xml", true);
    xmlHttp.send(null);
}

function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            alert("The server replied with: " + xmlHttp.responseText);
            //显示 simpleResponse.xml 里的文本
        }
    }
}

<!--html-->
<form action="#">
    <input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();" />
</form>

---

注：以上摘自《Ajax基础教程》