1、什么是XMLHttpRequest

【解释】： XMLHttpRequest是浏览器提供的一个JavaScript对象，通过此对象可以请求服务器上的资源。

【jQuery中的Ajax与xhr的关系】：

2、使用xhr发起get请求

【步骤】：

• 创建xhr对象
• 调用xhr.open()函数
• 调用xhr.send()函数
• 监听xhr.onreadystatechange事件

【示例】：

<script>
  // 1、创建xhr对象
  var xhr = new XMLHttpRequest();
  // 2、调用open()函数，参数中指定请求方式和地址
  xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks')
  // 3、调用send()函数发起请求
  xhr.send()
  // 4、监听shr的onreadystatechange事件
  xhr.onreadystatechange = function () {
    // 判断xhr对象的请求状态readyState与服务器响应状态status {固定写法}
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 打印响应数据
      console.log(xhr.responseText);
    }
  }
</script>

3、xhr的readyState属性

4、xhr发起带参数的get请求

【方法】： 在open()函数的参数中，地址后面采用？传递查询字符串

1、什么是查询字符串

【解释】： 查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）。

【格式】： 将英文的 ? 放在URL 的末尾，然后再加上 参数＝值 ，想加上多个参数的话，使用 & 符号进行分隔。

【示例】：

// 不带参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks
// 带一个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1
// 带两个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记

【代码示例】：

<script>
  // 1、创建xhr对象
  var xhr = new XMLHttpRequest();
  // 2、调用open()函数，参数中指定请求方式和地址
  xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
  // 3、调用send()函数发起请求
  xhr.send()
  // 4、监听shr的onreadystatechange事件
  xhr.onreadystatechange = function () {
    // 判断xhr对象的请求状态readyState与服务器响应状态status {固定写法}
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 打印响应数据
      console.log(xhr.responseText);
    }
  }
</script>

5、get请求携带参数的本质

无论使用 $.ajax()，还是使用 $.get()，又或者直接使用 xhr 对象发起 GET 请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到 URL 地址的后面，发送到服务器的。

【示例】：

<script>
  $.get('http://www.liulongbin.top:3006/api/getbooks', {
    id: 1,
    bookname: '西游记'
  }, function (res) {
    console.log(res);
  })

  $.ajax({
    method: 'GET',
    url: 'http://www.liulongbin.top:3006/api/getbooks',
    data: {
      id: 1,
      bookname: '西游记'
    },
    success: function (res) {
      console.log(res);
    }
  })
</script>

【结果显示】：

6、什么是URL编码

【解释】： 使用英文字符去表示非英文字符。

【如何进行编码】：

• encodeURI() 编码的函数
• decodeURI() 解码的函数

【示例】：

<script>
  console.log(encodeURI('西游记'));
  console.log(decodeURI('%E8%A5%BF%E6%B8%B8%E8%AE%B0'));
</script>

7、使用xhr发起POST请求

【步骤】：

• 创建xhr对象
• 调用xhr.open()函数
• 设置Content-type属性 {固定写法}
• 调用xhr.send()函数
• 监听xhr.onreadystatechange事件

【代码示例】：

<script>
  // 创建xhr对象
  var xhr = new XMLHttpRequest()
  // 调用open()函数 参数中指定请求方式和地址
  xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
  // 设置Content-type
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
  // 调度send函数
  xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
  // 添加xhr的onreadystatechange监听事件
  xhr.onreadystatechange = function () {
    // 判断xhr请求的状态和服务器响应状态
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  }
</script>