ajax封裝

scwang90 發(fā)布于2019-08-26 13:45 / 662人閱讀

摘要：是什么是在不用刷新頁(yè)面的情況下，通過中的對(duì)象，從服務(wù)器獲取數(shù)據(jù)，對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行更新的技術(shù)。

ajax是什么

ajax是在不用刷新頁(yè)面的情況下，通過js中的XMLHttpRequest對(duì)象，從服務(wù)器獲取數(shù)據(jù)，對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行更新的技術(shù)。

封裝方法

function ajax(params){

申明一些必要的參數(shù)，比如成功后的回調(diào)函數(shù)、錯(cuò)誤處理、url、data、type(http method)，并且作兜底處理

 const{
   success = () => {},
   error = () => {},
   type = "get",
   data = {},
   url = "/"
} = params;

過程

創(chuàng)建異步請(qǐng)求對(duì)象

   const xhr =  new XMLHttpRequest()

注冊(cè)xhr發(fā)送接收請(qǐng)求時(shí)的回調(diào)，并且在服務(wù)器返回結(jié)果后，調(diào)用success或者error函數(shù)

    xhr.onreadystatechange=function(){
      if(xhr.readyState===4){
        if(xhr.state===200){
          success(JSON.parse(xhr.responseText))
        }else{
          error(xhr.state,xhr.responseText)
        }
      }
    }

let sendParams = "";
Object.keys(data).map((key) => {//Object.keys(對(duì)象)，得到一個(gè)由對(duì)象里的屬性名組成的數(shù)組  
    sendParams += `${key}=${data[key]}&`
});

判斷type

如果是get，參數(shù)就掛在url上，(url?sendParams),send空

如果是其他type，參數(shù)就放在send中傳遞，send(sendParams)，但需要在open和send之間先設(shè)置請(qǐng)求頭信息

  if(type==="get"){
    xhr.open(type,`${url}?${sendParams}`,true)
    xhr.send()
  }else{
    xhr.open(type,url,true)
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(sendParams);
    }
}

調(diào)用實(shí)例

    ajax({
        url: "/code/1",
        type: "POST",
        data: {
            id: "id",
            name: "name"
        },
        success(result) {
            // do something
        },
        error(error1, error2) {
            // do something
        }
    })

GPU云服務(wù)器云服務(wù)器一個(gè)封裝的Ajax類原生js封裝ajax js ajax 請(qǐng)求數(shù)據(jù)封裝封裝成

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109453.html

相關(guān)文章

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

摘要：回調(diào)使用封裝入門回調(diào)是啥看這里回調(diào)是什么方應(yīng)杭知乎是一種特殊的函數(shù)，這個(gè)函數(shù)被作為參數(shù)傳給另一個(gè)函數(shù)去調(diào)用。回調(diào)、使用Promise封裝ajax()、Promise入門 1 回調(diào)是啥 call a functioncall a function back callback 看這里:Callback（回調(diào)）是什么？---方應(yīng)杭知乎 callback 是一種特殊的函數(shù)，這個(gè)函數(shù)被作為參數(shù)...

godlong_X 2019-08-23 10:50 評(píng)論0 收藏0
二次封裝 query ajax 辦法

摘要：本次二次封裝，參考可以添加中間件處理數(shù)據(jù)，返回對(duì)象，減少回調(diào)，寫更加簡(jiǎn)潔優(yōu)雅。痛點(diǎn)但是在項(xiàng)目中使用它還是有一些痛點(diǎn)的就是現(xiàn)在基本所有項(xiàng)目的返回的數(shù)據(jù)也是進(jìn)行了二次封裝，加入了后臺(tái)在處理業(yè)務(wù)邏輯時(shí)的信息。前言在我們前端處理數(shù)據(jù)的時(shí)候免不了要 ajax 與后臺(tái)通信， ajax 是通過 XMLHttpRequest 對(duì)象與服務(wù)器進(jìn)行通信的， jquery 在 XMLHttpReaque...

zr_hebo 2019-08-20 17:44 評(píng)論0 收藏0
原生JS封裝ajax以及request

摘要：一封裝原生的為類以及用法見之前的文章根據(jù)確定請(qǐng)求的頭部以及別的信息。二封裝實(shí)用性的類在項(xiàng)目中經(jīng)常需要將進(jìn)行封裝，使用類發(fā)起請(qǐng)求。請(qǐng)求不帶請(qǐng)求帶請(qǐng)求不帶請(qǐng)求帶請(qǐng)求不帶請(qǐng)求帶這個(gè)方法感覺可以再次進(jìn)行封裝。完整代碼點(diǎn)擊查看以上。一、封裝原生的xhr為ajax類 xhr以及用法見之前的文章 1、根據(jù)url確定請(qǐng)求的頭部以及別的信息。 var _headerConfig = {}; ...

james 2019-08-23 13:10 評(píng)論0 收藏0
jquery ajax 方法封裝說明

摘要：簡(jiǎn)要說明前面我寫了一篇方法封裝及文件設(shè)計(jì)文檔，主要用來說明我們?cè)陧?xiàng)目中通常會(huì)對(duì)的方法進(jìn)行進(jìn)一步的封裝處理，便于我們?cè)跇I(yè)務(wù)代碼中使用。這篇文檔我們主要對(duì)封裝的方法進(jìn)行一個(gè)簡(jiǎn)要說明。簡(jiǎn)要說明前面我寫了一篇《jquery ajax 方法封裝及 api 文件設(shè)計(jì)》文檔，主要用來說明我們?cè)陧?xiàng)目中通常會(huì)對(duì) jquery 的 ajax 方法進(jìn)行進(jìn)一步的封裝處理，便于我們?cè)跇I(yè)務(wù)代碼中使用。從那篇文...

z2xy 2019-08-23 16:26 評(píng)論0 收藏0
jquery ajax 方法封裝及 api 文件設(shè)計(jì)

摘要：封裝文件封裝例如命令數(shù)據(jù)用來記錄每次請(qǐng)求的唯一標(biāo)識(shí)唯一標(biāo)識(shí)生成方法模塊主體獲取失敗比對(duì)請(qǐng)求保證返回結(jié)果的正確性重復(fù)請(qǐng)求有可能會(huì)帶來返回結(jié)果不可靠的問題的默認(rèn)設(shè)置服務(wù)器已經(jīng)錯(cuò)誤將大于的數(shù)字位以上包裹雙引號(hào)避免溢出這里是根據(jù)后臺(tái) 封裝 jquery ajax 文件 /** * 封裝 jquery ajax * 例如: * ajaxRequest.ajax.triggerServic...

leone 2019-08-23 16:26 評(píng)論0 收藏0
ajax封裝和跨域知識(shí)

摘要：封裝和跨域知識(shí)使用還是是通過參數(shù)傳遞到當(dāng)前腳本的變量數(shù)組。對(duì)所發(fā)送信息的數(shù)量也有限制。請(qǐng)求成功時(shí)觸發(fā)，。允許一個(gè)域上的網(wǎng)絡(luò)應(yīng)用向另一個(gè)域提交跨域請(qǐng)求。 ajax封裝和跨域知識(shí) ajax 使用get還是post $_GET 是通過 URL 參數(shù)傳遞到當(dāng)前腳本的變量數(shù)組。 $_POST 是通過 HTTP POST 傳遞到當(dāng)前腳本的變量數(shù)組。何時(shí)使用 GET？通過 GET 方法從表單...

Shihira 2019-08-19 18:14 評(píng)論0 收藏0