Ajax入門（二）Ajax函數(shù)封裝

haobowd 發(fā)布于2019-08-01 14:58 / 2939人閱讀

摘要：形參為獲取到的字符串形式的響應數(shù)據(jù)先判斷是否存在請求失敗函數(shù)存在時，形參為對象，便于進行錯誤進行處理發(fā)送請求的對象最終完成就是這樣了。

轉(zhuǎn)自我的個人博客原址
如果看了的我上一篇博客《Ajax入門（一）從0開始到一次成功的GET請求》的話，肯定知道我們已經(jīng)完成了一個簡單的get請求函數(shù)了。如下：

/**
 * 一個簡單的get請求
 * @param {String}   url     請求地址,文件名
 * @param {Function} fnSucc  請求成功時執(zhí)行的函數(shù)
 * @param {Function} fnFaild 請求失敗執(zhí)行的函數(shù)
 */
function AJAX(url, fnSucc, fnFaild) {
    //1.創(chuàng)建ajax對象
    var oAjax = null;
        /**
         * 此處必須需要使用window.的方式,表示為window對象的一個屬性.不存在時值為undefined.
         * 進入else若直接使用XMLHttpRequest在不支持的情況下會報錯
         **/
    if (window.XMLHttpRequest) {
        //IE6以上
        oAjax = new XMLHttpRequest();
    } else {
        oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2.連接服務器
    //open(方法,url,是否異步)
    oAjax.open("GET", url, true);

    //3.發(fā)送請求
    oAjax.send();

    //4.接收返回
    //OnRedayStateChange事件
    oAjax.onreadystatechange = function () {
        if (oAjax.readyState === 4) {
            if (oAjax.status === 200) {
                //                alert("成功" + oAjax.responseText);
                fnSucc(oAjax.responseText);
            } else {
                //                alert("服務器響應失敗!");
                if (fnFaild) {
                    fnFaild();
                }
            }
        }
    };
}

為什么要繼續(xù)進行Ajax函數(shù)封裝？
原因如下：

目前方法只能使用get請求，而不能使用post請求，而在用戶注冊時必須使用POST，因為POST，現(xiàn)在不夠完整。

目前請求參數(shù)只能直接寫在url里，不利于動態(tài)獲取數(shù)據(jù)，應該使用參數(shù)解析的方式，便于使用。

get請求方式請求緩存問題。

學習封裝方法，

改造目標

function ajax(url, options) {
    // your implement
}

options是一個對象，里面可以包括的參數(shù)為：

type: post或者get，可以有一個默認值

data: 發(fā)送的數(shù)據(jù)，為一個鍵值對象或者為一個用&連接的賦值字符串

onsuccess: 成功時的調(diào)用函數(shù)

onfail: 失敗時的調(diào)用函數(shù)

改造開始（三步） （一）原函數(shù)的改造

形參中，刪除fnSucc、fnFaild 添加options。使成功與失敗執(zhí)行的函數(shù)變成options對象的 onsuccess、onfail兩個方法對應的值。
主要是在4、接收返回部分進行更改，如下

//4.接收返回
oAjax.onreadystatechange = function () {
    if (oAjax.readyState === 4) {
        if (oAjax.status === 200) {
            //請求成功。形參為獲取到的字符串形式的響應數(shù)據(jù)
            options.onsuccess(oAjax.responseText);
        } else {
            //先判斷是否存在請求失敗函數(shù)
            //存在時，形參為XMLHttpRequest對象，便于進行錯誤進行處理
            if (options.onfail) {
                options.onfail(oAjax);
            }
        }
    }
};

（二）請求參數(shù)的處理

首先我們要知道的是在使用請求參數(shù)存在時，GET方式的請求參數(shù)特別簡單。直接在url后面添加?參數(shù)名=參數(shù)值&參數(shù)名二=參數(shù)值二

實現(xiàn)思路：

首先判斷options.data是否存在，不存在時使用"?timestamp= + new Date().getTime();鏈接在url后，以清除緩存。

這里只是我使用的方法，這里的timestamp可以隨意更改

new Date().getTime();也可以用Math.random();主要是保持每次請求的url都不一樣。

還有許多別的方法參考Ajax緩存問題怎么解決？。有興趣的自己再多google一下吧。

存在options.data時，應該限制請求data格式便于處理，設定為JSON（當然沒必要像JSON那么嚴格，但是應該保持鍵值對的格式）。

使用for in 遍歷data，使用=來連接鍵與值，使用&來連接多個請求參數(shù)

只需要對原函數(shù)中的2.連接服務器進行更改

實現(xiàn)如下：

原：

//2.連接服務器
//open(方法,url,是否異步)
oAjax.open("GET", url, true);

現(xiàn)：

//open(方法,url,是否異步)
var param = "";//請求參數(shù)。
//判斷data存在時緩存它，不存在時，設為0
var data = options.data ? options.data : 0;
if(typeof(data)==="object"){//只有data為對象使才執(zhí)行
    for (var key in data){//請求參數(shù)拼接
        if (data.hasOwnProperty(key)) {
            param += key+"="+data[key]+"&";
        }
    }
    param.replace(/&$/,"");//去除結尾的&。
}else{
    param= "timestamp=" + new Date().getTime();
}
//2.連接服務器
oAjax.open("GET", url+"?"+param, true);

（三）請求類型選擇

使用post發(fā)送數(shù)據(jù)，模擬form提交。在url看不到請求參數(shù)，更加安全。

實現(xiàn)思路：

判斷是否type是否存在，存在時轉(zhuǎn)為大寫，默認為GET請求。

判斷請求的類型，GET 或 POST 。

在使用post請求提交數(shù)據(jù)時，請求參數(shù)不跟在url后面。

使用post請求數(shù)據(jù)必須添加在open()與send()直接添加頭信息。

xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

使用post請求數(shù)據(jù)，對2.連接服務器、3.發(fā)送請求部分進行處理

實現(xiàn)如下：

原：

//2.連接服務器
oAjax.open("GET", url+"?"+param, true);

現(xiàn)：

//3.發(fā)送請求
var type = options.type ? options.type.toUpperCase() : "GET" ;
if(type ==="GET"){
    oAjax.open("GET", url+"?"+param, true);
    oAjax.send();
}else{
    oAjax.open("POST", url, true);
    oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    oAjax.send(param);
}

最終完成

結合之前寫的，集合起來。

/**
 * AJAX函數(shù)封裝
 * @param {string} url     請求地址（必須）
 * @param {object} options 發(fā)送請求的選項參數(shù)
 *   @config {string} [options.type] 請求發(fā)送的類型。默認為GET。
 *   @config {Object} [options.data] 需要發(fā)送的數(shù)據(jù)。
 *   @config {Function} [options.onsuccess] 請求成功時觸發(fā)，function(oAjax.responseText, oAjax)。（必須）
 *   @config {Function} [options.onfail] 請求失敗時觸發(fā)，function(oAjax)。(oAJax為XMLHttpRequest對象)
 *
 *@returns {XMLHttpRequest} 發(fā)送請求的XMLHttpRequest對象
 */
function AJAX(url, options) {
    //1.創(chuàng)建ajax對象
    var oAjax = null;
        /**
         * 此處必須需要使用window.的方式,表示為window對象的一個屬性.不存在時值為undefined,進入else
         * 若直接使用XMLHttpRequest,在不支持的情況下會報錯
         **/
    if (window.XMLHttpRequest) {
        //IE6以上
        oAjax = new XMLHttpRequest();
    } else {
        oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    //2.連接服務器
    //open(方法,url,是否異步)
    var param = ""; //請求參數(shù)。
    //只有data存在，且為對象使才執(zhí)行
    var data = options.data ? options.data : -1; //緩存data
    if (typeof (data) === "object") {
        for (var key in data) { //請求參數(shù)拼接
            if (data.hasOwnProperty(key)) {
                param += key + "=" + data[key] + "&";
            }
        }
        param.replace(/&$/, "");
    } else {
        param = "timestamp=" + new Date().getTime();
    }

    //3.發(fā)送請求
    var type = options.type ? options.type.toUpperCase() : "GET";
    if (type === "GET") {
        oAjax.open("GET", url + "?" + param, true);
        oAjax.send();
    } else {
        oAjax.open("POST", url, true);
        oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        oAjax.send(param);
    }

    //4.接收返回
    //OnRedayStateChange事件
    oAjax.onreadystatechange = function () {
        if (oAjax.readyState === 4) {
            if (oAjax.status === 200) {
                //請求成功。形參為獲取到的字符串形式的響應數(shù)據(jù)
                options.onsuccess(oAjax.responseText, oAjax);
            } else {
                //先判斷是否存在請求失敗函數(shù)
                //存在時，形參為XMLHttpRequest對象，便于進行錯誤進行處理
                if (options.onfail) {
                    options.onfail(oAjax);
                }
            }
        }
    };
    return oAjax;//發(fā)送請求的XMLHttpRequest對象
}

最終完成就是這樣了。當然還遠遠算不上完美，比如try catch的使用，但是通過這樣的封裝，還是學到很多知識。

云服務器 GPU云服務器一個封裝的Ajax類原生js封裝ajax js ajax 請求數(shù)據(jù)封裝 ajax回調(diào)函數(shù)

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

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

Ajax入門（二）Ajax函數(shù)封裝

摘要：形參為獲取到的字符串形式的響應數(shù)據(jù)先判斷是否存在請求失敗函數(shù)存在時，形參為對象，便于進行錯誤進行處理發(fā)送請求的對象最終完成就是這樣了。轉(zhuǎn)自我的個人博客原址如果看了的我上一篇博客《Ajax入門（一）從0開始到一次成功的GET請求》的話，肯定知道我們已經(jīng)完成了一個簡單的get請求函數(shù)了。如下： /** * 一個簡單的get請求 * @param {String} url ...

starsfun 2019-08-19 17:14 評論0 收藏0
【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0
回調(diào)、使用Promise封裝ajax()、Promise入門

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

godlong_X 2019-08-23 10:50 評論0 收藏0
前端相關大雜燴

摘要：希望幫助更多的前端愛好者學習。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發(fā)工程師當你問起有關與時，老司機們首先就會告訴你其實是個沒有網(wǎng)絡請求功能的庫。前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評論0 收藏0