AJAX

AJAX核心：基于XMLHttpRequest创建HTTP请求

1、创建xhr实例

2、打开一个URL地址「发送请求前的一些配置信息」（open方法）

xhr.open(method, url,async,username,userpass)

• method 请求方式：GET(get/delete/head/options...)
  POST(post/put/patch...)

  GET和POST在官方定义中是没有明确的区别的，但是浏览器或者开发的时候，都有一套约定俗成的规范： GET请求传递给服务器的信息，除了请求头传递以外，要求基于URL问号传参传递给服务器 xhr.open('GET', './1.json?lx=1&name=xxx') POST请求要求传递给服务器的信息，是基于请求主体传递 xhr.send('lx=1&name=xxx')

• url 请求的URL地址

• async 是否采用异步 默认是TRUE

• username 用户名

• userpass 密码

3、 监听请求的过程，在不同的阶段做不同的处理「包含获取服务器的响应信息」

 + ajax状态  xhr.readyState
   + 0 UNSENT
   + 1 OPENED   
   -----
   + 2 HEADERS_RECEIVED 响应头信息已经返回
   + 3 LOADING 响应主体信息正在处理
   + 4 DONE 响应主体信息已经返回

4、 HTTP状态码 xhr.status/xhr.statusText

   + 200 OK 
   + 202 Accepted ：服务器已接受请求，但尚未处理（异步）
   + 204 No Content：服务器成功处理了请求，但不需要返回任何实体内容
   + 206 Partial Content：服务器已经成功处理了部分 GET 请求（断点续传 Range/If-Range/Content-Range/Content-Type:”multipart/byteranges”/Content-Length….）
   + 301 Moved Permanently 永久转移 「域名迁移」
   + 302 Move Temporarily 临时转移 「负载均衡」
   + 304 Not Modified
   + 305 Use Proxy
   + 400 Bad Request : 请求参数有误
   + 401 Unauthorized：权限（Authorization）
   + 403 Forbidden 服务器拒绝执行「为啥可能会已响应主体返回」
   + 404 Not Found 地址错误
   + 405 Method Not Allowed 请求方式不被允许
   + 408 Request Timeout 请求超时
   + 500 Internal Server Error  未知服务器错误
   + 503 Service Unavailable  超负荷
   + 505 HTTP Version Not Supported
   + ......

5、 获取响应主体信息 xhr.response/responseText/responseXML...

    服务器返回的响应主体信息的格式
    + 字符串「一般是JSON字符串」 「最常用」
    + XML格式数据
    + 文件流格式数据「buffer/二进制...」
    + ...
    

6、获取响应头信息 xhr.getResponseHeader（获取单个响应头）/getAllResponseHeaders （获取所有的响应头）
7、发送请求「send中传递的信息，就是设置的请求主体信息」

基于请求主体传递给服务器的数据格式是有要求的「Postman接口测试工具」

 1.form-data 主要应用于文件的上传或者表单数据提交
   xhr.setRequestHeader('Content-Type', 'multipart/form-data');
   ------
   let fd = new FormData;
   fd.append('lx', 0);
   fd.append('name', 'xxx');
   xhr.send(fd);
2.x-www-form-urlencoded格式的字符串
   格式：“lx=1&name=xxx” 「常用」
   Qs库：$npm i qs
   Qs.stringify/parse:实现对象和urlencoded格式字符串之间的转换
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        ------
   xhr.send(Qs.stringify({
        lx: 0,
        name: 'xxx'
    }));

 3.raw字符串格式
   普通字符串  -> text/plain
   JSON字符串 -> application/json  => JSON.stringify/parse  「常用」
   XML格式字符串 -> application/xml
   ......

 4.binary进制数据文件「buffer/二进制...」
   一般也应用于文件上传
   图片 -> image/jpeg
   EXCEL -> application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
   ...
 
 5.GraphQL
 
 

8、手写ajax

let xhr = new XMLHttpRequest;
xhr.open('GET', './1.json');
//xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status ==200) {
        console.log(xhr.response);
    }
};
xhr.send(null);