原生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 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
拥抱模块化的JavaScript
Mar 07 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 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
极典R601SW收音机
2021/03/02 无线电
使用字符串函数输出整数化的PHP版本号
2006/10/09 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
JavaScript访问样式表代码
2010/10/15 Javascript
JS跨域代码片段
2012/08/30 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
Python中操作MySQL入门实例
2015/02/08 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
python更新列表的方法
2015/07/28 Python
python使用多进程的实例详解
2018/09/19 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
台湾三立电视电商平台:电电购
2019/09/09 全球购物
回门宴新郎答谢词
2014/01/12 职场文书
施工材料员岗位职责
2014/02/12 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
如何用python插入独创性声明
2021/03/31 Python
解析目标检测之IoU
2021/06/26 Python