[js点击]JavaScript之Ajax技术01

AJAX

浏览器与服务器之间，采用HTTP协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出HTTP请求。

1999年，微软公司发布IE浏览器5.0版，第一次引入新功能：允许JavaScript脚本向服务器发起HTTP请求。这个功能当时并没有引起注意，直到2004年Gmail发布和2005年Google Map发布，才引起广泛重视。2005年2月，AJAX这个词第一次正式提出，指围绕这个功能进行开发的一整套做法。从此，AJAX成为脚本发起HTTP通信的代名词，W3C也在2006年发布了它的国际标准。

具体来说，AJAX包括以下几个步骤。

创建AJAX对象

发出HTTP请求

接收服务器传回的数据

更新网页数据

概括起来，就是一句话，AJAX通过原生的

XMLHttpRequest

对象发出HTTP请求，得到服务器返回的数据后，再进行处理。

AJAX可以是同步请求，也可以是异步请求。但是，大多数情况下，特指异步请求。因为同步的Ajax请求，对浏览器有“堵塞效应”。

XMLHttpRequest对象

XMLHttpRequest

对象用来在浏览器与服务器之间传送数据。

var ajax = new XMLHttpRequest();
ajax.open('GET', 'http://www.example.com/page.php', true);

上面代码向指定的服务器网址，发出GET请求。

然后，AJAX指定回调函数，监听通信状态（

readyState

属性）的变化。

ajax.onreadystatechange = handleStateChange;

一旦拿到服务器返回的数据，AJAX不会刷新整个网页，而是只更新相关部分，从而不打断用户正在做的事情。

注意，AJAX只能向同源网址（协议、域名、端口都相同）发出HTTP请求，如果发出跨源请求，就会报错（详见《同源政策》和《CORS机制》两节）。

虽然名字里面有

XML

，但是实际上，XMLHttpRequest可以报送各种数据，包括字符串和二进制，而且除了HTTP，它还支持通过其他协议传送（比如File和FTP）。

下面是

XMLHttpRequest

对象的典型用法。

var xhr = new XMLHttpRequest();

// 指定通信过程中状态改变时的回调函数
xhr.onreadystatechange = function(){
// 通信成功时，状态值为4
if (xhr.readyState === 4){
if (xhr.status === 200){
console.log(xhr.responseText);
} else {
console.error(xhr.statusText);
}
}
};

xhr.onerror = function (e) {
console.error(xhr.statusText);
};

// open方式用于指定HTTP动词、请求的网址、是否异步
xhr.open('GET', '/endpoint', true);

// 发送HTTP请求
xhr.send(null);

open

方法的第三个参数是一个布尔值，表示是否为异步请求。如果设为

false

，就表示这个请求是同步的，下面是一个例子。

var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false);
request.send(null);

if (request.status === 200) {
console.log(request.responseText);
}

XMLHttpRequest实例的属性

readyState

readyState

是一个只读属性，用一个整数和对应的常量，表示XMLHttpRequest请求当前所处的状态。

0，对应常量

UNSENT

，表示XMLHttpRequest实例已经生成，但是

open()

方法还没有被调用。

1，对应常量

OPENED

，表示

send()

方法还没有被调用，仍然可以使用

setRequestHeader()

，设定HTTP请求的头信息。

2，对应常量

HEADERS_RECEIVED

，表示

send()

方法已经执行，并且头信息和状态码已经收到。

3，对应常量

LOADING

，表示正在接收服务器传来的body部分的数据，如果

responseType

属性是

text

或者空字符串，

responseText

就会包含已经收到的部分信息。

4，对应常量

DONE

，表示服务器数据已经完全接收，或者本次接收已经失败了。

在通信过程中，每当发生状态变化的时候，

readyState

属性的值就会发生改变。这个值每一次变化，都会触发

readyStateChange

事件。

if (ajax.readyState == 4) {
// Handle the response.
} else {
// Show the 'Loading...' message or do nothing.
}

上面代码表示，只有

readyState

变为4时，才算确认请求已经成功，其他值都表示请求还在进行中。

onreadystatechange

onreadystatechange

属性指向一个回调函数，当

readystatechange

事件发生的时候，这个回调函数就会调用，并且XMLHttpRequest实例的

readyState

属性也会发生变化。

另外，如果使用

abort()

方法，终止XMLHttpRequest请求，

onreadystatechange

回调函数也会被调用。

