结果分类-Ajax之三

4/25/2011来源:Ajax教程人气:6537

Ajax中的x指的是xml,早期的数据格式都喜欢用XML,然后一层层的解析。当然简单的也会返回HTML(或称HTML片段)。
现在使用JSON格式的也很多。根据不同需求,给Ajax对象添加了三个实用方法:Ajax.text、Ajax.json、Ajax.xml。

Ajax.text返回纯文本,即responseText

Ajax.json返回json,即会将responseText解析成js对象

Ajax.xml返回xml文档,即responseXML

使用方式与Ajax.request相同,第一个参数是请求url,第二个是配置参数。

完整代码

01 Ajax = 
02 function(){
03     function request(url,opt){
04         function fn(){}
05         var async   = opt.async !== false,
06             method  = opt.method    || 'GET',
07             type    = opt.type      || 'text',
08             encode  = opt.encode    || 'UTF-8',
09             data    = opt.data      || null,
10             success = opt.success   || fn,
11             failure = opt.failure   || fn;
12             method  = method.toUpperCase();
13         if(data && typeof data == 'object'){//对象转换成字符串键值对
14             data = _serialize(data);
15         }
16         if(method == 'GET' && data){
17             url += (url.indexOf('?') == -1 ? '?' : '&') + data;
18             data = null;
19         }   
20         var xhr = window.xmlhttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
21         xhr.onreadystatechange = function(){
22             _onStateChange(xhr,type,success,failure);
23         };
24         xhr.open(method,url,async);
25         if(method == 'POST'){
26             xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=' + encode);
27         }
28         xhr.send(data);
29         return xhr; 
30     }
31     function _serialize(obj){
32         var a = [];
33         for(var k in obj){
34             var val = obj[k];
35             if(val.constructor == Array){
36                 for(var i=0,len=val.length;i<len;i++){
37                     a.push(k + '=' + encodeURIComponent(val[i]));
38                 }               
39             }else{
40                 a.push(k + '=' + encodeURIComponent(val));
41             }               
42         }
43         return a.join('&');
44     }
45     function _onStateChange(xhr,type,success,failure){
46         if(xhr.readyState == 4){
47             var s = xhr.status, result;
48             if(s>= 200 && s < 300){
49                 switch(type){
50                     case 'text':
51                         result = xhr.responseText;
52                         break;
53                     case 'json':
54                         result = function(str){
55                             return (new Function('return ' + str))();
56                         }(xhr.responseText);
57                         break;
58                     case 'xml':
59                         result = xhr.responseXML;
60                         break;
61                 }
62                 success(result);    
63             }else{
64                 failure(xhr);
65             }
66         }else{}
67     }
68     return (function(){
69         var Ajax = {request:request}, types = ['text','json','xml'];
70         for(var i=0,len=types.length;i<len;i++){
71             Ajax[types[i]] = function(i){
72                 return function(url,opt){
73                     opt = opt || {};
74                     opt.type = types[i];
75                     return request(url,opt);
76                 };
77             }(i);
78         }
79         return Ajax;
80     })();
81 }();