建站学 - 轻松建站从此开始！
高级搜索|网站地图|TAG标签RSS订阅[设为首页] [加入收藏]

建站学-个人建站指南,网页制作,网站设计,网站制作教程

搜索

热门标签:

当前位置: 建站学 > 网站开发 > JavaScript/Ajax教程 >

Ajax实战(7)：新API解析JSON

时间:2011-04-27 15:19来源: 作者: 点击: 次
这是我们Ajax实战系列的最后一篇。 ECMAScript 5发布有段时间了，其中就包括了解析JSON的原生API-JSON.parse。许多浏览器已经支持了。主流JS库如JQuery，Ext，Prototype都优先使用JSON.parse，不支持该方法的浏览器则使用new Function或eval。 为何优先使用JSON.parse，我想

这是我们Ajax实战系列的最后一篇。

ECMAScript 5发布有段时间了，其中就包括了解析JSON的原生API-JSON.parse。许多浏览器已经支持了。主流JS库如JQuery，Ext，Prototype都优先使用JSON.parse，不支持该方法的浏览器则使用new Function或eval。 为何优先使用JSON.parse，我想一个就是性能，原生的总是要快一些吧。此外JSON.parse较eval也更安全。


这里也当然不能落后了，优先使用JSON.parse，不行再用new Function方式。最后失败了会给failure的第二个参数msg赋值为"parse json error"

01 result = function(str){
02     try{
03         return JSON.parse(str);
04     }catch(e){
05         try{
06             return (new Function('return ' + str))();
07         }catch(e){
08             failure(xhr,'parse json error',e);
09         }
10     }
11 }(xhr.responseText);

完整源码

001 Ajax =
002 function(){
003     function request(url,opt){
004         function fn(){}
005         opt = opt || {};
006         var async   = opt.async !== false,
007             method  = opt.method    || 'GET',
008             type    = opt.type      || 'text',
009             encode  = opt.encode    || 'UTF-8',
010             timeout = opt.timeout   || 0,
011             data    = opt.data      || null,
012             success = opt.success   || fn,
013             failure = opt.failure   || fn;
014             method  = method.toUpperCase();
015         if(data && typeof data == 'object'){//对象转换成字符串键值对
016             data = _serialize(data);
017         }
018         if(method == 'GET' && data){
019             url += (url.indexOf('?') == -1 ? '?' : '&') + data;
020             data = null;
021         }   
022         var xhr = function(){
023             try{
024                 return new XMLHttpRequest();
025             }catch(e){
026                 try{
027                     return new ActiveXObject('Msxml2.XMLHTTP');
028                 }catch(e){
029                     try{
030                         return new ActiveXObject('Microsoft.XMLHTTP');
031                     }catch(e){
032                         failure(null,'create xhr failed',e);
033                     }
034                 }
035             }
036         }();
037         if(!xhr){return;}
038         var isTimeout = false, timer;
039         if(async && timeout>0){
040             timer = setTimeout(function(){
041                 xhr.abort();
042                 isTimeout = true;
043             },timeout);
044         }
045         xhr.onreadystatechange = function(){
046             if (xhr.readyState == 4 && !isTimeout){
047                 _onStateChange(xhr, type, success, failure);
048                 clearTimeout(timer);
049             }else{}
050         };
051         xhr.open(method,url,async);
052         if(method == 'POST'){
053             xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=' + encode);
054         }
055         xhr.send(data);
056         return xhr;
057     }
058     function _serialize(obj){
059         var a = [];
060         for(var k in obj){
061             var val = obj[k];
062             if(val.constructor == Array){
063                 for(var i=0,len=val.length;i<len;i++){
064                     a.push(k + '=' + encodeURIComponent(val[i]));
065                 }               
066             }else{
067                 a.push(k + '=' + encodeURIComponent(val));
068             }               
069         }
070         return a.join('&');
071     }
072     function _onStateChange(xhr,type,success,failure){
073         var s = xhr.status, result;
074         if(s>= 200 && s < 300){
075             switch(type){
076                 case 'text':
077                     result = xhr.responseText;
078                     break;
079                 case 'json':
080                     
081                     result = function(str){
082                         try{
083                             return JSON.parse(str);
084                         }catch(e){
085                             try{
086                                 return (new Function('return ' + str))();
087                             }catch(e){
088                                 failure(xhr,'parse json error',e);
089                             }
090                         }
091                     }(xhr.responseText);
092                 break;
093                 case 'xml':
094                     result = xhr.responseXML;
095                     break;
096             }
097             // text, 返回空字符时执行success
098             // json, 返回空对象{}时执行suceess，但解析json失败，函数没有返回值时默认返回undefined
099             typeof result !== 'undefined' && success(result);
100               
101             //请求超时，调用abort后xhr.status为0，但不知为0时是否还有其它的情况 
102         }else if(s===0){
103             failure(xhr,'request timeout');
104         }else{
105             failure(xhr,xhr.status);
106         }
107         xhr = null;
108     }
109     return (function(){
110         var Ajax = {request:request}, types = ['text','json','xml'];
111         for(var i=0,len=types.length;i<len;i++){
112             Ajax[types[i]] = function(i){
113                 return function(url,opt){
114                     opt = opt || {};
115                     opt.type = types[i];
116                     return request(url,opt);
117                 }
118             }(i);
119         }
120         return Ajax;
121     })();
122 }();
(责任编辑：admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
最新评论 进入详细评论页>>
栏目列表
推荐内容
热点内容

Powered by DedeCMS_V57_GBK_SP2 © 2004-2017 DesDev Inc.

Copyright © 2002-2017 建站学. 晨展科技 版权所有 Power by DedeCms  豫ICP备18028807号-1