第17章 Ajax 与 JSON (一)

 

2005年，Jesse James Garrett 发表了一篇在线文章，题为 "Ajax: A new Approach to Web Applications"。他在这篇文章里介绍了一种技术，用他的话说，就叫Ajax， 是对 Asynchronous JavaScript + XML 的简写。这一技术能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。Garrett 还解释了怎样使用这一技术改变自从 Web 诞生以来就一直沿用的 "单击，等待" 的交互模式。

Ajax 技术的核心是 XMLHttpRequest 对象 (简称 XHR) ，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。在 XHR 出现之前，Ajax式的通信必须借助一些 hack 手段来实现，大多数是使用隐藏的框架或内嵌框架。XHR 为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。也就是说，可以使用 XHR 对象取得新数据，然后再通过 DOM 将新数据插入到页面中。另外，虽然名字中包含 XML 的成分，但 Ajax 通信与数据格式无关；这种技术就是无须刷新页面即可从服务器取得数据，但不一定是 XML 数据。

实际上，Garrett 提到的这种技术已经存在很长时间了。在 Garrett 撰写那篇文章之前，人们通常将这种技术叫做远程脚本 (remote scripting)，而且早在 1998 年就有人采用不同的手段实现了这种浏览器与服务器的通信。再往前推，JavaScript 需要通过 Java applet 或 Flash 电影等中间层向服务器发送请求。而 XHR 则将浏览器原生的通信能力提供给了开发人员，简化了实现同样操作的任务。

在重命名为 Ajax 之后，大约是 2005年底 2006年初，这种浏览器与服务器的通信技术可谓红极一时。人们对 JavaScript 和 Web 的全新认识，催生了很多使用原有特性的新技术和新模式。就目前来说，熟练使用 XHR 对象已经成为所有 Web 开发人员必须掌握的一种技能。

17.1 XHR 对象

var xmlHttp;

function createXMLHttpRequest(){

if (window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} else if (window.XMLHttpRequest){

xmlHttp = new XMLHttpRequest();

}

}

IE5 是第一款引入 XHR 对象的浏览器。在 IE5 中，XHR 对象是通过 MSXML 库中的一个 ActiveX 对象实现的。因此，在 IE 中可能会遇到 3 种不同版本的 XHR 对象，即：MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和 MSXML2.XMLHttp.6.0 。

IE7、Firefox、Opera、Chrome 和 Safari 都支持原生的 XHR 对象，在这些浏览器中创建 XHR 对象要像下面这样使用 XMLHttpRequest 构造函数：

var xhr = new XMLHttpRequest();

假如你只想支持 IE7 及更高版本，那么可以只用原生的 XHR 实现。

17.1.1 XHR 的用法

在使用 XHR 对象时，要调用的第一个方法是 open()，它接受3个参数：要发送的请求的类型 ("get"、"post" 等) 、请求的 URL 和表示是否异步发送请求的布尔值。下面就是调用这个方法的例子：

xhr.open("get", "example.php", false);

这行代码会启动一个针对 example.php 的 GET 请求。有关这行代码，需要说明两点：一是 URL 相对于执行代码的当前页面 (当然也可以使用绝对路径)；二是调用 open() 方法并不会真正发送请求，而只是启动一个请求以备发送。

只能向同一个域中使用相同端口和协议的 URL 发送请求。如果 URL 与启动请求的页面有任何差别，都会引发安全错误。

要发送特定的请求，必须像下面这样调用 send() 方法：

xhr.open("get", "example.php", false);

xhr.send(null);

这里的 send() 方法接受一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入 null，因为这个参数对有些浏览器来说是必需的。调用 send() 之后，请求就会被分派到服务器。

由于这次请求是同步的，JavaScript 代码会等到服务器响应之后再继续执行。在收到响应后，响应的数据会自动填充 XHR 对象的属性，相关属性简介如下。

• responseText: 作为响应主体被返回的文本。
• responseXML: 如果响应的内容类型是 "text/xml" 或 "application/xml" ，这个属性中将保存包含着响应数据的 XML DOM 文档。
• status: 响应的 HTTP 状态。
• statusText: HTTP 状态的说明。

