ajax簡單封裝

caoym 發布于2019-08-26 11:31 / 2026人閱讀

摘要：工作之余簡單封裝了的請求，但是工作中還是用，，內部封裝好了模塊笑。代碼解析參數創建高級瀏覽器和以上連接發送請求頭發送接收完成清除定時器成功超時超時了終止轉

工作之余簡單封裝了ajax的請求，但是工作中還是用jquery，axios，angular內部封裝好了http模塊（笑）。

ajax一般分為簡單的四部：

創建ajax對象（這里兼容ie的話要做一下處理）

連接，即請求對象的open方法（get和post還有點不同，get參數要放在url后面，post要設置請求頭）

發送，即請求對象的send函數（post參數則放在send里面）

接收，在onreadystatechange（存儲函數或函數名，每當readyState屬性改變時，就會調用該函數。）函數里面處理。

還可以加上超時這些

onreadystatechange分析

要先判斷readyState的狀態（有四個狀態）

①： 0，請求未初始化；

②： 1，服務器連接已建立；

③： 2，請求已接收；

④： 3，請求處理中；

⑤： 4，請求已完成，且響應已就緒

當readyState等于4時，你又要判斷status的狀態

請求成功時status狀態 200-300（不包括300），還有304（是緩存）（具體狀態可以去參考文檔）

在成功（失?。┑幕氐艉瘮道锩鎸hr.responseText的值返回出去。

代碼

"use strict";

var $ = {};
$.ajax = ajax;

function ajax(options) {

  // 解析參數
  options = options || {};
  if (!options.url) return;
  options.type = options.type || "get";
  options.timeout = options.timeout || 0;

  // 1 創建ajax
  if (window.XMLHttpRequest) {

    // 高級瀏覽器和ie7以上
    var xhr = new XMLHttpRequest();
  } else {

    //ie6,7,8
    var xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
  }

  // 2 連接
  var str = jsonToUrl(options.data);
  if (options.type === "get") {
    xhr.open("get", `${options.url}?${str}`, true);

    // 3 發送
    xhr.send();
  } else {
    xhr.open("post", options.url, true);

    // 請求頭
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    // 3 發送
    xhr.send();
  }

  // 接收
  xhr.onreadystatechange = function() {

    // 完成
    if (xhr.readyState === 4) {

      // 清除定時器
      clearTimeout(timer);

      if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {

        // 成功
        options.success && options.success(xhr.responseText);
      } else {
        options.error && options.error( xhr.status );
      }
    }
  };

  
  // 超時
  if (options.timeout) {
    var timer = setTimeout(function(){ 
            alert("超時了");
            xhr.abort(); // 終止
        },options.timeout);
  }
}


// json轉url
function jsonToUrl(json) {
  var arr = [];
  json.t = Math.random();
  for(var name in json) {
    arr.push(name + "=" + encodeURIComponent(json[name]));
  }
  return arr.join("&");
}

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107044.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
ajax封裝和跨域知識

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

Shihira 2019-08-19 18:14 評論0 收藏0
二次封裝 query ajax 辦法

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

zr_hebo 2019-08-20 17:44 評論0 收藏0
Ajax在vue中的封裝及使用

摘要：今天給大家寫一篇關于在中的應用及封裝，有些同學可能會有疑問，因為熟悉的都知道，中有和是專門用于交互的，那么豈不是多此一舉嗎其實不然，有的優勢，并且小編本身對有著特殊的感情，今天就給大家詳細詳解在中的應用。今天給大家寫一篇關于ajax在vue中的應用及封裝，有些同學可能會有疑問，因為熟悉vue的都知道，vue中有vue-resource和axios是專門用于http交互的，那么ajax...

godruoyi 2019-08-23 15:33 評論0 收藏0
Ajax在vue中的封裝及使用

摘要：今天給大家寫一篇關于在中的應用及封裝，有些同學可能會有疑問，因為熟悉的都知道，中有和是專門用于交互的，那么豈不是多此一舉嗎其實不然，有的優勢，并且小編本身對有著特殊的感情，今天就給大家詳細詳解在中的應用。今天給大家寫一篇關于ajax在vue中的應用及封裝，有些同學可能會有疑問，因為熟悉vue的都知道，vue中有vue-resource和axios是專門用于http交互的，那么ajax...

pingink 2019-08-02 14:22 評論0 收藏0