在之前的学习中,我们只是简单的些原生的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 = 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文件,然后进行传参,调用!!!!
希望可以帮到你们哦!!