var xmlhttp = new XMLHttpRequest();
xmlhttp.open( 'GET', 'http://example.com' , true );
xmlhttp.onreadystatechange = function () {
if ( XMLHttpRequest.DONE != xmlhttp.readyState ) {
return;
}
if ( 200 != xmlhttp.status ) {
return;
}
console.log( xmlhttp.responseText );
};
xmlhttp.send();

response

response

属性为只读，返回接收到的数据体（即body部分）。它的类型可以是ArrayBuffer、Blob、Document、JSON对象、或者一个字符串，这由

XMLHttpRequest.responseType

属性的值决定。

如果本次请求没有成功或者数据不完整，该属性就会等于

null

。

responseType

responseType

属性用来指定服务器返回数据（

xhr.response

）的类型。

”“：字符串（默认值）

“arraybuffer”：ArrayBuffer对象

“blob”：Blob对象

“document”：Document对象

“json”：JSON对象

“text”：字符串

text类型适合大多数情况，而且直接处理文本也比较方便，document类型适合返回XML文档的情况，blob类型适合读取二进制数据，比如图片文件。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
if (this.status == 200) {
var blob = new Blob([this.response], {type: 'image/png'});
// 或者
var blob = oReq.response;
}
};

xhr.send();

如果将这个属性设为ArrayBuffer，就可以按照数组的方式处理二进制数据。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
var uInt8Array = new Uint8Array(this.response);
for (var i = 0, len = binStr.length; i < len; ++i) {
// var byte = uInt8Array[i];
}
};

xhr.send();

如果将这个属性设为“json”，支持JSON的浏览器（Firefox>9，chrome>30），就会自动对返回数据调用

JSON.parse()

方法。也就是说，你从xhr.response属性（注意，不是xhr.responseText属性）得到的不是文本，而是一个JSON对象。

XHR2支持Ajax的返回类型为文档，即xhr.responseType=”document” 。这意味着，对于那些打开CORS的网站，我们可以直接用Ajax抓取网页，然后不用解析HTML字符串，直接对XHR回应进行DOM操作。

responseText

responseText

属性返回从服务器接收到的字符串，该属性为只读。如果本次请求没有成功或者数据不完整，该属性就会等于

null

。

如果服务器返回的数据格式是JSON，就可以使用

responseText

属性。

var data = ajax.responseText;
data = JSON.parse(data);

responseXML

responseXML

属性返回从服务器接收到的Document对象，该属性为只读。如果本次请求没有成功，或者数据不完整，或者不能被解析为XML或HTML，该属性等于

null

。

返回的数据会被直接解析为DOM对象。

/* 返回的XML文件如下
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<book>
<chapter id="1">(Re-)Introducing JavaScript</chapter>
<chapter id="2">JavaScript in Action</chapter>
</book>
*/

var data = ajax.responseXML;
var chapters = data.getElementsByTagName('chapter');

如果服务器返回的数据，没有明示

Content-Type

头信息等于

text/xml

，可以使用

overrideMimeType()

方法，指定XMLHttpRequest对象将返回的数据解析为XML。

status

status

属性为只读属性，表示本次请求所得到的HTTP状态码，它是一个整数。一般来说，如果通信成功的话，这个状态码是200。

200, OK，访问正常

301, Moved Permanently，永久移动

302, Move temporarily，暂时移动

304, Not Modified，未修改

307, Temporary Redirect，暂时重定向

401, Unauthorized，未授权

403, Forbidden，禁止访问

404, Not Found，未发现指定网址

500, Internal Server Error，服务器发生错误

基本上，只有2xx和304的状态码，表示服务器返回是正常状态。

if (ajax.readyState == 4) {
if ( (ajax.status >= 200 && ajax.status < 300)
|| (ajax.status == 304) ) {
// Handle the response.
} else {
// Status error!
}
}

statusText

statusText

属性为只读属性，返回一个字符串，表示服务器发送的状态提示。不同于

status

属性，该属性包含整个状态信息，比如”200 OK“。

timeout

timeout

属性等于一个整数，表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止。如果该属性等于0，就表示没有时间限制。

var xhr = new XMLHttpRequest();
xhr.ontimeout = function () {
console.error("The request for " + url + " timed out.");
};
xhr.onload = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
callback.apply(xhr, args);
} else {
console.error(xhr.statusText);
}
}
};
xhr.open("GET", url, true);
xhr.timeout = timeout;
xhr.send(null);
}

[js点击]JavaScript之AJAX技术02