一、封装原生的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

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

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

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  2. 使用原生JS封装Ajax

    使用原生 的JS封装 Ajax,实现 仿JQuery的Ajax,post,get三种异步请求方式: var MAjax = { //根据浏览器创建异步对象 createXhr: function () ...

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

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...

  4. 原生JS封装ajax方法

    http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...

  5. 原生js封装ajax,深入理解$.ajax()

    直接上代码 //封装的ajax函数 // 传一个对象,所有要用的参数都在对象中 因为不写对象 实参列表个数太多,所以像jq一样,调用ajax也是把对象当实际参数传进去 // type 请求方式 默认g ...

  6. 原生js封装ajax代码

    方法一:(类似jQuery的封装方法) 1.ajax函数封装: /* *author: Ivan *date: 2014.06.01 *参数说明: *opts: {'可选参数'} **method: ...

  7. ajax 原生js封装ajax [转]

    /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @ ...

  8. 原生js封装Ajax

    [转载请注明出处] 1 /** * @fileoverview ajax请求公用组件 * @author Limo * @date 2015/08/07 * Native package ajax m ...

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

    描述: 需要ajax跨域请求,用cors跨域方案.服务端设置: header('Access-Control-Allow-Origin: http://front.ls-la.me'); header ...

随机推荐

  1. ASP.NET MVC5 :Attribute路由使用详解

    1.什么是Attribute路由?怎么样启用Attribute路由? 微软在 ASP.NET MVC5 中引入了一种新型路由:Attribute路由,顾名思义,Attribute路由是通过Attrib ...

  2. 简洁又快速地处理集合——Java8 Stream(上)

    Java 8 发布至今也已经好几年过去,如今 Java 也已经向 11 迈去,但是 Java 8 作出的改变可以说是革命性的,影响足够深远,学习 Java 8 应该是 Java 开发者的必修课. 今天 ...

  3. UVA11752 The Super Powers

    /* UVA11752 The Super Powers https://vjudge.net/contest/153365#problem/Y 数论 注意a^n=b要用除法求,并且求得的n比实际大1 ...

  4. WebApi传参总动员(一)

    目前自己的工作和WebApi相关,免不了传入.接收参数.以前的老办法是从请求流中获取json,再反序列化,这中间有2个不能控制的地方,一个是流,一个是反序列化,都需要try,总感觉非常的不爽.因此对W ...

  5. Leetcode_299_Bulls and Cows

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/50768550 You are playing the fo ...

  6. C语言--指针(一)

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenVveW91MTMxNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  7. Tween动画TranslateAnimation细节介绍

    Tween动画有下面这几种: Animation   动画 AlphaAnimation 渐变透明度 RotateAnimation 画面旋转 ScaleAnimation 渐变尺寸缩放 Transl ...

  8. hdu 5410 CRB and His Birthday 01背包和全然背包

    #include<stdio.h> #include<string.h> #include<vector> #include<queue> #inclu ...

  9. elasticsearch源码分析之search模块(server端)

    elasticsearch源码分析之search模块(server端) 继续接着上一篇的来说啊,当client端将search的请求发送到某一个node之后,剩下的事情就是server端来处理了,具体 ...

  10. hdoj--2098--分拆素数和(枚举)

    分拆素数和 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...