在接收到响应后，第一步是检查 status 属性，以确定响应已经成功返回。一般来说，可以将 HTTP 状态码为 200 作为成功的标志。此时，responseText 属性的内容已经就绪，而且在内容类型正确的情况下，responseXML 也应该能够访问了。此外，状态码为 304 表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；当然，也意味着响应是有效的。为确保接收到适当的响应，应该像下面这样检查上述这两种状态码：

xhr.open("get", "example.txt", false);

xhr.send(null);

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){

alert(xhr.statusText);

} else {

alert("Request was unsuccessful: " + xhr.status);

}

根据返回的状态代码，这个例子可能会显示由服务器返回的内容，也可能会显示一条错误消息。我们建议读者要通过检查 status 来决定下一步的操作，不要依赖 statusText，因为后者在跨浏览器使用时不太可靠。另外，无论内容类型是什么，响应主体的内容都会保存到 responseText 属性中；而对于非 XML 数据而言，responseXML 属性的值将为 null。

有的浏览器会错误地报告 204 状态代码。IE 中 XHR 的 ActiveX 版本会将 204 设置为 1223，而IE 中原生的 XHR 则会将 204 规范化为 200 。Opera 会在取得 204 时报告 status 的值为 0，而 Safari 3 之前的版本则会将 status 设置为 undefined 。

像前面这样发送同步请求当然没有问题，但多数情况下，我们还是要发送异步请求，才能让 JavaScript 继续执行而不必等待响应。此时，可以检测 XHR 对象的 readyState 属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下。

• 0：未初始化。尚未调用 open() 方法。
• 1：启动。已经调用 open() 方法，但尚未调用 send() 方法。
• 2： 发送。已经调用 send() 方法，但尚未接收到响应。
• 3： 接收。已经接收到部分响应数据。
• 4： 完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

只要 readyState 属性的值由一个值变成另一个值时，都会触发一次 readyStatechange 事件。可以利用这个事件来检测每次状态变化后 readyState 的值。通常，我们只对 readyState 值为 4 的阶段感兴趣，因为这时所有数据都已经就绪。不过，必须在调用 open() 之前指定 onreadystatechange 事件处理程序才能确保跨浏览器兼容性。下面来看一个例子：

var xhr = createXHR();

xhr.onreadystatechange = function(){

if(xhr.readyState == 4) {

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

alert(xhr.responseText);

} else {

alert("Request was unsuccessful: " + xhr.status);

}

}

};

xhr.open("get", "exmple.txt", true);

xhr.send(null);

以上代码利用 DOM0级方法为 XHR 对象添加了事件处理程序，原因是并非所有浏览器都支持 DOM2级方法。与其他事件处理程序不同，这里没有向 onreadystatechange 事件处理程序中传递 event 对象；必须通过 XHR 对象本身来确定下一步该怎么做。

这个例子在 onreadystatechange 事件处理程序中使用了 xhr 对象，没有使用 this 对象，原因是 onreadystatechange 事件处理程序的作用域问题。如果使用 this 对象，在有的浏览器中会导致函数执行失败，或者导致错误发生。因此，使用实际的 XHR 对象实例变量是较为可靠的一种方式。

另外，在接收到响应之前还可以调用 abort() 方法来取消异步请求，如下所示：

xhr.abort();

调用这个方法后，XHR 对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。在终止请求之后，还应该对 XHR 对象进行解引用操作。由于内存原因，不建议重用 XHR 对象。

17.1.2 HTTP 头部信息

每个 HTTP 请求和响应都会带有相应的头部信息，其中有的对开发人员有用，有的也没有什么用。XHR 对象也提供了操作这两种头部 (即请求头部和响应头部) 信息的方法。

默认情况下，在发送 XHR 请求的同时，还会发送下列头部信息。

