//1.創(chuàng)建 ajax交互對象 通過XMLHTTPRequest來實例化出來
let ajax = new XMLHttpRequest();
//2.建立前端和服務(wù)器之間的連接 ajax對象有一個方法 open 調(diào)用即可建立連接
ajax.open("請求方式"，"服務(wù)器url地址");
//3.發(fā)送請求 ajax對象有一個方法 send 調(diào)用即可發(fā)送請求
ajax.send();
//4.接收服務(wù)器響應(yīng)數(shù)據(jù)  ajax中是通過ajax對象的一個事件——onreadystatechange(通信狀態(tài)碼/生命周期 改變事件)
ajax.onreadystatechange = ()=>{
    //5.接收響應(yīng)數(shù)據(jù) 當(dāng)通信狀態(tài)碼為4的時候 就可以獲取到響應(yīng)數(shù)據(jù)了
    if(ajax.readyState==4){
        if(ajax.status==200||ajax.status==304){
            console.log(ajax.responseText)
        }
        else{
            console.log("請求失敗")
        }
    }
}

//1.創(chuàng)建 ajax交互對象 通過XMLHTTPRequest來實例化出來
let ajax = new XMLHttpRequest();
//2.建立前端和服務(wù)器之間的連接 ajax對象有一個方法 open 調(diào)用即可建立連接  
//get請求提交數(shù)據(jù) 提交在地址后面
ajax.open("get"，"服務(wù)器url地址?鍵名=鍵值&鍵名=鍵值&...");
//3.發(fā)送請求 ajax對象有一個方法 send 調(diào)用即可發(fā)送請求
ajax.send();
//4.接收服務(wù)器響應(yīng)數(shù)據(jù)  ajax中是通過ajax對象的一個事件——onreadystatechange(通信狀態(tài)碼/生命周期 改變事件)
ajax.onreadystatechange = ()=>{
    //5.接收響應(yīng)數(shù)據(jù) 當(dāng)通信狀態(tài)碼為4的時候 就可以獲取到響應(yīng)數(shù)據(jù)了
    if(ajax.readyState==4){
        if(ajax.status==200||ajax.status==304){
            console.log(ajax.responseText)
        }
        else{
            console.log("請求失敗")
        }
    }
}

//1.創(chuàng)建 ajax交互對象 通過XMLHTTPRequest來實例化出來
let ajax = new XMLHttpRequest();
//2.建立前端和服務(wù)器之間的連接 ajax對象有一個方法 open 調(diào)用即可建立連接  
//get請求提交數(shù)據(jù) 提交在地址后面
ajax.open("post"，"服務(wù)器url地址?鍵名=鍵值&鍵名=鍵值&...");
//設(shè)置請求頭
ajax.setRequestHeader("content-type"，"application/x-www-form-urlencoded"/"application/json")
//3.發(fā)送請求 ajax對象有一個方法 send 調(diào)用即可發(fā)送請求
//將要提交的數(shù)據(jù) 作為實參 傳入send方法中
ajax.send("鍵名=鍵值&鍵名=鍵值&..."/JSON.stringify({}));
//注意：如果設(shè)置為 application/json 提交的數(shù)據(jù) 必須是一個對象格式的json字符串
//4.接收服務(wù)器響應(yīng)數(shù)據(jù)  ajax中是通過ajax對象的一個事件——onreadystatechange(通信狀態(tài)碼/生命周期 改變事件)
ajax.onreadystatechange = ()=>{
    //5.接收響應(yīng)數(shù)據(jù) 當(dāng)通信狀態(tài)碼為4的時候 就可以獲取到響應(yīng)數(shù)據(jù)了
    if(ajax.readyState==4){
        if(ajax.status==200||ajax.status==304){
            console.log(ajax.responseText)
        }
        else{
            console.log("請求失敗")
        }
    }
}

$(()=>{
    //調(diào)用ajax方法 實現(xiàn)數(shù)據(jù)交互
    $.ajax({
        url:"服務(wù)器url地址"，//必傳項
        type:"請求方式",//可選項 默認值為get
        dataType:"數(shù)據(jù)交互的格式"http://可選項 默認值為json 另外還可以選擇 xml text jsonp
        data:{},//請求提交的數(shù)據(jù) 可選項 默認不提交數(shù)據(jù)  如果想提交 在對象中 寫入屬性即可提交
        timeout:數(shù)字，//超時時間 可選項 默認為無限 如果設(shè)置了具體的超時時間 則會在請求發(fā)送后 超過超時                     時間還沒接收到響應(yīng)數(shù)據(jù)的時候  停止請求 并報錯404   單位為ms
        beforeSend(){
            //這個方法函數(shù) 會在ajax發(fā)送請求前 執(zhí)行
        }，
        success(res){
            //這個方法函數(shù) 會在ajax發(fā)送請求 并成功接收到響應(yīng)數(shù)據(jù)的時候 執(zhí)行 形參會接收到響應(yīng)數(shù)據(jù)
        }，
        error(err){
            //這個方法函數(shù) 會在ajax接收響應(yīng)數(shù)據(jù)失敗的時候執(zhí)行 形參會接收到 失敗信息
        }，
        complete(){
            //這個方法函數(shù) 會在ajax交互完成的時候 執(zhí)行
        }
    })
})

//1.創(chuàng)建 ajax交互對象 通過XMLHTTPRequest來實例化出來
let ajax = new XMLHttpRequest();//同步代碼
//2.建立前端和服務(wù)器之間的連接 ajax對象有一個方法 open 調(diào)用即可建立連接
ajax.open("請求方式"，"服務(wù)器url地址");//同步代碼
//3.發(fā)送請求 ajax對象有一個方法 send 調(diào)用即可發(fā)送請求
ajax.send();//同步代碼
//4.接收服務(wù)器響應(yīng)數(shù)據(jù)  ajax中是通過ajax對象的一個事件——onreadystatechange(通信狀態(tài)碼/生命周期 改變事件)
ajax.onreadystatechange = ()=>{//ajax的異步 體現(xiàn)在事件上 事件是異步代碼
    //5.接收響應(yīng)數(shù)據(jù) 當(dāng)通信狀態(tài)碼為4的時候 就可以獲取到響應(yīng)數(shù)據(jù)了
    if(ajax.readyState==4){
        if(ajax.status==200||ajax.status==304){
            console.log(ajax.responseText)
        }
        else{
            console.log("請求失敗")
        }
    }
}