postman 接口测试工具
AJAX（async javascript and xml）
- 传参
- 常用XHR的属性和方法及事件
Ajax 请求头中常见content-type
请求传参的几种格式
- 请求数据传参的三种常用格式
get/post区别
ajax状态 xhr.readyState
HTTP状态码 xhr.status/xhr.statusText
复习jquery中的ajax
自己封装jquery中的ajax

postman 接口测试工具

真实项目中，我们获取数据肯定是从服务器获取的
AJAX(JQ/AXIOS) 或者 FETCH 或者跨域请求
想从服务器获取数据，我们就需要知道基于哪个接口，能拿到哪些数据以及通过什么方式，传递给服务器，服务器返回啥等所有详细信息-》一般公司会给我们提供一个API数据请求的接口文档
在开发之前或者开发中，我们想测试一下接口数据能够正常请求成功（测一下接口）可以基于POSTMAN工具完成

AJAX（async javascript and xml）

XML: 可扩展的标记语言 HTML: 超文本标记语言

let xhr = new XMLHttpRequest;// 创造一个ajax实例
xhr.open('GET', '/userInfo?id=1'); //=>router Query
// xhr.open('GET', '/userInfo/1'); //=>router Params
//     后端处理: app.get('/userInfo/:id')
// 告诉这个实例以一种什么样的方式(get) 去哪里(路径)获取数据
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status == 200) {
                //能够进入这个条件中  证明 我们已经获取到了数据
        console.log(xhr.response);
    }
};
xhr.send();

传参

method 请求方式

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

url 请求的URL地址
async 是否采用异步默认是TRUE
username
userpass

常用XHR的属性和方法及事件
【属性】
xhr.onreadystatechange
xhr.readyState xhr实例的状态

+响应体

xhr.response 响应主体内容
xhr.responseText 响应主体的内容是字符串（JSON或者XML格式字符串都可以）
xhr.responseXML 响应主体的内容是XML文档
- xhr.status 返回的HTTP状态码
- xhr.statusText 状态码的描述
- xhr.timeout 给实例设置超时时间ms
- xhr.ontimeout 绑定超时事件

【方法】

xhr.open() 打开URL请求
响应头
- xhr.getResponseHeader([key]) 获取KEY对应的响应头信息
- xhr.getAllResponseHeaders() 获取所有响应头的信息
  - 例如：xhr.getResponseHeader( ‘date’) 就是在获取响应中的服务器时间
请求头【设置请求头】
- xhr.setRequestHeader(‘a’,’222’) 设置请求头必须放在open函数后面；不能有中文
请求体

xhr.send(请求体数据) 发送AJAX请求

Ajax 请求头中常见content-type

https://www.jianshu.com/p/10cdbb35ac87

请求传参的几种格式

发送请求「send中传递的信息，就是设置的请求主体信息」基于请求主体传递给服务器的数据格式是有要求的「Postman接口测试工具」
默认：text/plain;charset=UTF-8
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格式的字符串
真实项目中最常用的格式**，因为GET请求的问号参数就是这种格式，需要在请求头中设置
格式：“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字符串格式
在不做任何处理的情况下，我们一般都是把请求主体中的JSON对象转换成JSON格式的字符串传递给服务器
普通字符串 -> text/plain
JSON字符串 -> application/json => JSON.stringify/parse 「常用」
XML格式字符串 -> application/xml
……
4.binary进制数据文件「buffer/二进制…」
一般也应用于文件上传（我们在客户端本地把选取的文件转换为进制编码）
基于AJAX把进制编码传递给服务器，服务器接收到编码后，可以存储编码，也可以基于编码在
转解析为对应的文件，从而把文件存储到服务器上
图片 -> image/jpeg
EXCEL -> application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
5.GraphQL**

请求数据传参的三种常用格式

给Content-Type这个请求头设置相应的值<br />    1.**multipart/form-data**;上传文件或填写表单使用这种格式<br />    2.**application/x-www-form-urlencoded**; 在开发中axios中Content-Type默认值，很常用，用来处理键值对

以&符连接键值对的字符串

3.application/json;用来处理json字符串的

let xhr = new XMLHttpRequest();
// 创建实例
xhr.open('POST', 'http://liuqi.cn.utools.club/user/login');
xhr.onreadystatechange = function () {
   console.log(xhr.readyState);
   if (xhr.readyState === 4 && xhr.status === 200) {
       // xhr.responseText;
       console.log(xhr.getAllResponseHeaders());
       // console.log(xhr.getResponseHeader('Date'));
   }
};
// xhr.setRequestHeader('a', '111');
// xhr.setRequestHeader('Content-Type', 'application/json;');
// 第一个参数是请求方式：GET（get/head/delete/options...） POST(post/put/patch...)
// 第二个参数请求路径
// 第三个参数同步或异步；默认为true，异步
let obj = {
   age: 12,
   name: 'xx',
};
// console.log(Qs);
// qs是帮我们处理传参格式的类库
// stringify 对象转成‘age=12&name=xx’这种格式的字符串
// parse 把上面那种格式的字符串转成对象
console.log(JSON.stringify(obj));
xhr.send(JSON.stringify(obj));

