原生XMLHttpRequest发起请求+http的状态码

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状态

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

http的响应状态码

分类	分类描述
1**	信息，服务器收到请求，需要请求者继续执行操作（很少遇到）
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器再处理请求的过程中发生了错误

 状态码细分

状态码	状态码英文名称	中文描述
200	OK	请求成功。一般用于GET与POST请求
201	Created	已创建。成功请求并创建了新的资源，通常用于POST或PUT请求
301	Moved Permanently	永久移动。请求的资源已被永久的移动到新的URL，返回信息会包括新的URL，浏览器会自动定向到新URL，今后的任何请求都应使用新的URL代替
302	Found	临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有url
304	Not Modified	未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源（响应消息中不包含响应体）。客户端通常会缓存访问过的资源
400	Bad Request	1.语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交整个请求 2.请求参数有误
401	Unanthorized	当前请求需要用户验证
403	Forbidden	服务器已经理解请求，但是拒绝执行它
404	Not Found	服务器无法根据客户端的请求找到资源
408	Resquest Timeout	请求超时，服务器等待客户端发送的请求时间过长
500	Internal Server	服务器内部错误，无法完成请求
501	Not Implemented	服务器不支持该请求方法，无法完成请求。只有GET和HEAD请求方法是要求每个服务器必须支持的，其他请求方法在不支持的服务器上会返回501
503	Service Unavailable	由于超载或者系统维护，服务器暂时无法处理客户端的请求

url中的中文编码

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

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

encodeURI('守株待兔')

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

decodeURI('%E5%85%94')

输出字符串：兔