XMLHttpRequest 基本使用

什么是 XMLHttpRequest

XMLHttpRequest 是浏览器提供的 js 对象，通过它，可以请求服务器上的数据资源。之前的 $.ajax 等 Ajax 函数，就是基于 xhr 对象封装的。

xhr 发送 GET 请求

步骤：

1. 创建 xhr 对象
2. 调用 xhr.open() 函数
3. 调用 xhr.send() 函数
4. 监听 xhr.onreadystatechange 事件

     let xhr = new XMLHttpRequest()
     xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
     xhr.send()
     xhr.onreadystatechange = () => {
       if (xhr.readyState === 4 && xhr.status === 200) {
         console.log(xhr.responseText);
       }
     }

xhr 的 readyState 属性

XMLHttpRequest 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态之一：

• 0 --- UNSENT --- XMLHttpRequest 对象已被创建，但尚未调用 open 方法。
• 1 --- OPENED --- open 方法已经被调用。
• 2 --- HEADERS_RECEIVED --- send 方法已经被调用，响应头也已经被接受。
• 3 --- LOADING --- 接收数据中，此时 response 属性中已经包含部分数据。
• 4 --- DONE --- Ajax 请求完成，这意味着数据传输已经彻底完成或失败。

xhr 发送带参的 GET 请求

使用 xhr 对象发起带参数的 GET 请求时，只需要在调用 xhr.open 期间，为 URL 地址指定参数即可。这种在 URL 后面拼接的参数叫做查询字符串。

  let xhr = new XMLHttpRequest()

  xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')

  xhr.send()

  xhr.onreadystatechange = () => {

    if (xhr.readyState === 4 && xhr.status === 200) {

      console.log(xhr.responseText);

    }

  }

查询字符串

定义：查询字符串是指在 URL 的末尾加上用于向服务器发送信息的字符串( 变量 )。

格式：将英文的问号( ? )放在 URL 的末尾，然后再加上 参数=值，想要加多个参数的话可以使用 & 符进行分隔。以这个形式，可以将想要发送给服务器的数据添加到 URL 中。

URL 编码与解码

编码

URL 地址中，只允许出现相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。如果 URL 中需要包含中文这样的字符，则必须对中文字符进行编码(转义)。

URL 编码的原则：使用安全的字符(没有特殊用途或特殊意义的可打印字符)去表示那些不安全的字符。通俗理解就是使用英文字符去表示非英文字符。

如何进行编码和解码

浏览器提供了 URL 编码与解码的 API，分别是：

1. encodeURI()：编码的函数。
2. decodeURI()：解码的函数。

     console.log(encodeURI('编码与解码'));
     console.log(decodeURI('%E7%BC%96%E7%A0%81%E4%B8%8E%E8%A7%A3%E7%A0%81'));

xhr 发送 POST 请求

步骤

1. 创建 xhr 对象
2. 调用 xhr.open 函数
3. 设置 Content-Type 属性
4. 调用 xhr.send 函数，同时指定要发送的数据
5. 箭头 xhr.onreadystatechange 事件

  // 创建 xhr
  let xhr = new XMLHttpRequest()
  // 设置请求方式以及请求地址
  xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
  // 设置请求头，固定写法 -- application/x-www-form-urlencoded
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  // 发送请求，配置参数
  xhr.send('bookname=东游记&author=南游记&publisher=北游记')
  // readyState发生改变时触发的事件
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 获取返回的数据
      console.log(xhr.responseText);
    }
  }