第21章 Ajax 与Comet（2）

21.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.php", 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 GMTServer: Apache/1.3.29 (Unix)Vary: AcceptX-Powered-By: PHP/4.3.8Connection: closeContent-Type: text/html; charset=iso-8859-1

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

21.1.3 GET请求

GET 是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL 的末尾，

以便将信息发送给服务器。对XHR 而言，位于传入open()方法的URL 末尾的查询字符串必须经过正确的编码才行。

使用GET 请求经常会发生的一个错误，就是查询字符串的格式有问题。查询字符串中每个参数的名称和值都必须使用

encodeURIComponent()进行编码，然后才能放到URL 的末尾；而且所有名-值对儿都必须由和号（&）分隔，如下面的例子所示。

xhr.open("get", "example.php?name1=value1&name2=value2", true);

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

function addURLParam(url, name, value) {

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

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

      return url;

}

这个addURLParam()函数接受三个参数：要添加参数的URL、参数的名称和参数的值。这个函数首先检查URL 是否包含

问号（以确定是否已经有参数存在）。如果没有，就添加一个问号；否则，就添加一个和号。然后，将参数名称和值进行编码，

再添加到URL 的末尾。最后返回添加参数之后的URL。

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

var url = "example.php";

//添加参数

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

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

//初始化请求

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

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

21.1.4 POST请求

使用频率仅次于GET 的是POST 请求，通常用于向服务器发送应该被保存的数据。POST 请求应该把数据作为请求的

主体提交，而GET 请求传统上不是这样。POST 请求的主体可以包含非常多的数据，而且格式不限。

在open()方法第一个参数的位置传入"post"，就可以初始化一个POST 请求，如下面的例子所示。

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

发送POST 请求的第二步就是向send()方法中传入某些数据。由于XHR 最初的设计主要是为了处理XML，

因此可以在此传入XML DOM 文档，传入的文档经序列化之后将作为请求主体被提交到服务器。

当然，也可以在此传入任何想发送到服务器的字符串。

默认情况下，服务器对POST 请求和提交Web 表单的请求并不会一视同仁。因此，服务器端必须有程序来读取

发送过来的原始数据，并从中解析出有用的部分。不过，我们可以使用XHR 来模仿表单提交：

首先将Content-Type 头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型，

其次是以适当的格式创建一个字符串。第14 章曾经讨论过，POST 数据的格式与查询字符串格式相同。

如果需要将页面中表单的数据进行序列化，然后再通过XHR 发送到服务器，那么就可以使用第14 章介绍的

serialize()函数来创建这个字符串：

这个函数可以将ID 为"user-info"的表单中的数据序列化之后发送给服务器。而下面的示例PHP文件postexample.php 就可以

通过$_POST 取得提交的数据了：

<?php

header("Content-Type: text/plain");

echo <<<EOF

Name: {$_POST[‘user-name’]}

Email: {$_POST[‘user-email’]}

EOF;

?>

如果不设置Content-Type 头部信息，那么发送给服务器的数据就不会出现在$_POST 超级全局变量中。这时候，

要访问同样的数据，就必须借助$HTTP_RAW_POST_DATA。

PS：与GET 请求相比，POST 请求消耗的资源会更多一些。从性能角度来看，以发送相同的数据计，

GET 请求的速度最多可达到POST 请求的两倍。