XMLHttpRequest（xhr）是浏览器提供的Javascript对象，通过它，可以请求服务器上的数据资源。jQuery中的Ajax函数，就是基于xhr对象封装出来的。

xhr发起GET请求

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

  //1、创建xhr对象
  let  xhr = new XMLHttpRequest()
  //2、调用open函数 指定请求方式和URL地址 地址后面可以加上查询字符串 相当与data
  // xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
  xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?bookname=西游记')
  //3、调用send函数 发起Ajax 请求
  xhr.send()
  //4、 监听onreadystatechange 事件
  xhr.onreadystatechange = function () {
    // 4.1 监听xhr 对象的请求状态 readyState 和服务器的相应状态 status 固定写法 这里的status 和 res 返回的不是同一个
    if (xhr.readyState === 4 && xhr.status === 200){
      // 4.2 打印服务器相应回来的数据 responseText
      let  res = JSON.parse(xhr.responseText)
      //JSON.parse() 将JSON字符 转换成 对象数据
      console.log(res)
    }
  }

 xhr发起PSOT请求

1. 创建xhr对象
2. 调用xhr.open()函数
3. 设置Content-Type属性（固定写法）
4. 设置xhr.send()函数，同时指定要发送的数据
5. 监听 xhr.onreadystatechange 事件

//1、创建xhr对象
  let  xhr2 = new XMLHttpRequest()
  //2、调用open函数 指定请求方式和URL地址
  xhr2.open('POST','http://www.liulongbin.top:3006/api/addbook')
  //3、设置Content-Type 属性（固定写法）
  xhr2.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
  //3、调用send函数 发起Ajax 请求 同时将数据以查询字符串的形式 发送给服务器
  xhr2.send('bookname=斗破苍穹&author=萧炎&publisher=土豆出版社')
  //4、 监听onreadystatechange 事件
  xhr2.onreadystatechange = function () {
    // 4.1 监听xhr 对象的请求状态 readyState 和服务器的相应状态 status 固定写法 这里的status 和 res 返回的不是同一个
    if (xhr2.readyState === 4 && xhr2.status === 200){
      // 4.2 打印服务器相应回来的数据 responseText
      let  res = JSON.parse(xhr2.responseText)
      //JSON.parse() 将JSON字符 转换成 对象数据
      console.log(res)
    }
  }

 xhr对象的readystate状态

http的响应状态码

 状态码细分

url中的中文编码

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

浏览器提供了URL编码与解码的API

encodeURI('守株待兔')

输出字符串：%E5%AE%88%E6%A0%AA%E5%BE%85%E5%85%94

decodeURI('%E5%85%94')

输出字符串：兔