封装一个ajax

 1 function ajax(option) {
 2     //没有url 直接退出；
 3     if(!option.url){
 4         alert('请输入正确的URL');
 5         return;
 6     }
 7 //若没有输入url地址，则直接提示
 8     var type = option.type || 'GET';
 9     //给获取方式默认值get||opti方式on.type为设置的获取
10     var url = option.url;
11     //路径
12     var async = option.async || true;
13     //设置同步或异步，同步为flase,异步为true;默认值为true
14     var success = option.success || function () {};
15     //服务器成功向前台发送数据后执行的回调函数;
16     if (XMLHttpRequest) {
17         var xhr = new XMLHttpRequest();
18 　　}else {
19         var xhr = new ActiveXObject('Microsoft.XMLHTTP');
20 　　}
21 　　//解决IE6不兼容问题
22     var data = option.data || '';
23     //data为浏览器向服务器发送的数据
24     var dataType = option.dataType || 'text';
25     //判断发送的数据格式
26     var dataStr='';
27     //定义一个变量，用于储存浏览器发送的数据
28     if(data){
29         if(typeof data == 'string'){
30             dataStr = data;
31             //若发送的数据的数据类型为String,则直接将该数据保存至变量datstr中
32         }else{
33             //若发送的数据类型为josn格式
34             for(var i in data){
35                 //用遍历对象的方法遍历json数据
36                 dataStr += i+'=' +data[i] +'&';    
37                 //用字符串拼接的方式，将json格式的数据拼写成相应的格式;eg:(name="xxx"&password:"xxx"&)
38             }
39             dataStr = dataStr.slice(0,-1);
40             //使用字符串内的方法:slice();将字符截取;去掉末尾的&符号
41         }
42     }
43     //判断判断信息获取的方式
44     if(type.toUpperCase() == 'GET'){
45         //为get的情况
46         if(data){
47             //若data有值
48             xhr.open(type,url+'?'+dataStr,async);
49             //将数据写在url中，通过字符串拼接的方式给些成正确的格式;
50         }else{
51             //若data没有值
52             xhr.open(type,url,async);
53             //地址栏不做修改
54         }
55         //send方法向后抬发送数据;
56         xhr.send();
57     }
58     if(type.toUpperCase() == 'POST'){
59         //判断获取的类型为post时
60         xhr.open(type,url,async);
61         //直接使用open方法向后台发送请求
62 　　　　xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
63         //填写请求头
64 　　　　xhr.send(dataStr);
65         //将处理完成的数据发送至后台
66     }
67     xhr.onreadystatechange = function () {
68         //开始事件监听
69 　　　　if (xhr.readyState == 4 ) {
70         //xhr.readyState===4时，代表数据发送成功
71             if(xhr.status == 200){
72                 //xhr.status的值为200时,代表浏览器请求被正确接收，处理.
73                 if(dataType.toUpperCase() == 'TEXT'){
74                     //判断dateType的响应数据类型;
75                     success(xhr.responseText)
76                     //若dateType为字符串形式的响应数据,将此报文作为success()函数的实参进行回调函数;
77                 }else if(dataType.toUpperCase() =='XML'){
78                     //若获得的数据类型为XML形式的响应数据
79                     success(xhr.responseXML)
80                     //将此数据作为success()函数的参数进行回调;
81                 }else if(dataType.toUpperCase()=='JSON'){
82                     //若获得的数据类型为JSON形式的响应数据;
83                     success(JSON.parse(xhr.response));
84                     //使用JSON.parse方法处理数据,并将处理好的数据作为success()的参数进行回调
85                 }
86                 
87             }else if(xhr.status==404){
88                 //若http状态码为404则代表请求的引用文档不存在;
89                 alert('请求失败');
90             }
91 　　　　}
92 　　};
93 
94 }

 

转载于:https://www.cnblogs.com/-123m/p/7235279.html