JavaScript Ajax 简易版

2017-12-27 19:05:27来源:CSDN作者:qq_26347509人点击

分享

前言

前台提交数据到后台,很平常的事情。但是很多情况下我们要用到静默提交或局部刷新,这就需要用到Ajax。笔者使用了很多的工具例如JQuery,在后面发现JQuery的体积太大,其实笔者只是需要提交数据到后台,就根据自己的需求简写了一个Ajax。

代码

Ajax = (function() {    this.options = {        timeout: 30000,        async: true,        dataType: "text"    };    var BaseRequest = function(ajax) {        var xhr = null;        /*var error = {            url: "Please check your url of params",            type: "Please check your type of params"        }*/        var        init = function() {            xhr = window.XMLHttpRequest ?                 (function() {                    return new window.XMLHttpRequest();                })() :                (function() {                    try {                        return new window.ActiveXObject("Microsoft.XMLHTTP");                    } catch(e) {                        console.log("Ajax - XMLHttpRequest cannot be used with the brower.");                    }                })();            if(xhr) {                xhr.onreadystatechange = callback;                xhr.timeout = ajax.timeout ? ajax.timeout : options.timeout;                xhr.ontimeout = (ajax.timeout && typeof ajax.timeout === "function") ? ajax.timeout : null;            }            console.log("xhr init complete :", xhr);        },        execute = function() {            xhr.open(ajax.type,                     ajax.url,                     ajax.async ? ajax.async : options.async);            if(ajax.headers) {                var keys = Object.keys(ajax.headers);                for(var i = 0; i < keys.length; i++) {                    xhr.setRequestHeader(keys[i], ajax.headers[keys[i]]);                }            }            if(ajax.type.toUpperCase() == "POST") {                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");            } else if(ajax.type.toUpperCase() == "GET") {                ajax.data = null;            }            try {                xhr.send(ajax.data);            } catch(e) {                console.log("Ajax send error:" + e);            }        },        callback = function() {            switch(xhr.readyState) {                case 0:                    break;                  case 1:                    if(ajax.beforeSend && typeof ajax.beforeSend === "function") {                        ajax.beforeSend();                    }                    break;                case 2:                    break;                case 3:                    break;                case 4:                     var message = xhr.responseText;                     if(xhr.status === 200) {                        if(ajax.success && typeof ajax.success === "function") {                            ajax.success(message);                          }                    } else {                        if(ajax.error && typeof ajax.error === "function") {                            ajax.error(xhr);                         }                    }                      if(ajax.complete && typeof ajax.complete === "function") {                        ajax.complete(message);                     }                    break;                default: break;            }          };        return {            getField: function(field) {                return xhr[field];            },            auto: function() {                init();                execute();            }        }    };    return {        /*  post、get、getJson Method的params template            var obj = {                url: ["http://...", "https://..."],                dataType: ["json", "text"]                data: data,                success: function() {},                error: function() {},                async: [true, false],                headers: {key1:"value1", key2:"value2", ……},            }        */        post: function(ajax) {            ajax.type = "POST";            new BaseRequest(ajax).auto();        },        get: function(ajax) {            ajax.type = "GET";            new BaseRequest(ajax).auto();        },        configuration: this.options    }})();

方法讲解

  • 对外提供简易的get/post方式
    POST: Ajax.post(param);    GET : Ajax.get(param);
  • 参数格式为:参数根据需求实现,必须选择的为url,success等
param = {    url: "where you want",    data: "transfer to back end",    dataType: "which type you want data format",    timeout: "Integer, default is 3000ms",    headers: "http headers, {key1: value1, key2: value2, ……}",    type: "POST/GET",    success: function,    error: function}

心得

  • 使用XMLHttpRequest实现Ajax的请求,实现浏览器兼容;
  • 实现简易的访问方式,如有其他的访问方式或者需求,请自定义方法;
  • 并没有使用Promise来处理Success/Error的返回,因此可能仍需链式迭代;
  • 可以根据需要实现option(全局定义),也可在每次的请求中自定义;
  • 对于成功访问的定义为状态码返回200,状态码返回302并不是一个成功的请求,如有需要请自行更改。
  • 第一次使用使用Markdown折腾了半天,我好笨#流泪

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台