一、封装原生的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. 小学生都能学会的python(一)2018.9.3

    一,小学生第一天 1,认识和了解python python的创始⼈为吉多·范罗苏姆(Guido van Rossum). python是一门解释性语言  弱类型语言 优点:(1).Python的定位是 ...

  2. 前端框架Bootstrap简单介绍

    下载: 解压之后: 把这些文件拷贝到项目中 页面使用时  只需要引入: 然后我们就可以参考官网来设计需要的前端页面了 设计一个按钮:button 只需要标明css样式中使用的类  下面就是现实效果:

  3. JavaScript原生值与JSON的转换

    ---------------------------------- ---------------------------- stringify方法的另外两种参数: ---------------- ...

  4. ❝ Windows系统的FTP上传下载脚本 ❞

    运行环境:windows 脚本功能:从目标系统下载数据库备份文件*.dmp 执行方法:windows任务计划定时调用文件ftp.bat 文件1:ftp.bat echo 开始备份日期: >> ...

  5. Elasticsearch 三种分页方式

    from + size 浅分页 "浅"分页可以理解为简单意义上的分页.它的原理很简单,就是查询前20条数据,然后截断前10条,只返回10-20的数据.这样其实白白浪费了前10条的查 ...

  6. yiii 数据库备份导出

    应用场景 数据对于网站来说 是非常重要的 一般 cms 后台 都有 数据备份功能.使用Yii 的第三方拓展 可以快速开发. spanjeta/yii2-backup spanjeta/yii2-bac ...

  7. [Design]Adobe CS6 2%错误问题

    错误描述:FATAL: Payload '{3F023875-4A52-4605-9DB6-A88D4A813E8D} Camera Profiles Installer 6.0.98.0' info ...

  8. 在IntelliJ IDEA中创建Maven多模块项目

    在IntelliJ IDEA中创建Maven多模块项目 1,创建多模块项目选择File>New>Project 出现New Project窗口左侧导航选择Maven,勾选右侧的Create ...

  9. sqlite学习笔记7:C语言中使用sqlite之打开数据库

    数据库的基本内容前面都已经说得差点儿相同了.接下看看如何在C语言中使用sqlite. 一 接口 sqlite3_open(const char *filename, sqlite3 **ppDb) 打 ...

  10. .NET 图片解密为BASE64

    #region 图片加密 /// <summary> /// 加密本地文件 /// </summary> /// <param name="inputname& ...