原生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 关闭IE6、IE7
Jun 01 Javascript
js左侧多级菜单动态的解决方案
Feb 01 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
原生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
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python遍历numpy数组的实例
2018/04/04 Python
python读取文本中的坐标方法
2018/10/14 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
给水工程专业毕业生自荐信
2014/01/28 职场文书
促销活动总结范文
2014/04/30 职场文书
中专生自荐信
2014/06/25 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
2014年实习期工作总结
2014/11/27 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
JS中如何优雅的使用async await详解
2021/10/05 Javascript