JavaScript中的AJAX

XMLHttpRequest对象

IE7+,FireFox,Chrome,Opera,Safari创建XHR对象

创建XHR对象的兼容性写法

XHR用法

发送同步请求

使用 XHR 时,首先要调用 open() 方法,传递三个参数:

  1. 要发送的请求类型( get , post 等)
  2. 请求的 url
  3. 是否异步发送

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

这里 send() 方法接收一个参数,作为请求主体发送的数据。如果不需要通过请求主体发送数据,这里必须传入 null ,因为这个参数对有些浏览器来说是必需的。调用 send() 之后,请求就会被分派到服务器。
由于这次请求是同步的,JavaScript 代码会等到服务器响应之后再继续执行。在收到响应之后,相应的数据会自动填充XHR对象的属性,相关的属性简介如下:

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

接受响应之后,第一步是检查 status 属性,以确定响应已经成功返回。状态码:

  • 200 表示成功
  • 304 表示请求的资源并没有修改,可以直接使用浏览器中缓存的版本,响应也是有效的

像下面这样检查上述这两种状态码的状态:

注意:无论内容类型是什么,响应主体的内容都会保存到 responseText 属性中;而对于非 XML 数据而言, responseXML 属性的值将为 null。

发送异步请求

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

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

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

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

调用这个方法后,XHR 对象会停止触发事件,而且也不再允许访问任何与响应有关的对象属性。

HTTP头部信息

每个 HTTP 请求和响应都会带有响应的头部信息,有的对开发人员有用,有的也没有什么用,XHR 对象也提供了操作这两种头部(即请求头部和响应头部)信息的方法。
默认情况下,在发送 XHR 请求的同事,还会发送下列头部信息。

  • Accept: 浏览器能够处理的内容类型。
  • Accept-Charset: 浏览器能够显示的字符集。
  • Accept-Encoding: 浏览器能够处理的压缩编码。
  • Accept-Language: 浏览器当前设置的语言。
  • Connection: 浏览器与服务器之间连接的类型。
  • Cookie: 当前页面设置的语言。
  • Host: 发出请求的页面所在的域。
  • Referer: 发出请求的页面的URI。
  • User-Agent: 浏览器的用户代理字符串。

使用 setRequestHeader() 方法可以设置自定义的请求头部信息。这个方法接受两个参数:头部字段的名称和头部字段的值。要成功发送请求头部信息,必须在调用 open() 方法之后且调用 send() 方法之前调用 setRequestHeader(),如下面的例子所示。

服务器在接收到这种自定义的头部信息之后,可移植性响应的后续操作。建议使用自定义的头部字段名称,不要使用浏览器正常发送的字段名称

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

GET请求

GET 是最常见的请求类型,最常用于向服务器查询某些信息。必要时,可以讲查询字符串参数追加到 URL 的末尾,以便将信息发送给服务器。对 XHR 而言,位于传入 open() 方法的 URL 末尾的查询字符串必须经过正确的编码才行。
使用 GET 请求经常会发生的一个错误,及时查询字符串的格式有问题。查询字符串中每个参数的名称和值必须使用 encodeURIComponent() 进行编码,然后才能放到 URL 的末尾;而且所有名-值对都必须由和号(&)分隔,例子如下:

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

使用方法:

POST请求

POST 请求通常用于向服务器发送应该被保存的数据。POST 请求应该吧数据作为请求的主体提交,而 GET 请求传统上不是这样。
默认情况下,服务器对 POST 请求和提交 Web 表单的请求并不会一视同仁。因此,服务器端必须有程序来读取发送过来的原始数据,并从中解析出有用的部分。不过,我们可以使用 XHR 来模仿表单提交:首先将 Content-Type 头部信息设置为 application/x-www-from-urlencoded,也就是表单提交时的内容类型,其次是以适当的格式创建一个字符串。
如下所示: