原生JS封装ajax以及request

一、封装原生的xhr为ajax类

xhr以及用法见之前的文章

1、根据url确定请求的头部以及别的信息。

    var _headerConfig = {};
    if(url.indexOf('getcaptcha') !== -1) {
        _headerConfig = {
            Accept: 'image/png',
            responseType: 'arraybuffer',
        }
    } else if(url.indexOf('files/upload') !== -1) {
        _headerConfig = {
            'Content-Type': 'multipart/form-data',
            responseType: 'json',
        }
    } else {
        _headerConfig = {
            'Content-Type': 'application/json',
            Accept: 'application/json',
            responseType: 'json',
        }
    }

2、根据参数信息中的信息,确定请求的方法以及请求的参数

    if("method" in options) {
        options.method = options.method.toUpperCase();
    } else {
        options.method = "GET";
    }
    if(options.method !== "GET") {
        if(!(options.params instanceof FormData)) {
            options.params = JSON.stringify(options.params);
        }
    }

3、打开xhr并且根据头部头部以及其他信息设置,发送

    this.xhr.open(options.method, url, true);
    for(var _i in _headerConfig) {

        if(_i === 'responseType') {
            this.xhr.responseType = _headerConfig[_i];
        } else {
            this.xhr.setRequestHeader(_i, _headerConfig[_i]);
        }
    }
    if(token) {
        this.xhr.setRequestHeader("token", token);
    }
    this.xhr.send(options.params);

4、实现链式编程:在每个函数的结尾return this;

5、实现完成后执行回调

这个问题结合链式编程一度的卡了很久。

ajax.prototype.complete = function(completeFunction) {
    this.xhr.onreadystatechange = function(e) {
        if(this.readyState === 4) {
            completeFunction(this);
        }
    }
    return this;
}

二、封装实用性的request类

在项目中经常需要将request进行封装,使用ajax类发起请求。拼接请求的地址函数。

1、创建拼接方法。

var requstUrl = {
    baseURL: URL,
    API: {
        NEWS: '/news',
        LOGIN: '/',
    },
    // api为API中的参数,用于拼接url
    // method为API后的地址,用于拼接url最后面的东西。
    // params为get请求需要的参数
    createUrl: function(api, method, params) {
        var _requestUrl = this.baseURL + this.API[api] + method;
        if(params) {
            for(var i of params) {
                _requestUrl += (_requestUrl.indexOf("?") == -1 ? "?" : "&");
                _requestUrl += name + "=" + value;
            }
        }
        return _requestUrl;
    }
}

2、确定各个请求。

function handleRequest() {

}

//  get请求带参数。
handleRequest.prototype.getDataUseGet = function(api, method, params) {
    var _url;
    var ajax = new Ajax();
    var token = sessionStorage.getItem('token');
    if(params) {
        _url = requstUrl.createUrl(api, method, params);
    } else {
        _url = requstUrl.createUrl(api, method);
    }
    return ajax.request(_url, {
        method: 'GET',
        params: params
    }, token);
}

//  get请求不带token
handleRequest.prototype.getDataUseGetWithoutToken = function(api, method, params) {
    var _url;
    var ajax = new Ajax();
    if(params) {
        _url = requstUrl.createUrl(api, method, params);
    } else {
        _url = requstUrl.createUrl(api, method);
    }
    return ajax.request(_url, {
        method: 'GET',
        params: params
    });
}

//  post请求带token
handleRequest.prototype.getDataUsePost = function(api, method, params) {
    var _url = requstUrl.createUrl(api, method);
    var token = sessionStorage.getItem('token');
    var ajax = new Ajax();
    console.log(createAjaxObj(_url, {
        method: 'POST',
        params: params
    }, token));
    return ajax.request(_url, {
        method: 'POST',
        params: params
    }, token);
}

//  post请求不带token
handleRequest.prototype.getDataUsePostWithOutToken = function(api, method, params) {
    var _url = requstUrl.createUrl(api, method);
    var ajax = new Ajax();
    return ajax.request(_url, {
        method: 'POST',
        params: params
    });
}

//  put请求带token
handleRequest.prototype.getDataUsePut = function(api, method, params) {
    var _url = requstUrl.createUrl(api, method);
    var token = sessionStorage.getItem('token');
    var ajax = new Ajax();
    return ajax.request(_url, {
        method: 'PUT',
        params: params
    }, token);
}

//  put请求不带token
handleRequest.prototype.getDataUsePutWithOutToken = function(api, method, params) {
    var _url = requstUrl.createUrl(api, method);
    var ajax = new Ajax();
    return ajax.request(_url, {
        method: 'PUT',
        params: params
    });
}

//  delete请求带token
handleRequest.prototype.deleteData = function(api, method, params) {
    var _url = requstUrl.createUrl(api, method);
    var token = sessionStorage.getItem('token');
    var ajax = new Ajax();
    return ajax.request(_url, {
        method: 'DELETE',
        params: params
    }, token);
}

这个方法感觉可以再次进行封装。

三、使用

1、使用代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
    </body>
    <script src="ip.js" type="text/javascript"></script>
    <script src="xhr.js" type="text/javascript"></script>
    <script src="request.js" type="text/javascript"></script>
    <script type="text/javascript">

        var data = {
            "captcha": "string",
            "password": "string",
            "username": "string"
        };

        var test = new handleRequest();
        test.getDataUsePostWithOutToken('LOGIN', 'login',data).complete(function(result) {
            console.log(result)
        })
    </script>

</html>

2、结果

成功发起请求。

完整代码点击查看

以上。

原文地址:https://segmentfault.com/a/1190000017006833

原文地址:https://www.cnblogs.com/lalalagq/p/9957981.html

时间: 2024-10-08 19:32:27

原生JS封装ajax以及request的相关文章

原生JS封装AJAX

今天我们来说说利用原生JS封装AJAX. jquery框架的AJAX方法确实很好用,但有时候我们写的页面需要引入多个JS插件,不一定哪个插件就会和jquery发生冲突,导致jquery用不了了.或者页面比较简单,不需要加重浏览器的负担,这时我们自己封装一个AJAX就是一个很好的办法. //将数据转换成 a=1&b=2格式;function json2url(json){   var arr = [];   //加随机数防止缓存;   json.t = Math.random();   for(v

原生JS封装Ajax插件(同域&&jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.

原生js封装ajax:传json,str,excel文件上传表单提交

由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(uri, data, cb) { $.ajax({ url: uri, type: 'POST', dataType: 'json', data: data, }) .done(cb) .fail(function() { console.log("error"); }) .always(f

原生JS封装ajax方法

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Examples</title> 10 <script> 11 12 //将对象序列

原生js封装ajax代码

1.ajax函数封装: 1 /* 2 *author: Ivan 3 *date: 2014.06.01 4 *参数说明: 5 *opts: {'可选参数'} 6 **method: 请求方式:GET/POST,默认值:'GET'; 7 **url: 发送请求的地址, 默认值: 当前页地址; 8 **data: string,json; 9 **async: 是否异步:true/false,默认值:true; 10 **cache: 是否缓存:true/false,默认值:true; 11 **

原生js封装ajax,实现跨域请求

描述: 需要ajax跨域请求,用cors跨域方案.服务端设置: header('Access-Control-Allow-Origin: http://front.ls-la.me'); header('Access-Control-Allow-Headers: X-Requested-With'); 设置了: 后端需要的头信息,原生ajax以表单方式post提交数据,json数据data转换成key1=val1&key2=val2 的字符串格式 1 var ajaxHdFn = functio

原生JS封装ajax函数

1 function ajax(params) { 2 params.data = params.data || ""; 3 params.type = params.type || "get"; 4 if(!params.url) { 5 throw new Error("未指定连接"); 6 } 7 params.async = params.async || true; 8 var xhr; 9 //兼容IE 10 if(window.VB

原生JS封装Ajax(原理)

1.创建一个ajax对象 var oAjax=new XMLHttpRequest();2.连接 oAjax.open('GET','a.txt'+'?'+data,true); oAjax.open('POST',url,true);3.发送 oAjax.send(); oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); oAjax.send(data);4.接收 监听 oAjax.onread

原生js封装ajax方法,包含jsonp和网络超时处理

function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || 'json'; options.async = options.async || true; options.timeout=options.timeout||8000;//超时处理,默认8s var p