编写高性能的JavaScript-Ajax数据传输之XHR（3）

Ajax 是高性能脚本的基石。它可以用来延迟加载体积庞大的资源，它能够在服务器和客户端之间异步传递数据而不需要刷新页面。它能够使用一个请求加载页面内的所有资源。选择正确的数据传输技术和最有效率的数据格式，你可以大大的改善用户体验。

后续的文章都是以数据传输和数据格式两大主题来讨论。

数据传输

请求数据的五种方式：

XHR

Multipart XHR

Dynamic Script Tag Insertion

Iframes

Comet

前三种应用比较流行，后两种应用的情况比较特殊，这里不会讨论到。

XHR

一个简单通俗的例子：

var url = '/data.php';

var params = ['id=934875','limit=20'];

var req = new XMLHttpRequest();

req.onreadystatechange = function() {

if (req.readyState === 4) {//响应成功接收，数据可以被操作

var responseHeaders = req.getAllResponseHeaders(); // 获得响应头部信息

var data = req.responseText; // 获得返回数据

// 处理数据

}

}

req.open('GET', url + '?' + params.join('&'), true);

req.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); // 设置请求头部

header.

req.send(null); // 发送请求

在现代的浏览器中XHR都能够很好的被支持，而且对于发送的请求和返回的数据，开发人员可以很好的控制。

合理的利用readyState=3的响应状态，能够大大改善用户体验。

req.onreadystatechange = function() {

if (req.readyState === 3) { // 取得部分数据逐步呈现

var dataSoFar = req.responseText;

...

}

else if (req.readyState === 4) { // 取得所有数据一次性呈现

var data = req.responseText;

}

}

XHR同样受约束于JavaScript的同源策略，而且老版本的IE不支持访问readyState ==3，返回的数据既不能被看做string或者xml object，在处理大批量的数据时速度显然会很慢。

虽然有这些缺点，但是XHR仍然是Ajax的首选。

Post vs Get

一般说来，只是从服务器“拉回”数据而不改变服务器的状态就是用Get。Get请求可以被缓存，如果你连续几次获取同样的数据。Post应该只有在请求的URL长度超过2048时才使用，这是由于IE的URL长度的限制。

PS：it is from  <high performance javascript> by nicolas zakas