AJAX从入门到放弃

概述

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

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

发送请求的方式

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

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

form 表单；
a 标签；
img 标签；
link 标签；
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)

总结

用 form 可以发请求，但是会刷新页面或新开页面；
用 a 标签可以发 get 请求，但是会刷新页面或新开页面；
用 img 可以发 get 请求，但是只能以图片形式展示；
用 link 可以发 get 请求，但是只能以 css、favicon 的形式展示；
用 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 必须同源；
同源是指协议相同、域名相同、端口相同，三者必须一致；

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

Cookie、LocalStorage 和 IndexDB 无法读取；
DOM 无法获得；
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