Ajax設(shè)置請求和接收響應(yīng)、自己封裝簡易jQuery.Ajax、回調(diào)函數(shù)

Harpsichord1207 發(fā)布于2019-08-23 10:42 / 1350人閱讀

摘要：設(shè)置請求和接收響應(yīng)自己封裝簡易這篇文章是承接前幾篇博客的是前幾篇繼續(xù)學(xué)習(xí)包括學(xué)習(xí)與理解和簡化版自己實(shí)現(xiàn)等這篇文章只算是我的個人學(xué)習(xí)筆記內(nèi)容沒有精心排版一些錯誤請見諒所有代碼都在這里從歷史可以看到所有代碼擺闊一個簡易的服務(wù)器所有代碼在歷史里

Ajax設(shè)置請求和接收響應(yīng)、自己封裝簡易jQuery.Ajax

這篇文章是承接前幾篇博客的,是前幾篇繼續(xù)學(xué)習(xí)
包括Ajax學(xué)習(xí)與理解和簡化版自己實(shí)現(xiàn)jQuery等
這篇文章只算是我的個人學(xué)習(xí)筆記,內(nèi)容沒有精心排版,一些錯誤請見諒.

所有代碼都在這里,從歷史commit可以看到所有代碼,擺闊一個簡易的node.js服務(wù)器
所有代碼在歷史commit里(AjaxStudy---github)

1JS設(shè)置任意請求

一個http請求分為四個部分
請求行,請求頭,回車,請求體

設(shè)置請求的四個部分(第三部分為回車):

第一部分 request.open("get", "/xxx")

第二部分 request.setRequestHeader("content-type","x-www-form-urlencoded")

第四部分 request.send("a=1&b=2")

request.setRequestHeader()方法需要注意的是此方法必須在 open() 方法和 send() 之間調(diào)用。
XMLHttpRequest.setRequestHeader()

另外需要注意的是,如果設(shè)置西請求方法為get 并且設(shè)置了請求體(第四部分),在谷歌瀏覽器中看不到請求體,不報錯但是不顯示
示例代碼:

myButton.addEventListener("click",(e)=>{
    let request = new XMLHttpRequest();
    request.open("POST","/xxx")//配置request
    //設(shè)置第二部分
    request.setRequestHeader("mataotao","123123xxx")
    request.setRequestHeader("content-type","x-www-form-urlencoded")
    request.send("a=1&b=2");//發(fā)送請求

    request.onreadystatechange = ()=>{
        if(request.readyState ===4){
            console.log("請求和響應(yīng)都完畢了");
            if ( request.status>=200&&request.status<=400){
                console.log("說明請求成功");
                let string = request.responseText;
                //把符合json語法的字符串轉(zhuǎn)化為js對應(yīng)的值
                let object2 = window.JSON.parse(string);
                console.log(object2)
            }else if(request.status>=400){
                console.log("響應(yīng)失敗");
            }
        } 
    }
})

查看請求

2JS獲取任意響應(yīng)

響應(yīng)的四個部分

獲取四個部分的響應(yīng)

第一部分 request.status / request.statusText

第二部分 request.getResponseHeader() / request.getAllResponseHeaders()

第四部分 request.responseText

myButton.addEventListener("click",(e)=>{
    let request = new XMLHttpRequest();
    request.open("POST","/xxx")//配置request
    //設(shè)置第二部分
    request.setRequestHeader("mataotao","123123xxx")
    request.setRequestHeader("content-type","x-www-form-urlencoded")
    request.send("a=1&b=2");//發(fā)送請求

    request.onreadystatechange = ()=>{
        if(request.readyState ===4){
            console.log("請求和響應(yīng)都完畢了");
            if ( request.status>=200&&request.status<=400){
                console.log("說明請求成功");

                //*核心代碼 */
                //第一部分:
                console.log("獲取響應(yīng)第一部分:")
                console.log(request.status)//200
                console.log(request.statusText)//ok

                //第二部分:
                console.log("獲取響應(yīng)第二部分:")
                console.log(request.getResponseHeader("Content-Type"))
                console.log(request.getAllResponseHeaders())

                //第四部分:
                console.log("獲取響應(yīng)第四部分:")
                console.log(request.responseText)
                 //*核心代碼 */


                let string = request.responseText;
                //把符合json語法的字符串轉(zhuǎn)化為js對應(yīng)的值
                let object2 = window.JSON.parse(string);
                // console.log(object2)

            }else if(request.status>=400){
                console.log("響應(yīng)失敗");
            }
        } 
    }
})

3 客戶端/服務(wù)器模型

客戶端使用js設(shè)置請求的四個部分,
服務(wù)器用nodejs也可以設(shè)置響應(yīng)的四個部分

為什么要三次握手?

