第二十一章 Ajax 与 Comet

Ajax 与 Comet

1. XMLHTTPRequest 对象

  • 创建 XHR 对象

    1
    var xhr = new XMLHttpRequest();
  • XHR 的用法
    发送同步请求

    1. 在使用 XHR 对象时,要调用的第一个方法是 open(),它接收 3 个参数:要发送请求的类型(get、post等)、请求的 URL 和表示是否异步发送请求的布尔值
    2. 调用 open() 方法并不会真正发送请求,只是启动一个请求以备发送
    3. 要发送请求必须调用 send() 方法,接收一个参数,即要作为请求主体发送的数据,如果不需要通过请求主体发送数据,则必须传入 null
    4. 在收到响应后,响应的数据会自动填充 XHR 对象的属性:

      responseText:作为响应主体被返回的文本

      responseXML:如果响应的内容类型是”text/xml“或”application/xml“,这个属性中将保存包含着响应数据的 XML DOM 文档

      status:响应的 HTTP 状态

      statusText:HTTP 状态的说明
    5. 收到响应后第一步是检查 status 属性,以确定响应已经成功返回:

      将 HTTP 状态码为 200作为成功的标志,responseText 属性的内容已经就绪

      HTTP 状态为 304 表示请求的资源没有被修改,可以直接使用浏览器缓存的版本
      1
      2
      xhr.open("get", "example.html", false);
      xhr.send(null);

发送异步请求

  1. 检测 XHR 对象的 readyState 属性,该属性表示请求/响应过程的当前活跃阶段,其值如下:

    0:未初始化。尚未调用 open() 方法

    1:启动。已经调用 open() 方法,尚未调用 send() 方法

    2:发送。已经调用 send() 方法,尚未收到响应

    3:接收。已经收到部分响应数据

    4:完成。已经收到全部响应数据,可以在客户端使用了
  2. 只要 readyState 属性值变更,都会触发一次 readystatechange 事件
  3. 在收到响应之前还可以调用 abort() 方法来取消异步请求
    1
    xhr.abort();
  • HTTP 头部信息
  • GET 请求

    1. GET 是最常用的请求类型,常用于向服务器查询某些信息。必要时可以将查询字符串参数追加到 URL 的末尾,以便将信息发送给服务器
    2. 对 XHR 而言,位于传入 open() 方法的 URL 末尾的查询字符串必须经过正确的编码才行
    3. 查询字符串中每个参数的名称和值都必须使用 encodeURIComponent() 进行编码,然后才能放到 URL 的末尾,而且所有名-值对都必须由 & 符号分割
      1
      xhr.open("get", "example.html?name1=value1&name2=value2", true);
  • POST 请求

    1. 使用频次仅次于 GET 的是 POST 请求,常用于向服务器发送应该被保存的数据。
    2. POST 请求应该把数据作为请求的主体提交,而 GET 请求传统上不是这样。
    3. POST 请求的主体可以包含非常多的数据,而且格式不限。
      1
      xhr.opne("post", "example.html", true);

2. XMLHttpRequest 2 级

  • FormData

    FormData 为序列化表单以及创建与表单格式相同的数据提供了便利

    1
    2
    var data = new FormData();
    data.append("name", "itroger");

append() 接收两个参数:键和值
创建了 FormData 的实例后,可以直接将它传给 XHR 的 send() 方法

1
xhr.send(data);

  • 超时发送

    timeout 属性表示请求在等待响应多少毫秒之后就终止,然后触发 timeout 事件

  • overrideMimeType() 方法

    用于重写 XHR 响应的 MIME 类型

3. 进度事件

  • loadstart:在接收到响应数据的第一个字节时触发
  • progress:在接收响应期间持续不断触发
  • error:在请求发生错误时触发
  • abort:在因为调用 abort()方法而终止连接时触发
  • load:在接收到完整的响应数据时触发
  • loadend:在通信完成或者触发 error、abort 和 load 事件后触发

4. 跨资源共享

5. 其他跨域技术

  • 图像 Ping
  • JSONP
  • Comet
  • 服务器发送事件
  • Web Sockets
  • SSE 与 Web Sockets

6. 安全

-------------本文结束 感谢您的阅读-------------
您的支持将鼓励我继续创作!