get/post区别

从官方文档来说，GET和POST没有区别：但是在开发过程中，人为约定俗称的规范：
GET传参：除请求头的信息，基于问号传参传给后台
POST传参：放在请求体传给后台，xhr.send(请求体)

GET比post传参少，get问号传参因为URL有长度限制「IE->2KB；chorme-8kB」，超过这个长度的信息会被自动截掉，这样导致传递内容过多，最后服务器收到的信息是不完整的！！POST理论上是没有限制的，但是传递的东西越多，速度越慢，可能导致浏览器报传输超时的错误，所以实际上我们会自己手动做限制！!
GET会产生缓存,post请求没缓存「浏览器默认产生的，不可控的缓存」：两次及以上，请求相同的API接口，并且传递的参数也一样，浏览器可能会把第一次请求的信息直接返回，而不是从服务器获取最新的信息！！xhr.open(‘GET’, ‘./1.json?lx=1&name=xxx&_’+Math.random())
- get请求消除缓存的方式：在地址后加时间戳或URL的末尾设置随机数；以此来清除GET缓存的副作用
POST相对于GET来讲更安全一些：GET传递的信息是基于URL末尾拼接，这个随便做一些劫持或者修改，都可以直接改了，而POST请求参数在请求体中而请求主体信息的劫持，没那么好做！！但是“互联网面前，人人都在裸奔”！！所以不管什么方式，只要涉及安全的信息，都需要手动加密「因为默认所有的信息传输都是明文的」！！

ajax状态 xhr.readyState
0 UNSENT 创造出来xhr实例就是0
1 OPENED 执行open方法后就会由0变成1
2 HEADERS_RECEIVED 响应头信息已经返回
3 LOADING 响应主体信息正在接收
4 DONE 响应主体信息已经返回也就是整个请求完成

控制台：dir(xhr);

HTTP状态码 xhr.status/xhr.statusText
HTTP状态码： xhr.status
以2开头表示请求成功；以3开头表示重定向；以4/5开头都表示失败
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 未知服务器错误
502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。
503 Service Unavailable 超负荷
505 HTTP Version Not Supported HTTP版本不支持
……

复习jquery中的ajax

$.get('./1.json', {}, function () {
  // 请求成功触发的函数
});
$.ajax({
  url: './1.json',
  method: 'get', //默认是get
  async: true, //默认是true异步；传false表示同步
  cache: false, //默认是true不缓存此页面 默认时间戳
  //如果设置的是GET请求，会默认把DATA中的数据变为xxx=xxx&xxx=xxx的形式
  //并且把数据基于问号传参传递给服务器，如果是Post请求，则会基于请求主体，把信息传递给服务器，传递的是JSON格式
  data: {}, //传参
  success: function () {},
  error: function () {},
});

自己封装jquery中的ajax

  function my_ajax(options) {
        let {
            url,
            method = 'GET',
            async = true,
            cache = true,
            data = {},
            headers,
            success,
            error,
        } = options;
        // 把请求方式转大写
        method = method.toUpperCase();
        // 把data处理成以&连接的字符串
        let sendData = '';
        data = Qs.stringify(data);
        if (method === 'GET') {
            url += '?' + data;
        } else {
            sendData = data;
        }
        if (cache) {
            // 当cache为true时，需要取消页面缓存，给URL拼上时间戳
            url += '_=' + new Date().getTime();
        }
        let xhr = new XMLHttpRequest();
        xhr.open(method, url, async);
        // 设置默认请求
        xhr.setRequestHeader(
            'Content-Type',
            'application/x-www-form-urlencoded;'
        );
        // 设置请求头
        if (headers) {
            // Object.keys(obj)拿到对象里所有的属性名，以数组的方式返回
            Object.keys(headers).forEach(item => {
                // item 就是headers这个对象中所有的属性名
                // console.log(item,headers[item]);
                // 给xhr增加请求头
                xhr.setRequestHeader(item, headers[item]);
            });
            // for(let key in headers) {
            //     key headers[key]
            // }
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && (xhr.status + '')[0] === '2') {
                // 如果使用时没有传success函数，或者success不是个函数；success()执行都会报错
                // 所以需要判断success是不是函数
                typeof success === 'function' && success(xhr.responseText);
            } else {
                typeof error === 'function' && error(xhr.responseText);
            }
        };
        xhr.send(sendData);
        // 思考题
        // 1.成功的状态status是以2开头
        // 2.设置默认请求头，Content-Type：application/x-www-form-urlencoded;
    }
    my_ajax({
        url: './1.json',
        method: 'get', //默认是get
        async: true, //默认是true异步；传false表示同步
        cache: true, //默认是true不缓存此页面
        data: {}, //
        headers: {
            'Content-Type': 'application/json;',
            name: 1,
            age: 12,
        },
        success: function () {},
        error: function () {},
    });

JS系列笔记

Ajax原生JS&$.ajax&自己封装ajax