这是我参与「第五届青训营」伴学笔记创作活动的第 10 天

XMLHttpRequest（xhr）

概述

xhr是浏览器提供的JavaScript对象，可以请求服务器上的数据资源

（jQuery中的ajax就是基于xhr对象封装出来的）

1. xhr对象的readyState属性：用来表示当前Ajax请求所处的状态

• UNSET（0）：xhr对象已被创建，但未调用open方法

• OPENED（1）：open方法已被调用

• HEADERS_RECEIVED（2）：send方法已被调用，响应头也已经被接收

• LOADING（3）：数据接受中，此时response属性已经包含部分数据

• DONE（4）：Ajax请求完成，数据已经彻底完成或失败

2. 查询字符串：在url末尾加上用于向服务器发送信息的字符串（多个参数可以用&分隔）

无论是$.get$.ajax 还是xhr实现ajax都是通过查询字符串的方式实现的

3. URL编码：在URL地址中，只允许出现英文相关的字母、标点符号、数字（不允许出现中文字符）

如果需要中文字符，必须编码

使用xhr发起GET请求（原生js）

1. 创建xhr对象
2. 调用xhr.open（）函数：创建请求，指定请求方式和URL地址

• 可接受三个参数，第三个参数（可选）：表示该请求是否异步的布尔值

3. 调用xhr.send（）函数：发起请求
4. 监听xhr.onreadystatechange事件：监听xhr对象的请求状态readystate和服务器响应状态status

• onreadystatechange事件处理程序不会收到event对象
• xhr.abort（）可以取消异步请求

xhr.responseText返回的数据中有一个status和xhr.status完全不一样

      // 1、创建xhr对象
      var xhr = new XMLHttpRequest();
      // 2、调用open函数   创建请求
      xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");
      // 3、调用send函数   发起请求
      xhr.send();
      // 4、监听onreadystatechange事件
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          //数据获取成功
          console.log(xhr.responseText);
        // xhr.responseText返回的数据中有一个status和xhr.status完全不一样
        }
      };


不带参数
 // 2、调用open函数   创建请求
      xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");

带参数
 // 2、调用open函数   创建请求
      xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=2246&bookname=金瓶梅");

带参数与否，主要在第二步创建请求中，如果带参数，只需在url中指定参数

使用xhr发起POST请求（原生js）

1. 创建xhr对象
2. 调用xhr.open（）函数：创建请求，指定请求方式和URL地址
3. 设置Content-Type属性 ：提交数据时必须指定的属性，如何对数据编码
4. 调用xhr.send（）函数：发起请求，同时指定要发送的数据
5. 监听xhr.onreadystatechange事件：监听xhr对象的请求状态readystate和服务器响应状态status

      //   1、创建xhr对象
      var xhr = new XMLHttpRequest();
      // 2、调用open函数 创建请求
      xhr.open("POST", "http://www.liulongbin.top:3006/api/addbook");
      // 3、设置conten-type属性  在发送之前对url所有字符编码
      //  给该请求增加额外的请求头部
      xhr.setRequestHeader(
        "Content-Type",
        "application/x-www-form-urlencoded"
      );
      // 4、调用send函数   发起请求
      xhr.send("bookname=童话故事&author=1&publisher=2");
      // 5、监听事件
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.responseText);
        }
      };

数据交换格式

就是服务器端与客户端之间进行数据传输和交换的格式（XML和JSON）

1. XML（extenxible markup language）可扩展标记语言

• HTML是描述网页内容的载体；XML用来传输和存储数据，是数据的载体；两者毫无关系

• 缺点：格式臃肿，传输效率低，js解析xml比较麻烦

2. JSON（javascript object notation）

封装自己的Ajax函数

function dataToString(data) {
    //将数据对象转换为查询字符串
    var arr = [];
    for (let prop in data) {
        arr.push(prop + "=" + data[prop]);
    }
    return arr.join("&");
}

// console.log(dataToString({ name: "皮妍玲", age: 22 }));
// // name = 皮妍玲 & age=22

function ajaxSlef(option) {
    var xhr = new XMLHttpRequest();

    var str = dataToString(option.data);

    if (option.method.toUpperCase() === "GET") {
        //发起get请求
        xhr.open(option.method, option.url + "?" + str);
        xhr.send();
    } else if (option.method.toUpperCase() === "POST") {
         //发起post请求
        xhr.open(option.method, option.url + "?" + str);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(str);
    }

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // xhr.responseText是字符串形式
            var result = JSON.parse(xhr.responseText);
            option.success(result);
        }
    }
}

---