原生JS写Ajax的请求函数功能


Posted in Javascript onDecember 22, 2017

一般我们写网页的时候,如果用到 Ajax 请求服务器,都是使用 JQuery 等已经封装好的库来调用,比较简单。

但是一般这些库的功能很多,引入了太多我们用不到的东西,如果我们需要写一个功能单一,简单的页面,完全用不到引用如此庞大的库文件。

我们可以简单实现一个自己的 Ajax 请求功能,具体的代码如下:

var ajax = {};
ajax.x = function () {
 if (typeof XMLHttpRequest !== 'undefined') {
 return new XMLHttpRequest();
 }
 var versions = [
 "MSXML2.XmlHttp.6.0",
 "MSXML2.XmlHttp.5.0",
 "MSXML2.XmlHttp.4.0",
 "MSXML2.XmlHttp.3.0",
 "MSXML2.XmlHttp.2.0",
 "Microsoft.XmlHttp"
 ];
 var xhr;
 for (var i = 0; i < versions.length; i++) {
 try {
 xhr = new ActiveXObject(versions[i]);
 break;
 } catch (e) {
 }
 }
 return xhr;
};
ajax.send = function (url, method, data, success,fail,async) {
 if (async === undefined) {
 async = true;
 }
 var x = ajax.x();
 x.open(method, url, async);
 x.onreadystatechange = function () {
 if (x.readyState == 4) {
 var status = x.status;
 if (status >= 200 && status < 300) {
 success && success(x.responseText,x.responseXML)
 } else {
 fail && fail(status);
 }
 }
 };
 if (method == 'POST') {
 x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
 }
 x.send(data)
};
ajax.get = function (url, data, callback, fail, async) {
 var query = [];
 for (var key in data) {
 query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
 }
 ajax.send(url + (query.length ? '?' + query.join('&') : ''), 'GET', null, callback, fail, async)
};
ajax.post = function (url, data, callback, fail, async) {
 var query = [];
 for (var key in data) {
 query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
 }
 ajax.send(url,'POST', query.join('&'), callback, fail, async)
};

使用方法: GET

ajax.get('/test.php', {foo: 'bar'}, function(response,xml) {
 //success
},
function(status){
 //fail
});
POST
ajax.post('/test.php', {foo: 'bar'}, function(response,xml) {
 //succcess
},function(status){
 //fail
});

这里需要注意一个问题,如果我们想要发送类似

var sendCmd = "?op_code=" + code + "&op_cmd=" + cmd;
ajax.post('/control' + sendCmd,'',function(response,xml) {
 console.log('success');
},
function(status){
 console.log('failed:' + status);
});

总结

以上所述是小编给大家介绍的原生JS写Ajax的请求函数功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木的支持!

Javascript 相关文章推荐
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
js操作二级联动实现代码
Jul 27 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
layui表格实现代码
May 20 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
VsCode里的Vue模板的实现
Aug 12 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 #Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 #Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 #Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 #Javascript
Webpack框架核心概念(知识点整理)
Dec 22 #Javascript
详解webpack+express多页站点开发
Dec 22 #Javascript
如何开发出更好的JavaScript模块
Dec 22 #Javascript
You might like
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
深入理解Node module模块
2018/03/26 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python转码问题的解决方法
2008/10/07 Python
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
python中sleep函数用法实例分析
2015/04/29 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
前台接待的工作职责
2013/11/21 职场文书
秘书行业自我鉴定范文
2013/12/30 职场文书
高中历史教学反思
2014/02/08 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
2014全年工作总结
2014/11/27 职场文书
教师工作证明范本
2015/06/12 职场文书
小学生运动会广播
2015/08/19 职场文书
导游词之井冈山
2019/11/20 职场文书