原生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中的prototype使用说明
Apr 13 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
原生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
常用的php对象类型判断
2008/08/27 PHP
php读取javascript设置的cookies的代码
2010/04/12 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
jQuery示例收集
2010/11/05 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
常用python数据类型转换函数总结
2014/03/11 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
Python gevent协程切换实现详解
2020/09/14 Python
Django celery异步任务实现代码示例
2020/11/26 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
学校食堂采购员岗位职责
2013/12/05 职场文书
优秀幼教自荐信
2014/02/03 职场文书
健康教育评估方案
2014/05/25 职场文书
学生个人总结范文
2015/02/15 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server