原生AJAX详解

// 1.创建一个 XMLHttpRequest 类型的对象
    var xhr = null;
    // 兼容写法
    if (window.XMLHttpRequest) {
      // 标准浏览器
      xhr = new XMLHttpRequest();
    } else {
      // IE 6 浏览器
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 2.open() 方法开启请求
    // xhr.open("GET","https://jsonplaceholder.typicode.com/users?id=1");
    xhr.open("POST","https://jsonplaceholder.typicode.com/users");
    // 设置请求头

set RequestHeader() 方法设置请求头

• 此方法必须在 open() 方法和 send() 之间调用。

• 语法：xhr.setRequestHeader(header, value);

• header: 一般设置 “

Content-Type” ，传输数据类型，即服务器需要我们传送的数据类

型

• value: 具体的数据类型，常用 "application/x-www-form-urlencoded" 和

"application/json

    // 一般 get 方法不需要设置，而 post 方法必须设置

 

    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    // 3.send() 方法发送一次请求
    // 如果是 get 方法请求，不需要再 send 中传参数，它如果想传参数，直接写在网址上（?id=1）
    // xhr.send(null);
    xhr.send("name=harry&age=19");

// 4.指定回调函数，处理得到的数据
    xhr.onreadystatechange = function () {
      // 通过判断 xhr 的 readyState ，确定此次请求是否完成
      if (this.readyState === 2) {
        console.log("headers received",xhr.readyState);
      } else if (this.readyState === 3) {
        console.log("loading",xhr.readyState)
        console.log(xhr.responseText)
      } else if (this.readyState === 4) {
        console.log("done",xhr.readyState)
        console.log(xhr.responseText)
      }
    }

readyState 属性

• readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态，由于 readystatechange 事件是

在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次，所以我

们有必要了解每一个状态值代表的含义：

readyState

状态描述

说明

0

UNSENT

代理 XHR 被创建，但尚未调用 open() 方法

1

OPENED

open() 方法已经被调用，建立了连接。

2

HEADERS_RECEIVED

send() 方法已经被调用，并且已经可以获取状态行和响应头

3

LOADING

响应体下载中， responseText 属性可能已经包含部分数据

4

DONE

响应体下载完成，可以直接使用 responseText