原生js實現(xiàn)ajax及get post方法

pkhope 發(fā)布于2019-08-26 13:54 / 452人閱讀

摘要：使用過的同學，應該對事件綁定方法有一定的了解。實現(xiàn)方式以下為個人類庫中實現(xiàn)方式。代碼中使用到一個基礎方法對象，該對象為的基礎類。如果想了解更多，可以通過點擊進入查看原碼。

使用過jQuery的同學，應該對事件綁定方法ajax有一定的了解。 在個人類庫jTool 中實現(xiàn)了這個方法，這里就來細說下原生實現(xiàn)方式。

實現(xiàn)方式

以下為個人類庫jTool 中 Ajax 實現(xiàn)方式。
代碼中使用到一個基礎方法對象utilities ，該對象為jTool 的基礎類。 如果想了解更多，可以通過點擊進入查看原碼。

/*
 * ajax
 * type === GET: data格式 name=baukh&age=29
 * type === POST: data格式 { name: "baukh", age:29 }
 * 與 jquery 不同的是,[success, error, complete]返回的第二個參數(shù), 并不是返回錯誤信息, 而是錯誤碼
 * */
var extend = require("./extend");
var utilities = require("./utilities");
function ajax(options) {
    var defaults = {
        url: null,// 請求地址
        type: "GET",// 請求類型
        data: null,// 傳遞數(shù)據(jù)
        headers: {},// 請求頭信息
        async: true,// 是否異步執(zhí)行
        beforeSend: utilities.noop,// 請求發(fā)送前執(zhí)行事件
        complete: utilities.noop,// 請求發(fā)送后執(zhí)行事件
        success: utilities.noop,// 請求成功后執(zhí)行事件
        error: utilities.noop// 請求失敗后執(zhí)行事件
    };
    options = extend(defaults, options);
    if (!options.url) {
        utilities.error("jTool ajax: url不能為空");
        return;
    }
    var xhr = new XMLHttpRequest();
    var formData = "";
    if (utilities.type(options.data) === "object") {
        utilities.each(options.data, function (key, value) {
        if(formData !== "") {
            formData += "&";
        }
        formData += key + "=" + value;
        });
    }else {
        formData = options.data;
    }
    if(options.type === "GET" && formData) {
        options.url = options.url + (options.url.indexOf("?") === -1 ?  "?" : "&") + formData;
        formData = null;
    }
    xhr.open(options.type, options.url, options.async);
    for (var key in options.headers) {
        xhr.setRequestHeader(key, options.headers[key]);
    }
    // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    // 執(zhí)行發(fā)送前事件
    options.beforeSend(xhr);
    // 監(jiān)聽onload并執(zhí)行完成事件
    xhr.onload = function() {
        // jquery complete(XHR, TS)
        options.complete(xhr, xhr.status);
    };
    // 監(jiān)聽onreadystatechange并執(zhí)行成功失敗事件
    xhr.onreadystatechange = function() {
        if (xhr.readyState !== 4) {
            return;
        }
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            // jquery success(XHR, TS)
            options.success(xhr.response, xhr.status);
        } else {
        // jquery error(XHR, TS, statusText)
            options.error(xhr, xhr.status, xhr.statusText);
        }
    };
    xhr.send(formData);
}
function post(url, data, callback) {
    ajax({ url: url, type: "POST", data: data, success: callback });
}
function get(url, data, callback) {
    ajax({ url: url, type: "GET", data: data, success: callback });
}
module.exports = {
    ajax: ajax,
    post: post,
    get: get
};

隨筆一行
這是前端最好的時代，這也是前端最壞的時代。眾多前端框架滿天飛，隨著 jQuery 在前端行業(yè)的慢慢弱化，總是會有一種斯人遠去，何者慰籍的感覺?；ッ惆?，各位。

另推薦個表格組件gridManager

GPU云服務器云服務器 ajax原生js實現(xiàn) 原生js實現(xiàn)ajax get實現(xiàn)ajax 原生js封裝ajax

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

轉載請注明本文地址：http://systransis.cn/yun/109789.html

原生JS與jQuery對AJAX的實現(xiàn)

摘要：原生與對的實現(xiàn)一定義里這么解釋異步的和。二原生實現(xiàn)所有現(xiàn)代瀏覽器以及均內(nèi)建對象。一般是正常未找到頁面，一般是錯誤，或者后臺沒有創(chuàng)建相應的內(nèi)部服務錯誤，多為后臺錯誤?；旧贤ㄟ^發(fā)送的數(shù)據(jù)及傳回的數(shù)據(jù)就能定位問題所在了。原生JS與jQuery對AJAX的實現(xiàn) 一、定義 W3C里這么解釋AJAX： AJAX = Asynchronous JavaScript and XML（異步的 Jav...

Chaz 2019-08-21 10:37 評論0 收藏0
深入淺出Ajax

摘要：在接收響應期間持續(xù)不斷地觸發(fā)。在請求發(fā)生錯誤時觸發(fā)。在通信完成或者觸發(fā)或事件后觸發(fā)。已經(jīng)接收到部分響應數(shù)據(jù)。基于標準被廣泛支持。破壞程序的異常處理機制。原文（我的GitHub）：https://github.com/liangfengbo/frontend-ability/issues/1 學習大綱理解Ajax的工作原理 Ajax核心-XMLHttpRequest對象封裝Aja...

megatron 2019-08-22 18:39 評論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
Ajax詳解

摘要：當請求完成后注冊一個回調(diào)函數(shù)。該請求是否觸發(fā)全局處理事件如等，請求發(fā)送前的回調(diào)函數(shù)，用來修改請求發(fā)送前，此功能可用來設置自定義頭信息，在函數(shù)中返回將取消這個請求。例如，為請求指定一個回調(diào)函數(shù)名。即改變回調(diào)函數(shù)的，默認就是傳入的整個對象。 Ajax Ajax 全稱是 asynchronous javascript and xml，并不是新的編程語言，可以說是已有技術的組合，主要用來實現(xiàn)客...

jokester 2019-08-23 14:15 評論0 收藏0
溫故js系列（12）-ajax&&優(yōu)缺點&&node后端

摘要：接收響應當請求發(fā)送到服務器端，收到響應后，響應的數(shù)據(jù)會自動填充對象的屬性。一般而已狀態(tài)代碼為作為成功的標志。必要時，可以將查詢字符串參數(shù)追加到的末尾，以便提交給服務器。后端實現(xiàn)可以自學一點后端知識，便于學習。前端學習：教程&開發(fā)模塊化/規(guī)范化/工程化/優(yōu)化&工具/調(diào)試&值得關注的博客/Git&面試-前端資源匯總歡迎提issues斧正：Ajax JavaScript-Ajax&&no...

LiangJ 2019-08-20 10:33 評論0 收藏0