跳到主要内容

1 篇博文 含有标签「AJAX」

查看所有标签

AJAX 动态加载

· 阅读需 5 分钟
Yana Ching
Yana Ching
Front End Engineer

前情​

Web 程序最初的目的是：共享数据（信息）

以前通过以下几种方式对服务端发起请求，获得服务端的数据：

  • 地址栏输入地址，回车，刷新
  • 特定元素的 href 或 src 属性
  • 表单提交
通过以上获取数据必须刷新网页，开销大 :::

AJAX （ Asynchronous JavaScript and XML ）​

通过 JavaScript 发送请求、接收响应，不必刷新页面获取最新数据

  • AJAX 就是浏览器提供的一套 API ，可以通过 JS 调用，从而实现控制请求与响应
  • XML 是描述数据的一种手段，现今常用 JSON 来描述，因为 XML 相比 JSON 冗余太多了

AJAX 基本使用​

  1. 创建 XMLHttpRequest 类型的对象
  2. 设置请求行，与服务端特定端口创建连接 open函数
  3. 设置请求头 setRequestHeader( )
    • 使用什么格式的请求体就要设置相应的 Content-Type 告知服务器端
  4. 设置请求体 send( )
var xhr = new XMLHttpRequest()
console.log(xhr.readyState)
// => 0 初始化 请求代理对象

xhr.open(method, url, boolean)
console.log(xhr.readyState)
// => 1 open 已经调用，建立一个与服务端特定端口的连接（已经建立）
xhr.send()
xhr.addEventListener('readystatechange', function () {
  switch (this.readyState) {
    case 2:
      console.log(this.readyState)
      // => 2 已经接收到响应报文的响应头
      break
    case 3:
      console.log(this.readyState)
      // => 3 正在下载响应报文的响应体
      // 可能为空 也可能不完整 在此处处理响应体不保险 （不可靠）
      break
    case 4:
      console.log(this.readyState)
      // => 4 一切OK
      // 整个报文已经下载下来了
      break
  }
})

readyState 有五种状态，四个阶段（0~1、...）​

  • 0 => 初始化，请求代理对象 new XMLHttpRequest()
  • 1 => 建立连接（已经建立） open
  • 2 => 已经接收到响应报文的响应头 send 之后
  • 3 => 正在下载响应报文的响应体
  • 4 => 整个报文已经下载下来了
应当设置请求体相应的 Content-Type 告知服务器 :::
  • onreadystatechange 函数只在状态改变的时候才响应，因此，如果 xhr.send(method, url, async) 中第三个参数 async 异步为 false 时，可能会出现来不及的现象
/**
 * 同步与异步模式的区别在于
 * 同步模式下 send 方法会出现等待的情况
 */
console.time('async')
var xhrAsync = new XMLHttpRequest() // 创建 xhr 对象
xhrAsync.open('GET', './time.php', 'true') // 与服务端创建连接
xhrAsync.send() // 设置请求体格式
console.timeEnd('async')
// async: 0.645751953125ms

console.time('sync')
var xhrSync = new XMLHttpRequest()
xhrSync.open('GET', './time.php', 'false')
xhrSync.send()
console.timeEnd('sync')
// sync: 0.340087890625ms

线程与进程​

  • 进程：进行中的程序
  • 线程：CPU 的最小执行单元

总结​

  • AJAX是浏览器提供的API

  • XMLHttpRequest 类型

  • onreadystatechange 事件 ：只在状态改变的时候响应

  • readyState：

    • 0：请求未初始化
    • 1：服务器连接已建立
    • 2：请求已接收（响应头）
    • 3：请求处理中（有可能拿到也有可能拿不到）
    • 4：请求已完成，且响应已就绪
ValueStateDescription
0UNSENTClient has been created. open() not called yet.
1OPENEDopen() has been called.
2HEADERS_RECEIVEDsend() has been called, and headers and status are available.
3LOADINGDownloading; responseText holds partial data.
4DONEThe operation is complete.

2：headerreceive 接收到响应头