第七章 Ajax 异步 JavaScript 和 XML

向服务器请求数据的五种常用技术：

XMLHttpRequest (XHR)
Dynamic script tag insertion 动态脚本标签插入
iframes
Comet
Multipart XHR 多部分的 XHR

在现代高性能 JavaScript 中使用的三种技术是 XHR，动态脚本标签插入和多部分的 XHR。

由于 XHR 提供了高级别的控制，浏览器在上面增加了一些限制。你不能使用 XHR 从当前运行的代码域之外请求数据，而且老版本的 IE 也不提供 readyState 3，它不支持流。从请求返回的数据像一个字符串或者一个 XML 对象那样对待，这意味着处理大量数据将相当缓慢。尽管有这些缺点，XHR 仍旧是最常用的请求数据技术，也是最强大的。它应当成为你的首选。
GET请求在IE中有长度限制，只有当URL和参数的长度超过了2048个字符时才能使用POST提取数据。

动态脚本标签插入克服了XHR最大的限制——同源。它可以从不同的服务器上获取数据，但是因此，它也是不安全的，包括修改任何内容、将用户重定向到另一个站点，或跟踪他们在页面上的操作并将数据发送给第三方。

1
2
3

var scriptElement = document.createElement('script');
scriptElement.src = 'http://any-domain.com/javascript/lib.js';
document.getElementsByTagName_r('head')[0].appendChild(scriptElement);

多部分的XHR（MXHR）允许你只用一个 HTTP 请求就可以从服务器端获取多个资源。

当数据只需发送给服务器时，有两种广泛应用的技术：XHR 和灯标。
虽然 XHR 主要用于从服务器获取数据，它也可以用来将数据发回。数据可以用 GET 或 POST 方式发回，以及任意数量的 HTTP 信息头。这给你很大灵活性。当你向服务器发回的数据量超过浏览器的最大 URL
长度时 XHR 特别有用。这种情况下，你可以用 POST 方式发回数据：

var url = '/data.php';
var params = [
'id=934875',
'limit=20'
];
var req = new XMLHttpRequest();
req.onerror = function() {
	// Error.
};
req.onreadystatechange = function() {
	if (req.readyState == 4) {
		// Success.
	}
};
req.open('POST', url, true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.setRequestHeader('Content-Length', params.length);
req.send(params.join('&'));

灯标是向服务器回送数据最快和最有效的方法。服务器根本不需要发回任何响应正文，所以你不必担心客户端下载数据。唯一的缺点是接收到的响应类型是受限的。如果你需要向客户端返回大量数据，那么使用 XHR。如果你只关心将数据发送到服务器端（可能需要极少的回复），那么使用图像灯标。

XML 与 JSON 相比显得非常冗杂。而且 JSON 在JavaScript可以直接简单的使用();
当使用 XHR 时 JSON 数据作为一个字符串返回。
该字符串使用()转换为一个本地对象。然而，当使用动态脚本标签插入时，JSON 数据被视为另一个JavaScript 文件并作为本地码执行。为做到这一点，数据必须被包装在回调函数之中。这就是所谓的“JSON填充”或 JSON-P。下面是我们用 JSON-P 格式书写的用户列表：

parseJSON([
	{"id":1, "username":"alice", "realname":"Alice Smith", "email":"alice@alicesmith.com"},
	{"id":2, "username":"bob", "realname":"Bob Jones", "email":"bob@bobjones.com"},
	{"id":3, "username":"carol", "realname":"Carol Williams", "email":"carol@carolwilliams.com"},
	{"id":4, "username":"dave", "realname":"Dave Johnson", "email":"dave@davejohnson.com"}
]);

　　最快的 JSON 格式是使用数组的 JSON-P 格式。虽然这只比使用 XHR 的 JSON 略快，但是这种差异随着列表尺寸的增大而增大。如果你所从事的项目需要一个10’000或100’000个单元构成的列表，那么JSON-P 比 JSON 好很多。
　　JSON-P 必须是可执行的 JavaScript，它使用动态
脚本标签注入技术可在任何网站中被任何人调用。从另一个角度说，JSON 在运行之前并不是有效的
JavaScript，使用 XHR 时只是被当作字符串获取。不要将任何敏感的数据编码为 JSON-P，因为你无法确定它是否包含私密信息，或者包含随机的 URL 或 cookie。

Summary 总结

高性能 Ajax 包括：知道你项目的具体需求，选择正确的数据格式和与之相配的传输技术。

作为数据格式，纯文本和 HTML 是高度限制的，但它们可节省客户端的 CPU 周期。XML 被广泛应用普遍支持，但它非常冗长且解析缓慢。JSON 是轻量级的，解析迅速。字符分隔的自定义格式非常轻量，在大量数据集解析时速度最快，但需要编写额外的程序在服务器端构造格式，并在客户端解析。
减少请求数量，可通过 JavaScript 和 CSS 文件打包，或者使用 MXHR。
缩短页面的加载时间，在页面其它内容加载之后，使用 Ajax 获取少量重要文件。
确保代码错误不要直接显示给用户，并在服务器端处理错误。
学会何时使用一个健壮的 Ajax 库，何时编写自己的底层 Ajax 代码。

Ajax 是提升你网站潜在性能之最大的改进区域之一，因为很多网站大量使用异步请求，又因为它提供
了许多不相关问题的解决方案，这些问题诸如，需要加载太多资源。对 XHR 的创造性应用是如此的与众不同，它不是呆滞不友好的界面，而是响应迅速且高效的代名词；它不会引起用户的憎恨，谁见了它都会爱上它。

JavaScript Ajax优化

JavaScript Ajax优化

第七章 Ajax 异步 JavaScript 和 XML

Summary 总结