三次握手:
A:我能連你了嗎?
B: 可以連我,你連吧
A:那我連你了
開始發(fā)送數(shù)據(jù)

原因:因?yàn)橐ＷCA/B 都可以收發(fā)信息 ,數(shù)據(jù)才能在AB之間傳輸

1.
A:我能連你了嗎?
B: 可以
說明A可以發(fā)信息,B可以接受信息

2.
B: 可以連我,你連吧
A:那我連你了
說明B可以發(fā)送信息,A可以接受信息

3 自己封裝jQuery.Ajax(簡單原理)

所有代碼在歷史commit里(AjaxStudy---github)

3.1 方法一

window.jQuery = ()=>{//假裝有一個簡易的jQuery,具體封裝
    let object1 = {};
    boject1.addClass = function(){};
    boject1.show = function(){};
    return object1;
}

window.jQuery.ajax = (method,path,body,successFn,failFn)=>{
    let request = new XMLHttpRequest();
    request.open(method,path)
    request.send(body);
    request.onreadystatechange = ()=>{
        if(request.readyState ===4){
            if ( request.status>=200&&request.status<=400){
                successFn.call(undefined,request.responseText)//執(zhí)行成功函數(shù)
            }else if(request.status>=400){
                failFn.call(undefined,request)//執(zhí)行失敗函數(shù)
            }
        }
    }
}

window.$ = window.jQuery;
myButton.addEventListener("click",(e)=>{
    //使用ajax
    $.ajax("post",
           "/xxx",
           "username=mtt&password=1",
           function(result){
                console.log("成功了,返回的響應(yīng)體為:")
                console.log(result);//打印request.responseText
           },
           function(result){
                console.log(result);
                console.log(result.status);//打印失敗的狀態(tài)碼
                console.log(result.responseText);//打印失敗時返回的響應(yīng)體
                
           }
)
})

結(jié)果:
成功時:

失敗時:(假如請求一個不存在的路徑,響應(yīng)狀態(tài)碼是404,但是也有響應(yīng)體responseText)

例如,訪問一個不存在的路徑/frank:

myButton.addEventListener("click",(e)=>{
    //使用ajax
    $.ajax("post",
           "/frank",
           "username=mtt&password=1",
           function(result){
                console.log("成功了,返回的響應(yīng)體為:")
                console.log(result);//打印request.responseText
           },
           function(result){
                console.log(result);
                console.log(result.status);//打印失敗的狀態(tài)碼
                console.log(result.responseText);//打印失敗時返回的響應(yīng)體
                
           }
)
})

返回狀態(tài)碼404,而且有設(shè)置的返回體

因?yàn)槲业姆?wù)器端的代碼為:

else {
    response.statusCode = 404
    response.setHeader("Content-Type", "text/html;charset=utf-8")
    response.write(`{
      "error":"404error"
    }`)
    response.end()
  }

這種方法的缺點(diǎn):這個函數(shù)必須按照規(guī)定的順序傳參,第二,如果沒有參數(shù)就會出現(xiàn)類似于$.ajax("post",null,successFn,null)的情況,必須傳有結(jié)構(gòu)的參數(shù)(對象)

3.2什么是回調(diào)

