AJAX从入门到放弃

概述

AJAX（Asynchronous JavaScript and XML），是异步的 JavaScript 与 XML 技术，它其实就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。

1. 使用 XMLHttpRequest 发请求；
2. 服务器返回 XML 格式的字符串；
3. JS 解析 XML，并更新局部页面；

发送请求的方式

我们先来了解一下发送请求的几种方式。

一共有五种方式，分别为：

1. form 表单；
2. a 标签；
3. img 标签；
4. link 标签；
5. script 标签；

form表单

<form action="xxx" method=get>
  <input type="password" name="password">
  <input type="submit">
</form>
<form action="yyy" method=post>
  <input type="password" name="password">
  <input type="submit">
</form>

a标签

<a href="/xxx">click</a>

img标签

var image = document.createElement('img')
image.src = '/xxx'
document.body.appendChild(image)

link标签

var link = document.createElement('link')
link.rel = 'stylesheet'
link.href = '/xxx'
document.head.appendChild(link)

script标签

var script = document.createElement('script')
script.src = '/xxx'
document.head.appendChild(script)

总结

1. 用 form 可以发请求，但是会刷新页面或新开页面；
2. 用 a 标签可以发 get 请求，但是会刷新页面或新开页面；
3. 用 img 可以发 get 请求，但是只能以图片形式展示；
4. 用 link 可以发 get 请求，但是只能以 css、favicon 的形式展示；
5. 用 script 可以发 get 请求，但是只能以脚本的形式运行；

基本使用

var xhr = new XMLHttpRequest()
xhr.open('GET', './xxx', true)
xhr.onreadystatechange = function() {
  if (this.readyState === 4) {
    console.log(this)   // XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, ...
  }
}
xhr.send(null)

readyState

XMLHttpRequest.readyState 返回一个整数，表示实例对象的当前状态。该属性只读。它可能返回以下值：

• 0，表示 XMLHttpRequest 实例已经生成，但是实例的 open() 方法还没有被调用。
• 1，表示 open() 方法已经调用，但是实例的 send() 方法还没有调用，仍然可以使用实例的 setRequestHeader() 方法，设定 HTTP 请求的头信息。
• 2，表示实例的 send() 方法已经调用，并且服务器返回的头信息和状态码已经收到。
• 3，表示正在接收服务器传来的数据体（body 部分）。这时，如果实例的 responseType 属性等于 text 或者空字符串，responseText 属性就会包含已经收到的部分信息。
• 4，表示服务器返回的数据已经完全接收，或者本次接收已经失败。

通信过程中，每当实例对象发生状态变化，它的 readyState 属性的值就会改变。这个值每一次变化，都会触发 readyStateChange 事件。

当 readyState 等于 4 时，表明脚本发出的 HTTP 请求已经成功。其他情况，都表示 HTTP 请求还在进行中。

遵循HTTP

本质上 XMLHttpRequest 就是 JavaScript 在 Web 平台中发送 HTTP 请求的手段，因此发送出去的请求任然是 HTTP 请求，同样符合 HTTP 约定的格式。

var xhr = new XMLHttpRequest()

// 设置请求报文的请求行
xhr.open('GET', '/xxx')

// 设置请求头
xhr.setRequestHeader('Accept', 'text/plain')

// 设置请求体
xhr.send(null)

xhr.onreadystatechange = function() {
  if (this.readyState === 4) {
    // 获取响应状态码
    console.log(this.status)

    // 获取响应状态描述
    console.log(this.statusText)

    // 获取响应头信息
    console.log(this.getResponseHeader('Content‐Type'))
    console.log(this.getAllResponseHeader())

    // 获取响应体
    console.log(this.responseText)
    console.log(this.responseXML)
  }
}

兼容性

XMLHttpRequest 在老版本浏览器（例如：IE5/6）中有兼容问题，我们可以另外一种方法代替：

let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')

同源策略

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

• ajax请求时，浏览器要求当前网页和 server 必须同源；
• 同源是指协议相同、域名相同、端口相同，三者必须一致；

如果非同源，以下三种行为将受到限制：

1. Cookie、LocalStorage 和 IndexDB 无法读取；
2. DOM 无法获得；
3. AJAX 请求不能发送；

手写一个AJAX

let xhr = new XMLHttpRequest()
xhr.open('GET', '/xxx',true)
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){
    if(xhr.status >= 200 && xhr.status < 300){
      console.log('请求成功')
    }else{
      console.log('请求失败')
    }
  }
}
xhr.send()

详细完整代码 - Github

阮一峰 - JavaScript 标准参考教程 - AJAX

ajax常用插件

jQuery - ajax

MDN - Fetch

axios