几种ajax

1.原生ajax（是核心，http协议，b-s浏览器与服务器之间的交互）
                XMLHttpRequest

                1. 实例化XHR对象
                    let xhr = new XMLHttpRequest();
                2. 打开请求 （设置请求行）
                    xhr.open(method,url);
                3. 设置请求头信息
                    xhr.responseType = 'json';
                    xhr.setRequestHeader('Content-type','application/json')
                4. 设置监听
                    xhr.onreadystatechange = function(){
                        if(this.readyState = 4){
                            if(this.status == 200){
                                响应成功
                                this.response
                            } else {
                                失败
                            }
                        }
                    }
                5. 发送请求(请求体)
                    xhr.send(JSON.stringify(data));

 注：以post发送数据

     1）如果发送参数类型是查询字符串，也就是表单类型，在发送的时候一定要将obj转换为查询字符串 ，qs必须在ES6模块代码下才能应用

            1. Content-Type:表单编码
                        application/x-www-form-urlencoded
                2. send()
                        var obj = {
                            name:"terry",
                            comment:'123'
                        }             
                        send(qs.stringify(obj));

 

       2）参数类型为json 在发送的时候一定要将obj转换为json字符串
                1. Content-Type:表单编码
                        application/json
                2. send()
                        var obj = {
                            name:"terry",
                            comment:'123'
                        }
                      
                        send(JSON.stringify(obj));

2 .jQuery.ajax
            1. 回调函数
            2. 不专注于ajax

            常见参数？含义？
                属性
                    url
                    method     请求方法，一般GET/POST/DELETE/PUT
                    
                    data                 如果不是字符串，将会自动转换为查询字符串。
                        {
                            name:"terry",
                            gender:"male"
                        }
                        name=terry&gender=male

                        {
                            ids:[1,2,3]
                        }
                        ids[]=1&ids[]=2&ids[]=3
                        ids[0]=1&ids[1]=2&ids[1]=3
                    async             默认为true,表示异步
                    dataType         期望接受到的响应值的数据格式
                    cache             是否缓存
                    processData 是否处理data数据，默认为true json不转换
                    contentType 内容类型，用来标识当前的数据格式，默认值为'application/x-www-form-urlencoded',如果使用post,data的值如果是对象，那么这个对象会自动转换为查询字符串 （qs）
                        application/x-www-form-urlencoded
                            表单编码，查询字符串
                        multipart/form-data
                            附件上传格式
                        text/plain
                            不编码
                        如果contentType取值不是以上三种之一，那么，在发送跨域请求的时候要先发送一个OPTIONS请求
                        application/json
                        $.post('');
                            网络监听
                            options     探路请求
                            post             真正请求

                钩子函数
                    beforeSend     在ajax发送之前，在xhr.send执行之前
                    success         在ajax请求成功之后执行
                    error             在ajax请求失败之后执行
                    complete         在ajax请求完成之后执行

  例子，2. 如何使用jquery发送查询字符串、如何使用jquery发送json
        1) 发送查询字符串
            $.ajax({
                method:'post',
                data:obj
            })
            如果数据是数组的话使用qs转换
            $.ajax({
                method:'post',
                processData:false,//先禁用自动转换
                data:qs.stringify({ids:[1,2,3,4]})
            })
            查看qs的api
        2) 发送JSON
        $.ajax({
            method:'post',
            contentType:'application/json',
            processData:false,
            data:JSON.Stringify(obj)
        })

3.axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端

   特点：

    1) 基于Promise ，用法简介
    2) 可以直接运行在node中，jquery不可以（基于XMLHttpRequest ，因为这个是浏览器的api）；也能运行在浏览器中
    3) 纯粹的Ajax库

   首先安装axios,

       方法一：npm install axios

       方法二： CDN 引入 <script src="https: //unpkg.com/axios/dist/axios.min.js"></script>

 

技术点：
    0) 基础
        1. axios用法
            1) 底层API
                axios({}).then().catch().finally();
                类似
                $.ajax({})
            2) 快捷API
               axios.get()里面两个参数
               axios.get(url [,config]).then().catch()=$.get(url[,data][,success][,dataType])

                1. axios.get(url[,config]).then().catch()
                    axios.get('deleteById?id=1')
                    axios.get('deleteById',{
                        params:{ids:1}
                    })
                    类似    
                    $.ajaxSetup({
                        error:function(){}
                    })
                    $.get(url[,data][,success][,dataType])
                2. axios.post(url[,data][,config]).then()
                3. axios.delete(url[,delete])
                4. axios.put(url[,data][,config])

                RESTFUL
                    get /category/findAll
                    get /category/deleteById
                    post/category/saveOrUpdate
                    post/category/batchDelete

                    get         /category         查询
                    delete     /category         单个删除 id
                    post         /category         保存
                    put         /category         修改
            3) axios config参数有哪些？
                axios({
                    baseURL:
                    url
                    method
                    params         GET请求的参数（拼接到地址）
                    data             POST请求的参数（请求体）
                    transformRequest:[(data,headers)=>{}]
                        在请求发送前执行函数，用于修改data的数据格式
                    paramsSerializer: function(params){}
                        在请求发送前执行函数，用于修改params的数据格式
                    headers:{
                        'Content-Type':'application/json'
                    },
                    transformResponse:[(data)=>{}]
                        在响应回来之后，then/catch执行之前执行
                    responseType:'json'
                        期望服务器返回的数据类型，类似于jquery dataType

                    //配合后台代码完成防攻击操作
                    xsrfCookieName
                    xsrfHeaderName
                })
 jquery默认将查询的数据转换为查询字符串
  使用axios post一个对象，类型为查询字符串
  axios默认为json，有个baseURL
    1) post提交一个对象，数据类型为查询字符串
        axios({
            baseURL:"http://120.78.164.247:8099",
            url:"/manager/category/saveOrUpdate",
            method:"post",
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            },
            transformRequest:[(data,headers)=>{
                return qs.stringify(data);
            }]
        })
        .then(()=>{

        })
        .catch(()=>{

        });
    2) post提交一个对象，数据类型为json,因为默认就是json
        axios({
            baseURL:"http://120.78.164.247:8099",
            url:"/manager/category/saveOrUpdate",
            method:"post",
            data:data,
        })
        .then(()=>{

        })
        .catch(()=>{

        });

    3) 如何提取配置信息
        设置基路径baseURL
        defaults后面的参数为config中的参数
        axios.defaults.baseURL="";
        axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

        axios.get('')
        axios.posts('')

    4）拦截器
        axios.interceptors.request.user((config)=>{

        },(error)=>{

        });

qs  query string 查寻字符串

 

                      

 

https://baijiahao.baidu.com/s?id=1608754469242612325&wfr=spider&for=pc