原生封装的ajax
原生封装的ajax的代码如下:
//将数据转换成 a=1&b=2格式;
function json2url(json){
var arr = [];
//加随机数防止缓存;
json.t = Math.random();
for(var name in json){
arr.push(name+'='+json[name]);
}
return arr.join('&');
}
function ajax(json){
//1.创建一个ajax对象;
if(window.XMLHttpRequest){
var oAjax = new XMLHttpRequest();
}else{
var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}
//考虑默认值:
if(!json.url){
alert('请输入合理的请求地址!');
return;
}
json.type = json.type || 'get';
json.time = json.time || 5000;
json.data = json.data || {};
//判断用户传递的是get还是post请求:
switch (json.type.toLowerCase()){
case 'get':
//2.打开请求;
oAjax.open('get',json.url+'?'+json2url(json.data),true);
//3.发送数据:
oAjax.send();
break;
case 'post':
//打开请求;
oAjax.open('post',json.url,true);
//设置请求头;
oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//发送数据;
oAjax.send(json2url(json.data));
}
//4.获取响应数据
oAjax.onreadystatechange = function() {
if (oAjax.readyState == 4) {
if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
//如果外边传递了成功的回调函数,那么就执行,
json.success && json.success(oAjax.responseText);
} else {
//如果外边传递了失败的回调函数,那么就执行,
json.error && json.error(oAjax.status);
}
clearTimeout(timer);//规定时间内取到数据后清除定时器;
}
};
var timer;
timer = setTimeout(function(){//设置网络响应超时;
alert('网络响应超时,请稍后再试');
oAjax.onreadystatechange = null;//网络超时后清除事件;
},json.time);
}
希望对大家有用
最新文章
- 51Nod-1091 线段的重叠
- Java线程并发中常见的锁
- 转: linux内核版本本地版本号的检查——setlocalversion
- Spring MVC 指导文档解读(一)
- MQ基础
- 拥有最小高度能自适应高度,IE、FF全兼容的div设置
- 2014年1月24日 Oracle 事务导读
- Windows PHone 8 获取硬件信息
- Swift 与 JSON 数据 浅析
- ES6 数组的扩展
- js对象、构造函数、命名空间、方法、属性
- IDEA 导入 Tomcat9 源码
- vue定义全局组件
- numpy的基础运算2-【老鱼学numpy】
- Oracle数据库的一些重要概念
- ajango--orm操作
- 【简书】在阿里云自带的CentOS + LAMP环境下部署一个Laravel项目
- Jenkins环境搭建(1)-下载与安装
- Android模拟微信主页面的Demo
- 题外话:Lua脚本语言存在的意义