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

starsfun 發(fā)布于2019-08-19 17:14 / 2562人閱讀

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

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

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

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

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

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

目前方法只能使用get請(qǐng)求，而不能使用post請(qǐng)求，而在用戶注冊(cè)時(shí)必須使用POST，因?yàn)镻OST，現(xiàn)在不夠完整。

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

get請(qǐng)求方式請(qǐng)求緩存問題。

學(xué)習(xí)封裝方法，

改造目標(biāo)

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

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

type: post或者get，可以有一個(gè)默認(rèn)值

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

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

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

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

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

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

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

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

實(shí)現(xiàn)思路：

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

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

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

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

存在options.data時(shí)，應(yīng)該限制請(qǐng)求data格式便于處理，設(shè)定為JSON（當(dāng)然沒必要像JSON那么嚴(yán)格，但是應(yīng)該保持鍵值對(duì)的格式）。

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

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

實(shí)現(xiàn)如下：

原：

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

現(xiàn)：

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

（三）請(qǐng)求類型選擇

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

實(shí)現(xiàn)思路：

判斷是否type是否存在，存在時(shí)轉(zhuǎn)為大寫，默認(rèn)為GET請(qǐng)求。

判斷請(qǐng)求的類型，GET 或 POST 。

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

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

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

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

實(shí)現(xiàn)如下：

原：

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

現(xiàn)：

//3.發(fā)送請(qǐng)求
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);
}

最終完成

結(jié)合之前寫的，集合起來。

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

    //3.發(fā)送請(qǐng)求
    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) {
                //請(qǐng)求成功。形參為獲取到的字符串形式的響應(yīng)數(shù)據(jù)
                options.onsuccess(oAjax.responseText, oAjax);
            } else {
                //先判斷是否存在請(qǐng)求失敗函數(shù)
                //存在時(shí)，形參為XMLHttpRequest對(duì)象，便于進(jìn)行錯(cuò)誤進(jìn)行處理
                if (options.onfail) {
                    options.onfail(oAjax);
                }
            }
        }
    };
    return oAjax;//發(fā)送請(qǐng)求的XMLHttpRequest對(duì)象
}

最終完成就是這樣了。當(dāng)然還遠(yuǎn)遠(yuǎn)算不上完美，比如try catch的使用 ，但是通過這樣的封裝，還是學(xué)到很多知識(shí)。

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

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

starsfun

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

基于主機(jī)名的虛擬主機(jī)服務(wù)怎么實(shí)現(xiàn)-虛擬主機(jī)怎么登陸圖解？

閱讀 1531·2021-09-22 15:35
LAMP Web一鍵安裝腳本 – Linux服務(wù)器安裝Apache/MySQL/PHP網(wǎng)站環(huán)境

閱讀 2011·2021-09-14 18:04
字蛛font-spider報(bào)錯(cuò),<web font not found>,碰到的最新問題

閱讀 883·2019-08-30 15:55
布局總結(jié)-水平居中布局的實(shí)現(xiàn)

閱讀 2454·2019-08-30 15:53
兩列自適應(yīng)布局方案整理

閱讀 2684·2019-08-30 12:45
JavaScript的數(shù)據(jù)類型及其檢測(cè)

閱讀 1205·2019-08-29 17:01
前端面試題1（HTML篇）

閱讀 2583·2019-08-29 15:30
偽類和偽元素的區(qū)別

閱讀 3520·2019-08-29 15:09

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

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

相關(guān)文章