首页 > 代码库 > 封装ajax

封装ajax

在之前的学习中,我们只是简单的些原生的ajax或者jqajax,没有考虑传参、默认值等问题

所以,今天来封装一个ajax:

  

 1 //将数据转换成 a=1&b=2格式放入一个小方法;
 2 function json2url(json){
 3     //声明一个空的数组,来储存外面传进来的数据
 4    var arr = [];
 5    //加随机数[随机因子]防止缓存;
 6    json.t = Math.random();
 7    //循环传进来的son数据
 8    for(var name in json){
 9        //用等号将name和值连接起来,并传到之前声明的一个空数组       
10       arr.push(name+‘=‘+json[name]);
11    }
12   //因为每个数据之间使用&符链接,所以返回时用&将数组转换成字符串输出;
13    return arr.join(‘&‘);
14 }
15 
16 //这里开始正式封装ajax方法,传入的参数还是外界传进的json数据
17 function ajax(json){
18    //1.首先创建一个ajax对象;用if判断来解决IE兼容问题;
19    if(window.XMLHttpRequest){
20       var oAjax = new XMLHttpRequest();
21    }else{
22       var oAjax = new ActiveXObject(‘Microsoft.XMLHTTP‘);
23    }
24 
25    //第二步:考虑默认值
26    
27    //判断json文件是否传进了URL地址,如果没有,给用户弹出提示框
28    if(!json.url){
29       alert(‘请输入合理的请求地址!‘);
30       return;
31    }
32    //设置默认请求方式
33    json.type = json.type || ‘get‘;
34    //设置默认超时时间
35    json.time = json.time || 5000;
36    //设置默认数据
37    json.data = http://www.mamicode.com/json.data || {};
38 
39    //第三步:判断用户传递的请求方式是get还是post请求:
40    switch (json.type.toLowerCase()){
41       case ‘get‘:
42          //2.打开请求;
43          oAjax.open(‘get‘,json.url+‘?‘+json2url(json.data),true);
44          //3.发送数据:
45          oAjax.send();
46          break;
47       case ‘post‘:
48          //打开请求;
49          oAjax.open(‘post‘,json.url,true);
50          //设置请求头;
51          oAjax.setRequestHeader(‘Content-type‘,‘application/x-www-form-urlencoded‘);
52          //发送数据;
53          oAjax.send(json2url(json.data));
54    }
55    //第四步:获取响应数据
56    oAjax.onreadystatechange = function() {
57          //判断http响应状态是否等于4
58       if (oAjax.readyState == 4) {
59          if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
60             //如果外边传递了成功的回调函数,那么就执行,
61             json.success && json.success(oAjax.responseText);
62          } else {
63             //如果外边传递了失败的回调函数,那么就执行,
64             json.error && json.error(oAjax.status);
65          }
66          clearTimeout(timer);//规定时间内取到数据后清除定时器;
67       }
68    };
69    var timer;
70    timer = setTimeout(function(){//设置网络响应超时;
71       alert(‘网络响应超时,请稍后再试‘);
72       oAjax.onreadystatechange = null;//网络超时后清除事件;
73    },json.time);
74 }

这样酒疯装好了一个ajax,在调用的时候,在使用的时候,首先要引入这个js文件,然后进行传参,调用!!!!

希望可以帮到你们哦!!

封装ajax