轻松搞定Ajax（分享下自己封装ajax函数，其实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         for(var key in defaults.data){
37             str += key + ‘=‘ + defaults.data[key] + ‘&‘;
38         }
39         defaults.data = str.substring(0, str.length - 1);
40     }
41 
42     defaults.method = defaults.method.toUpperCase();    //处理 method
43 
44     defaults.cache = defaults.cache ? ‘‘ : ‘&‘ + new Date().getTime() ;//处理 cache
45 
46     if(defaults.method === ‘GET‘ && (defaults.data || defaults.cache))    defaults.url += ‘?‘ + defaults.data + defaults.cache;    //处理 url    
47     
48     //四.开始编写ajax
49     //1.创建ajax对象
50     var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘);
51     //2.和服务器建立联系，告诉服务器你要取什么文件
52     oXhr.open(defaults.method, defaults.url, defaults.async);
53     //3.发送请求
54     if(defaults.method === ‘GET‘)    
55         oXhr.send(null);
56     else{
57         oXhr.setRequestHeader("Content-type", defaults.contentType);
58         oXhr.send(defaults.data);
59     }    
60     //4.等待服务器回应
61     oXhr.onreadystatechange = function (){
62         if(oXhr.readyState === 4){
63             if(oXhr.status === 200)
64                 defaults.success.call(oXhr, oXhr.responseText);
65             else{
66                 defaults.error();
67             }
68         }
69     };
70 }

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