原生js封装ajax代码

 1  /*
 2   *author: Ivan
 3   *date: 2014.06.01
 4   *参数说明：
 5   *opts: {‘可选参数‘}
 6   **method: 请求方式:GET/POST,默认值:‘GET‘;
 7   **url:    发送请求的地址, 默认值: 当前页地址;
 8   **data: string,json;
 9   **async: 是否异步:true/false,默认值:true;
10   **cache: 是否缓存：true/false,默认值:true;
11   **contentType: HTTP头信息，默认值：‘application/x-www-form-urlencoded‘;
12   **success: 请求成功后的回调函数;
13   **error: 请求失败后的回调函数;
14 */

15  function ajax(opts){
16      //一.设置默认参数
17      var defaults = {    
18              method: ‘GET‘,
19                 url: ‘‘,
20                data: ‘‘,        
21               async: true,
22               cache: true,
23         contentType: ‘application/x-www-form-urlencoded‘,
24             success: function (){},
25               error: function (){}
26          };    
27  
28      //二.用户参数覆盖默认参数    
29      for(var key in opts){
30          defaults[key] = opts[key];
31      }
32  
33      //三.对数据进行处理
34      if(typeof defaults.data === ‘object‘){    //处理 data
35          var str = ‘‘;
36          var value = ‘‘;
37          for(var key in defaults.data){
38              value = defaults.data[key];
39              if( defaults.data[key].indexOf(‘&‘) !== -1 ) value = defaults.data[key].replace(/&/g, escape(‘&‘));   //对参数中有&进行兼容处理
40              if( key.indexOf(‘&‘) !== -1 )  key = key.replace(/&/g, escape(‘&‘));   //对参数中有&进行兼容处理
41              str += key + ‘=‘ + value + ‘&‘;
42          }
43          defaults.data = str.substring(0, str.length - 1);
44      }
45  
46      defaults.method = defaults.method.toUpperCase();    //处理 method
47  
48      defaults.cache = defaults.cache ? ‘‘ : ‘&‘ + new Date().getTime() ;//处理 cache
49  
50      if(defaults.method === ‘GET‘ && (defaults.data || defaults.cache))    defaults.url += ‘?‘ + defaults.data + defaults.cache;    //处理 url    
51      
52      //四.开始编写ajax
53      //1.创建ajax对象
54      var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘);
55      //2.和服务器建立联系，告诉服务器你要取什么文件
56      oXhr.open(defaults.method, defaults.url, defaults.async);
57      //3.发送请求
58      if(defaults.method === ‘GET‘)    
59          oXhr.send(null);
60      else{
61          oXhr.setRequestHeader("Content-type", defaults.contentType);
62          oXhr.send(defaults.data);
63      }    
64      //4.等待服务器回应
65      oXhr.onreadystatechange = function (){
66          if(oXhr.readyState === 4){
67              if(oXhr.status === 200)
68                 defaults.success.call(oXhr, oXhr.responseText);
69              else{
70                  defaults.error();
71             }
72          }
73      };
74  }

 1 //调用ajax函数
 2 
 3 ajax({
 4  
 5  　　url: ‘1.php‘,
 6  
 7  　　data: {name: ‘ivan‘, sex: ‘male‘, age: ‘23‘},
 8  
 9  　　success: function (data){ alert(‘返回数据是：‘ + data); }
10  
11  });
12  
13  ajax({
14  
15  　　url: ‘1.php‘,
16  
17  　　data: ‘name=ivan&sex=male&age=23‘,
18  
19  　　cache: false,
20  
21  　　success: function (data){ alert(‘返回数据是：‘ + data); }
22  
23  });