原生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 相关文章推荐
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 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
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
原生JS实现天气预报
2020/06/16 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
python 整数越界问题详解
2019/06/27 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
详解KMP算法以及python如何实现
2020/09/18 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
法律专业自我鉴定
2013/10/03 职场文书
听证会主持词
2015/07/03 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android