• Accept: 浏览器能够处理的内容类型。
• Accept-Charset: 浏览器能够显示的字符集。
• Accept-Encoding: 浏览器能够处理的压缩编码。
• Accept-Language: 浏览器当前设置的语音。
• Connection: 浏览器与服务器之间连接的类型。
• Cookie: 当前页面设置的任何 Cookie。
• Host: 发出请求的页面所在的域。
• Referer: 发出请求的页面的 URI。注意，HTTP 规范将这个头部字段拼写错了，而为保证与规范一致，也只能将错就错了 (这个英文单词的正确拼法应该是 referrer)。
• User-Agent: 浏览器的用户代理字符串。

虽然不同浏览器实际发送的头部信息会有所不同，但以上列出的基本上是所有浏览器都会发送的。使用 setRequestHeader() 方法可以设置自定义的请求头部信息。这个方法接受两个参数：头部字段的名称和头部字段的值。要成功发送请求头部信息，必须在调用 open() 方法之后且调用 send() 方法之前调用 setRequestHeader()，如下面的例子所示：

var xhr = createXHR();xhr.onreadystatechange = function(){if(xhr.readyState == 4){if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){alert(xhr.responseText);}else {alert("Request was unsuccessful: " + xhr.status);}}};xhr.open("get", "example.txt", true);xhr.setRequestHeader("MyHeader", "MyValue");xhr.send(null);

 

服务器在接收到这种自定义的头部信息之后，可以执行相应的后续操作。我们建议读者使用自定义的头部字段名称，不要使用浏览器正常发送的字段名称，否则有可能会影响服务器响应。有的浏览器允许开发人员重写默认的头部信息，但有的浏览器则不允许这样做。

调用 XHR 对象的 getResponseHeader() 方法并传入头部字段名称，可以取得相应的响应头部信息。而调用 getAllResponseHeaders() 方法则可以取得一个包含所有头部信息的长字符串。来看下面的例子：

var myHeader = xhr.getResponseHeader("MyHeader");

var allHeaders = xhr.getAllResponseHeaders();

在服务器端，也可以利用头部信息向浏览器发送额外的、结构化的数据。在没有自定义信息的情况下，getAllResponseHeaders() 方法通常会返回如下所示的多行文本内容：

Date: Sun, 14 Nov 2004 18:04:03 GMT

Server: Apache/1.3.29 (Unix)

Vary: Accept

X-Powered-By: PHP/4.3.8

Connection: clos

Content-Type: text/html; charset=iso-8859-1

这种格式化的输出可以方便我们检查响应中所有头部字段的名称，而不必一个一个地检查某个字段是否存在。

17.1.3 GET请求

GET 是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到 URL 的末尾，以便将信息发送给服务器。对 XHR 而言，位于传入 open() 方法的 URL 末尾的查询字符串必须经过正确的编码才行。

使用 GET 请求经常会发生的一个错误，就是查询字符串的格式有问题。查询字符串中每个参数的名称和值都必须使用 encodeURIComponent() 进行编码，然后才能放到 URL 的末尾；而且所有名值对都必须由和号 (&) 分隔，如下面的例子所示：

xhr.open("get", "example.php?name=1=value& name2=value2", true);

下面这个函数可以辅助向现有 URL 的末尾添加查询字符串参数：

function addURLParam(url, name, value){

url += url.indexOf("?") == -1 ? "?" : " & ";

url += encodeURIComponent(name) + "=" + encodeURIComponent(value);

return url;

}

这个 addURLParam() 函数接受3个参数：要添加参数的URL、参数的名称和参数的值。这个函数首先检查 URL 是否包含问号 (以确定是否已经有参数存在)。如果没有，就添加一个问号；否则，就添加一个和号。然后，将参数名称和值进行编码，再添加到 URL 的末尾。最后返回添加参数之后的 URL。

下面是使用这个函数来构建请求URL 的示例：

var url = "example.php";

// 添加参数

url = addURLParam(url, "name", "Nicholas");

url = addURLParam(url, "book", "Porfessional JavaScript");

// 初始化请求

xhr.open("get", url, false);

在这里使用 addURLParam() 函数可以确保查询字符串的格式良好，并可靠地用于 XHR 对象。

17.1.4 POST 请求

