AJAX 动态加载

前情

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：请求已完成，且响应已就绪

Value	State	Description
0	UNSENT	Client has been created. open() not called yet.
1	OPENED	open() has been called.
2	HEADERS_RECEIVED	send() has been called, and headers and status are available.
3	LOADING	Downloading; responseText holds partial data.
4	DONE	The operation is complete.

2：headerreceive 接收到响应头