ajax封裝

scwang90 發布于2019-08-26 13:45 / 639人閱讀

摘要：是什么是在不用刷新頁面的情況下，通過中的對象，從服務器獲取數據，對網頁內容進行更新的技術。

ajax是什么

ajax是在不用刷新頁面的情況下，通過js中的XMLHttpRequest對象，從服務器獲取數據，對網頁內容進行更新的技術。

封裝方法

function ajax(params){

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

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

過程

創建異步請求對象

   const xhr =  new XMLHttpRequest()

注冊xhr發送接收請求時的回調，并且在服務器返回結果后，調用success或者error函數

    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(對象)，得到一個由對象里的屬性名組成的數組  
    sendParams += `${key}=${data[key]}&`
});

判斷type

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

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

  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);
    }
}

調用實例

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

云服務器 GPU云服務器一個封裝的Ajax類原生js封裝ajax js ajax 請求數據封裝封裝成

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109453.html

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

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

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

摘要：本次二次封裝，參考可以添加中間件處理數據，返回對象，減少回調，寫更加簡潔優雅。痛點但是在項目中使用它還是有一些痛點的就是現在基本所有項目的返回的數據也是進行了二次封裝，加入了后臺在處理業務邏輯時的信息。前言在我們前端處理數據的時候免不了要 ajax 與后臺通信， ajax 是通過 XMLHttpRequest 對象與服務器進行通信的， jquery 在 XMLHttpReaque...

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

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

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

摘要：簡要說明前面我寫了一篇方法封裝及文件設計文檔，主要用來說明我們在項目中通常會對的方法進行進一步的封裝處理，便于我們在業務代碼中使用。這篇文檔我們主要對封裝的方法進行一個簡要說明。簡要說明前面我寫了一篇《jquery ajax 方法封裝及 api 文件設計》文檔，主要用來說明我們在項目中通常會對 jquery 的 ajax 方法進行進一步的封裝處理，便于我們在業務代碼中使用。從那篇文...

z2xy 2019-08-23 16:26 評論0 收藏0
jquery ajax 方法封裝及 api 文件設計

摘要：封裝文件封裝例如命令數據用來記錄每次請求的唯一標識唯一標識生成方法模塊主體獲取失敗比對請求保證返回結果的正確性重復請求有可能會帶來返回結果不可靠的問題的默認設置服務器已經錯誤將大于的數字位以上包裹雙引號避免溢出這里是根據后臺封裝 jquery ajax 文件 /** * 封裝 jquery ajax * 例如: * ajaxRequest.ajax.triggerServic...

leone 2019-08-23 16:26 評論0 收藏0
ajax封裝和跨域知識

摘要：封裝和跨域知識使用還是是通過參數傳遞到當前腳本的變量數組。對所發送信息的數量也有限制。請求成功時觸發，。允許一個域上的網絡應用向另一個域提交跨域請求。 ajax封裝和跨域知識 ajax 使用get還是post $_GET 是通過 URL 參數傳遞到當前腳本的變量數組。 $_POST 是通過 HTTP POST 傳遞到當前腳本的變量數組。何時使用 GET？通過 GET 方法從表單...

Shihira 2019-08-19 18:14 評論0 收藏0