小白学AJAX-02-原理

Posted 2020-12-24 hetianhe

基本原理

原理很简单

1. new XHR
2. xhr.onreadystatechange
3. xhr.open(method, url, async)
4. xhr.send()

创建xhr对象

兼容一下ie6，参考司徒正美大大的写法：

var xhr = new (window.XMLHttpRequest||ActiveXObject)(‘Microsoft.XMLHTTP‘)

XHR创建请求

xhr.open(method, url, async)是创建请求，并接收三个参数：

1. 发送请求的类型，主要是"GET"和"POST"；
2. 请求的url，如果为GET，data参数拼接在url后面，
   如何为POST，xhr.send(data)，并且设置header；

3. async是否异步，默认为true表示异步，false表示同步。

XHR响应请求

onreadychange对象有个readyState属性，其值有5个

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

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

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

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

4:完成。已经接受到全部响应数据，并且可以在客户端使用

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
      var status = xhr.status;
      if (status >= 200 & status < 300 || status === 304) {
          console.log(xhr.responseText)
      }
  }
}

发送请求

xhr.send(data)，data的格式为‘param1=value1&param2=value2‘；

需要注意一点，类型为post时，setRequestHeader要放在xhr.open()之后。