原生 ajax 详细讲解

本章主要内容是：每一块的详解，XMLHttpRequest 类型对象、open() 方法开启请求、setRequestHeader() 方法设置请求头、send() 方法发送请求、相应状态分析（readyState 属性、事件处理函数）

1、XMLHttpRequest 类型对象

• AJAX API 中核心提供的是一个 XMLHttpRequest 类型，所有的 AJAX 操作都需要使用到这个类型
• var xhr = new XMLHttpRequest();
• IE6 兼容
• xhr = new ActiveXObject("Microsoft.XMLHTTP");

    // 1、创建一个 XMLHTTPRequest 类型对象
    var xhr = null;
    // 兼容写法
    if (window.XMLHttpRequest){
        // 标准浏览器
        xhr = new XMLHttpRequest();
    } else {
        // IE6浏览器
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

---

2、open() 方法开启请求

• 本质上 XMLHttpRequest 就是 JavaScript 在 Web 平台中发送 HTTP 请求的手段，所以我 们发送出去的请求仍然是 HTTP 请求，同样符合 HTTP 约定的格式
• 语法：xhr.open(method, url)
• method：要使用的HTTP方法，比如「GET」、「POST」、「PUT」、「DELETE」、等
  • GET方法 获取数据
  • POST方法 提交一些新的数据
  • PUT方法 更改数据
  • DELETE方法 删除数据
• url：要向其发送请求的 URL 地址，字符串格式

// 2、open() 方法开启请求
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");

---

3、setRequestHeader() 方法设置请求头

• 此方法必须在 open() 方法和 send() 之间调用
• 语法：xhr.setRequestHeader(header, value);
• header: 一般设置 “Content-Type ” ，传输数据类型，即服务器需要我们传送的数据类 型
• value: 具体的数据类型，常用 "application/x-www-form-urlencoded" 和 "application/json"

---

4、send() 方法发送请求

• 用于发送 HTTP 请求
• 语法：xhr.send(body)
• body：在XHR请求中要发送的数据体，根据请求头中的类型进行传参
• 如果是 GET 方法，无需设置数据体，可以传 null 或者 不传参

// 3、send() 方法发送一次请求
// 如果是 get 方法请求，不需要在 send 中传参数
// 如果想传参数，直接写在网址上 xhr.open("GET", "https://jsonplaceholder.typicode.com/users?id=1");
// 一般 get 方法求情，不需要设置，而 post 方法必须设置
// xhr.open("POST", "https://jsonplaceholder.typicode.com/users");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=wth&age=25");

---

5、相应状态分析

readyState 属性

• readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态，由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次，所以我们有必要了解每一个状态值代表的含义

readyState	状态描述	说明
0	UNSENT	代理 XHR 被创建，但尚未调用 open() 方法
1	OPENED	open() 方法已经被调用，建立了连接
2	HEADERS_RECEIVED	send() 方法已经被调用，并且已经可以获取状态行和响应头
3	LOADING	响应体下载中， responseText 属性可能已经包含部分数据
4	DONE	响应体下载完成，可以直接使用 responseText

 

    // 1、创建一个 XMLHTTPRequest 类型对象
    var xhr = null;
    // 兼容写法
    if (window.XMLHttpRequest){
        // 标准浏览器
        xhr = new XMLHttpRequest();
    } else {
        // IE6浏览器
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    console.log("UNSENT",xhr.readyState);
    // 2、open() 方法开启请求
    xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
    console.log("OPENED",xhr.readyState);
    // 3、send() 方法发送一次请求
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("name=wth&age=25");
    // 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);
        } else if (this.readyState === 4){
            console.log("DONE",xhr.readyState);
        }
    };

 

 

事件处理函数

• 一般我们都是在 readyState 值为 4 时，执行响应的后续逻辑

xhr.onreadystatechange = function() {
if (this.readyState === 4) {
// 后续逻辑......
}
};

标签：原生,readyState,XMLHttpRequest,请求,方法,xhr,ajax,讲解,open
来源： https://blog.csdn.net/lnmgmgggggdd/article/details/120616701