在上面的代碼中,在ajax函數(shù)中傳了一個successFN,failFn函數(shù)作為參數(shù),但是執(zhí)行的時候是在別的地方執(zhí)行的(在request.onreadystatechange里)

 if(request.readyState ===4){
            if ( request.status>=200&&request.status<=400){
                successFn.call(undefined,request.responseText)//執(zhí)行成功函數(shù)
            }else if(request.status>=400){
                failFn.call(undefined,request)//執(zhí)行失敗函數(shù)

這兩個函數(shù)就是回調(diào)函數(shù)

回調(diào)(callback):
回來執(zhí)行的意思,自己不call.
把這個函數(shù)給別人,自己不執(zhí)行,讓別人執(zhí)行,就是callback

回調(diào):使用方代碼不執(zhí)行,只傳一個函數(shù),回來再執(zhí)行

回調(diào)就是傳一個函數(shù),自己不執(zhí)行,傳到別的地方讓他在那里執(zhí)行的函數(shù)!只要滿足這個條件就叫回調(diào)而已.他是一個函數(shù),只不過在別的地方執(zhí)行了

所以看上去沒有執(zhí)行,實(shí)際上success了就執(zhí)行傳進(jìn)去的這個函數(shù)

3.3封裝方法二:傳有結(jié)構(gòu)的參數(shù)(對象)

let myButton = document.getElementById("myButton");

window.jQuery = ()=>{//假裝有一個簡易的jQuery
    let object1 = {};
    boject1.addClass = function(){};
    boject1.show = function(){};
    return object1;
}

window.jQuery.ajax = (options)=>{
    //獲取傳進(jìn)來的對象的value
    let method = options.method;
    let path = options.path;
    let body = options.body;
    let successFn = options.successFn;
    let failFn = options.failFn;
    let headers = options.headers;

    let request = new XMLHttpRequest();
    request.open(method,path);//配置

    for (const key in headers) {//遍歷header,設(shè)置響應(yīng)頭
        let value = headers[key];
        request.setRequestHeader(key,value);
    }
    request.send(body);//發(fā)送,并配置響應(yīng)體

    request.onreadystatechange = ()=>{
        if(request.readyState ===4){
            if ( request.status>=200&&request.status<=400){
                successFn.call(undefined,request.responseText);//執(zhí)行成功函數(shù)
            }else if(request.status>=400){
                failFn.call(undefined,request);//執(zhí)行失敗函數(shù)
            }
        }
    }
}

window.$ = window.jQuery;
myButton.addEventListener("click",(e)=>{
    //使用ajax
    $.ajax({
        method:"post",
        path:"/xxx",
        body:"username=mtt&password=1",
        headers:{
            "content-type":"application/x-www-form-urlencoded",
            "mataotao":18
        },
        successFn:function(result){//成功函數(shù)的回調(diào)
            console.log("成功了,返回的響應(yīng)體為:");
            console.log(result);//打印request.responseTex
        },
        failFn:function(){
            console.log(result);
            console.log(result.status);//打印失敗的狀態(tài)碼
            console.log(result.responseText);//打印失敗時返回的響應(yīng)體
        }
    }
)
})

結(jié)果:

4真正的jQuery.ajax()API如何使用

jQuery.ajax()API
例子

$.ajax({
  type: "GET",
  url: "/test",
  dataType: "script",
  data:{}
  success:function(){},
});

dataType就是setRequestHeader("content-type","application/javascript")

data就是請求的第四部分

5函數(shù)傳不同的參數(shù)

例如文檔里的
jQuery.ajax( url [, settings ] )

jQuery.ajax( [settings ] )
jQuery.ajax第一個參數(shù)既可以是url字符串你也可以是對象
如何實(shí)現(xiàn)這種封裝?
只要在最開始判斷參數(shù)長度即可

let url;
    if(arguments.length===1){//參數(shù)長度為1
        url = options.url;
    }else if(arguments.length===2){//參數(shù)長度為2
        url = arguments[0];
        options = arguments[1];
    }

其余代碼不變

6 一點(diǎn)點(diǎn)ES6語法:解構(gòu)賦值

解構(gòu)賦值MDN

或者直接

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96605.html

發(fā)表評論

登陸后可評論

0條評論

Harpsichord1207

男|高級講師

我要關(guān)注我要私信

TA的文章

ArdHosting：印度尼西亞VPS，限時免安裝費(fèi)，12.6美元/月起，無限流量

閱讀 3496·2021-10-18 13:30
學(xué)習(xí)python就用python技能樹｜Python技能樹測評

閱讀 2951·2021-10-09 09:44
CSS資源相關(guān)整理

閱讀 1969·2019-08-30 11:26
PostCSS自學(xué)筆記（二）【番外篇一】

閱讀 2299·2019-08-29 13:17
js 獲取和設(shè)置css3 屬性值的實(shí)現(xiàn)方法

閱讀 765·2019-08-29 12:17
Ajax的原理和實(shí)現(xiàn)步驟

閱讀 2253·2019-08-26 18:42
filter 和 map 的異同

閱讀 478·2019-08-26 13:24
通過寫一個簡單的東方系彈幕入門微信小游戲

閱讀 2960·2019-08-26 11:39

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Ajax設(shè)置請求和接收響應(yīng)、自己封裝簡易jQuery.Ajax、回調(diào)函數(shù)

相關(guān)文章

回調(diào)、使用Promise封裝ajax()、Promise入門

AJAX 之 Promise

Ajax詳解

JQuery DOM 常用操作匯總

如何構(gòu)建通用 api 中間層

發(fā)表評論

0條評論

Harpsichord1207

男|高級講師

TA的文章

ArdHosting：印度尼西亞VPS，限時免安裝費(fèi)，12.6美元/月起，無限流量

學(xué)習(xí)python就用python技能樹｜Python技能樹測評

CSS資源相關(guān)整理

PostCSS自學(xué)筆記（二）【番外篇一】

js 獲取和設(shè)置css3 屬性值的實(shí)現(xiàn)方法

Ajax的原理和實(shí)現(xiàn)步驟

filter 和 map 的異同

通過寫一個簡單的東方系彈幕入門微信小游戲

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Ajax設(shè)置請求和接收響應(yīng)、自己封裝簡易jQuery.Ajax、回調(diào)函數(shù)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Ajax設(shè)置請求和接收響應(yīng)、自己封裝簡易jQuery.Ajax、回調(diào)函數(shù)