几种ajax

左手的ㄟ右手 2022-05-12 15:22 344阅读 0赞

**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][https_baijiahao.baidu.com_s_id_1608754469242612325_wfr_spider_for_pc]

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