使用频率仅次于 GET 的是 POST 请求，通常用于向服务器发送应该被保存的数据。POST 请求应该把数据作为请求的主体提交，而 GET 请求传统上不是这样。POST 请求的主体可以包含非常多的数据，而且格式不限。在 open() 方法第一个参数的位置传入 "post" ，就可以初始化一个 POST 请求，如下面的例子所示：

xhr.open("open", "example.php", true);

发送 POST 请求的第二步就是向 send() 方法中传入某些数据。由于 XHR 最初的设计主要是为了处理 XML，因此可以在此传入 XML DOM 文档，传入的文档经序列化之后将作为请求主体被提交到服务器。当然，也可以在此传入任何想发送给服务器的字符串。

默认情况下，服务器对 POST 请求和提交 Web 表单的请求并不会一视同仁。因此，服务器端必须有程序来读取发送过来的原始数据，并从中解析出有用的部分。不过，我们可以使用 XHR 来模仿表单提交：首先将 Content-Type 头部信息设置为 application/x-www-form-urlencoded ，也就是表单提交时的内容类型，其次是以适当的格式创建一个字符串。第13章经讨论过，POST 数据的格式与查询字符串格式相同。如果需要将页面中表单的数据进行序列化，然后再通过 XHR 发送到服务器，那么就可以使用第 13 章介绍的 serialize() 函数来创建这个字符串：

function submitData(){var xhr = createXHR();xhr.onreadystatechange = function(event){if(xhr.readystatechange == 4){if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){alert(xhr.responseText);}else {alert("Request was unsuccessful: " + xhr.status);}}};xhr.open("post", "postexample.php", true);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");var form = document.getElementById("user-info");xhr.send(serialize(form));}

 

这个函数可以将 ID 为 "user-info" 的表单中的数据序列化之后发送给服务器。
与 GET 请求相比，POST 请求消耗的资源会更多一些。从性能角度来看，以发送相同的数据计，GET请求的速度最多可达到 POST 请求的两倍。
17.1.6 安全
首先，可以通过 XHR 访问的任何 URL 也可以通过浏览器或服务器来访问。下面的 URL 就是一个例子：
/getuserinfo.php?id=23
如果是向这个 URL 发送请求，可以想象结果会返回 ID 为 23 的用户的某些数据。谁也无法保证别人不会将这个 URL 的用户 ID 修改为 24、56或其他值。因此，getuserinfo.php文件必须知道请求者是否真的有权限访问要请求的数据；否则，你的服务器就会门户大开，任何人的数据都可能被泄漏出去。
对于未被授权系统有权访问的某个资源的情况，我们称之为 CSRF (Cross-Site Request Forgery，跨站点请求伪造)。未被授权系统会伪装自己，让处理请求的服务器认为它是合法的。受到 CSRF 攻击的 Ajax 程序有大有小，攻击行为既有旨在揭示系统漏洞的恶作剧，也有恶意的数据窃取或数据销毁。
为确保通过 XHR 访问的 URL 安全，通行的做法就是验证发送请求者是否有权限访问相应的资源。有下列几种方式可供选择。
要求以 SSL 连接来访问可以通过 XHR 请求的资源。
要求每一次请求都要附带经过相应算法计算得到的验证码。
请注意，下列措施对防范 CSRF 攻击不起作用。
要求发送 POST 而不是 GET 请求 -- 很容易改变。
检查来源 URL 以确定是否可信 -- 来源记录很容易伪造。
基于 cookie 信息进行验证 -- 同样很容易伪造。
XHR 对象也提供了一些安全机制，虽然表面上看可以保证安全，但实际上却相当不可靠。实际上，前面介绍的 open() 方法还能再接受两个参数：要随请求一起发送的用户名和密码。带有这两个参数的请求可以通过 SSL 发送给服务器上的页面，如下面的例子所示：
xhr.open("get", "example.php", true, "username", "password");            // 不要这样做 ！！
即便可以考虑这种安全机制，但我们建议还是不要这样做。把用户名和密码保存在 JavaScript 代码中本身就是极为不安全的。任何人，只要他会使用 JavaScript 调试器，就可以通过查看相应的变量发现纯文本形式的用户名和密码。