ajax

1.Ajax【重点】

1.1 什么是ajax【了解】

异步的javaScript和XML，用于前后端少量的数据交互的异步通讯技术

1.2 ajax的优缺点【了解】

优点：
1.减少服务器的负担，按需要获得数据
2.无刷新更新页面，减少用户的实际和心理的等待时间，更好的用户体验。
3.主流浏览器支持

缺点：
1.对搜索引擎不友好

1.3 swagger接口平台【了解】

1.进入源码接口url平台 sc.itsource.cn
2.进入ajax基础接口文档
3.选择 GET api/testGet，测试接口try 
4.传参：name 属性值，例 name: tom
5.查看响应内容

1.4 ajax状态码&http响应码【掌握】

let xhr = new XMLHttpRequest()
// ajax引擎状态码
xhr.readyState
    0: 请求未初始化
    1: 服务器连接已建立
    2：请求已接收
    3：请求处理中
    4：请求已完成，且响应已就绪

// http响应码
xhr.status
    200 请求成功
    304 缓存

    // 400 开头的错误一般和前端有关【掌握】
    400 请求参数有误，去查看请求参数是否写错
    403 没有权限，去查看账号密码是否有误
    404 未找到资源，去查看url是否写错
    405 请求方法有错误，去查看请求方法是否写错
    408 请求超时

    // 500开头的错误一般和后端有关系
    500 服务器级别错误，一般是服务器有关
    502 上游服务器无响应

1.5 get请求4大步【重点】

1. 创建ajax对象
let xhr = new XMLHttpRequest()
2. 配置请求方式和请求地址
xhr.open(方法名, 接口地址)
3. 监听状态变化 & 接收数据
xhr.onreadystatechange = function(){
    if( xhr.readyState === 4 && xhr.status === 200 ){
        JSON.parse(xhr.response) // 要将后台传过来的JSON数据进行转换
    }
}
4. 发送请求
xhr.send()

1.6 ajax四看【重点】

1.看地址（查看请求地址有没有写对，有没有拼接完整）
2.看方式和状态码（查看请求方式有没有写错，状态码是不是绿色的）
3.看参数（看请求参数有没有发出去，参数名是否拼写正确，参数值有没有）
4.看响应（看后端返回的结果有没有，数据对不对）

1.7 post请求5大步【重点】

1.创建ajax对象
2.配置请求方法和请求路径
3.监听ajax状态和http响应码
4.设置请求头
5.发送请求

2.Axios库【重点】

2.1 引入axios【掌握】

1.百度搜索axios => https://www.axios-http.cn/
2.引入axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.2 axios基本使用【重点】

// 发起一个post请求
axios({
    method: "post",
    url: "http://ajax.h5.itsource.cn:5000/api/testPost",
    data: {
        name: "小明",
    },
});
// 发起一个get请求
axios({
    method: "get",
    url: "http://ajax.h5.itsource.cn:5000/api/testGet?name=小王",
    // params: {
    //  name: "小王",
    // },
});
// 发送一个post简单请求
axios.post("http://ajax.h5.itsource.cn:5000/api/testPost", {
    name: "小强",
});
// 发送一个get简单请求
axios.get("http://ajax.h5.itsource.cn:5000/api/testGet?name=小王吧");
axios("http://ajax.h5.itsource.cn:5000/api/testGet?name=小吕"); // 默认get方法