[ 造輪子 ] 手動封裝 AJAX （一） —— 基礎版

cc17 發(fā)布于2019-08-26 13:27 / 2467人閱讀

關于 AJAX 相信都用過，自己動手封裝的也肯定有不少，但應該都只是簡單的可以請求，不能設置同步異步以及返回的數(shù)據(jù)格式

兼容低版本 IE5、IE6

可以使用 get 和 post 請求數(shù)據(jù)

可以設置請求頭需要的思路以及語法都有了，需要小伙伴自己拓展哦

可以設置返回數(shù)據(jù)格式，不設置為默認

get 請求的數(shù)據(jù)拼接我沒寫，有需要的可以自己加

之后會有 ES6 語法的封裝敬請期待

注：代碼使用 ES5 語法，我寫的這個版本的傳參只能按照順序來

直接上代碼

//1.用 ES5 寫 ajax
var ajax = function (url,method,data,async,success,error,resType) {
    
    //設置變量默認值
    method = method || "GET";
    async = async || true;
    data = data || "";
    resType = resType || "";
    //數(shù)據(jù)校驗
    if(!url || url === ""){
        throw new Error("url不能為空");//throw 用來拋出異常 
    }
    if(method==="GET" && data != ""){
        throw new Error("請將get請求參數(shù)寫在url里");//由于時間不太夠不再寫參數(shù)拼接，有興趣的小伙伴可以自己加參數(shù)拼接功能
    }
    //將小寫全部轉換為大寫
    method = method.toUpperCase();
    //判斷是否是低版本 IE
    if (window.XMLHttpRequest) { //是否支持XMLHttpRequsest
        var xhr = new XMLHttpRequest();
    } else { //低版本 IE 
        var xhr = new ActiveXObject("Microsft.XMLHTTP");
    }
    //xmlhttp.open(method,url,async) 請求類型 請求地址 是否異步
    xhr.open(method, url, async);
    //設置請求頭
    //判斷是否設置
    //循環(huán) headers 設置請求頭
    // xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    //設置返回數(shù)據(jù)格式
    if(async){//如果設置了同步就不能設置返回數(shù)據(jù)格式
        xhr.responseType = resType; // 在不設置responseType的時候默認為 text
    }
    //send(data) 將請求發(fā)送到服務器。 data僅用于post
    xhr.send(data);

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {

            var res = xhr.response;
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                success && success(res);
            } else {
                error && error(res);
            }
        }
    }
}
//url,method,data,async,success,error,resType
ajax("1.json","GET","",true,function(res){console.log(res);},function(error){console.log(error);},"json");

請求的 json 文件內容

{
    "name": "yhtx1997",
    "text": "恭喜你測試成功！！！"
}

調用效果圖

云服務器 GPU云服務器造輪子一個封裝的Ajax類原生js封裝ajax js ajax 請求數(shù)據(jù)封裝

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

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

[ 造輪子 ] 手動封裝 AJAX （二） —— ES6 版

摘要：相比前一版本除了使用與法外還有以下改動現(xiàn)在不需要按順序輸入參數(shù)會針對和做不同的數(shù)據(jù)處理可以自定義設置請求頭增加了參數(shù)數(shù)據(jù)類型的判斷調用代碼示例調用效果圖核心代碼沒有多少變化，因為只有這一種使用方法不支持低版本瀏覽器錯誤判斷為必填項請求地址不相比前一版本除了使用 ES6 與法外還有以下改動現(xiàn)在不需要按順序輸入參數(shù) 會針對 GET 和 POST 做不同的數(shù)據(jù)處理可以自定義設置請求頭...

jhhfft 2019-08-23 14:20 評論0 收藏0
js速記

摘要：相關最大的特性就在于直接操縱網頁上的節(jié)點，從而實現(xiàn)網頁的局部刷新而非全局刷新。該回調函數(shù)會在送回響應的時候被調用。當然了，如果瀏覽器不支持對象，會返回，在這時需要進行額外的處理。前言馬上就要參加一個團隊項目進行React的前端開發(fā)了。最近正在著手熟練React語法，然后發(fā)現(xiàn)本質上還是建立在對javascript的深刻理解上。市面上在js基礎上封裝出了非常多優(yōu)秀的車輪，其中最被新手廣...

MageekChiu 2019-08-21 16:52 評論0 收藏0
精讀《怎么用 React Hooks 造輪子》

摘要：可以看到，這樣不僅沒有占用組件自己的，也不需要手寫回調函數(shù)進行處理，這些處理都壓縮成了一行。效果通過拿到周期才執(zhí)行的回調函數(shù)。實現(xiàn)等價于的回調僅執(zhí)行一次時，因此直接把回調函數(shù)拋出來即可。 1 引言上周的精讀《React Hooks》已經實現(xiàn)了對 React Hooks 的基本認知，也許你也看了 React Hooks 基本實現(xiàn)剖析（就是數(shù)組），但理解實現(xiàn)原理就可以用好了嗎？學的是...

Shihira 2019-08-26 13:22 評論0 收藏0
手摸手，帶你封裝一個vue component

摘要：靈活性和針對性。所以我覺得大部分組件還是自己封裝來的更為方便和靈活一些。動手開干接下來我們一起手摸手教改造包裝一個插件，只要幾分鐘就可以封裝一個專屬于你的。項目地址：vue-countTo配套完整后臺demo地址：vue-element-admin系類文章一：手摸手，帶你用vue擼后臺系列一（基礎篇）系類文章二：手摸手，帶你用vue擼后臺系列二（登錄權限篇）系類文章三：手摸手，帶...

pkhope 2019-08-20 15:48 評論0 收藏0
換個眼界看IE，它真的有那么可惡嗎？

摘要：隨之，網景公司也提出了自己的解決方式，正好與大相反有可能這哥倆誰都不服，專門對著干，它提出了事件捕獲的理論，也就是從外向內直至觸發(fā)元素，依次觸發(fā)事件。一說到IE我想很多web小伙伴都避之不及，對于IE經驗不足的同學可以說更是恨之入骨，撕心裂肺般的煩惱與氣憤?，被折磨的不要不要的。我感同身受，去年的我的生日愿望就是，我希望IE瀏覽器在這世界上沒有一個用戶。這篇文章是一個追溯歷史并收集...

Keagan 2019-08-22 15:31 評論0 收藏0