AJAX的工作原理

AJAX的工作原理是通过xmlHttpRequest对象向服务器发出一个异步请求，相当于在用户和服务器之间加了一个中间层，使用户操作和服务器响应异步化，并不是所有的用户请求都提交给服务器，像一些数据验证和数据请求处理等工作交给ajax引擎来做,只有确定需要从服务器读取新数据时再由AJAX引擎代替浏览器向服务器提交请求。使用AJAX可以把以前服务器承担的部分工作转移到客户端，利用客户端闲置的处理能力，从而减轻服务器的带宽负担，达到带宽租用成本的目的

xmlHttpRequest

xmlHttpRequest可扩展超文本传输请求，即xmlHttpRequest对象可以在不同服务器提交整个页面的情况下，实现局部更新网页内容。xmlHttpRequest对象提供了HTTP协议的完全访问，包括GET，POST，HEAD等请求，除此之外它还支持File和FTP协议。xmlHttpRequest可以同步或异步返回web服务器的响应，并且能以文本或者DOM文档形式返回内容。

JQuery

    $.ajax({
        url:"",
        type:"",
        dataType:"",
        success:(response)=>{
            console.log(response)
        },
    })

axios

--参考axios二次封装

promise形式

    接口函数({}).then((response)=>{
        console.log(response)
    })

async/await

    async 事件函数(){
        let 变量=await 接口函数({参数名:参数值})
        console.log(变量)
    }

--main.js挂载形式

    import axios from 'axios'
    Vue.prototype.axios=axios
    axios.defaults.baseUrl="公共基础地址"
    --vue文件
    this.$axios.get("接口地址",{
        参数名:参数值
    }).then((response)=>{
        console.log(response)
    })

fetch(ES6新增)

    let myRequest=new Request("url地址"，{
        methods:"请求方法"，
        body:JSON.stringify({
            参数名:参数值
        })
    })
    fetch(myRequest).then((response)=>{
        console.log(response)
    })

原生

    var xhr=new xmlHTTPRequest()
    xhr.open("请求方法","请求地址")
    xhr.setRequestHeader("Content-type":"响应参数形式")
    xhr.onreadystatechange=function(){
        xhr.onload=function(){
            if(xhr.readyState==4&&xhr.status==200){
                console.log(xhr.responseText)
            }
        }
    }
    xhr.send()

ajax异步封装以jquery为例---微信同理/uniApp同理

    const beaseUrl="开发环境测试地址"
    
    const header=(request)=>{
        request.setRequestHeader(Authorization,localStorage("tocken"))
    }
    
    const request=(url="",data={},methods='GET')=>{
        return new Promise((resolve,reject)=>{
            $.ajax({
                url:baseurl+url,
                beforeSend:header
                data:data,
                type:methods,
                success:(res)=>{
                    resolve(res)
                },
                err:(err)=>{
                    reject(err)
                }
            })
        })
    }
    export default request

本文正在参加⌈金石计划⌋

ajax（Async JavaScript And Xml）