emu in blogjava

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  170 随笔 :: 103 文章 :: 1052 评论 :: 2 Trackbacks


本来一直觉得这么基础的功能是没有什么好拿出来讲的,今天和网友聊天发现,由于缺乏对json的理解,很多人都还在继续带着自己的项目往ajax的方向进军,而完全不知道有一个好得多的替代品。所以写下这么个demo给大家参考:

<HTML>
<HEAD>
<title>异步json例子</title>
<SCRIPT LANGUAGE="JavaScript">
function test(){
    
var s = document.createElement("SCRIPT");
    s.id
="cgi_emotion_list"
    document.getElementsByTagName(
"HEAD")[0].appendChild(s);
    s.src
="http://g2.qzone.qq.com/fcg-bin/cgi_emotion_list.fcg?uin=123456";
    test
=function(){}; 
}
function visitCountCallBack(data){
    document.getElementsByTagName(
"HEAD")[0].removeChild(document.getElementById("cgi_emotion_list")); 
    
for(var i in data){
        
var e =document.getElementById(i);
        
if(e) e.innerHTML=data[i];
    }
}
</SCRIPT>
</HEAD>
<BODY>
<button onclick="test()">test</button><BR>
历史访问人数:
<span id="visitcount" style="color:#6600CC">点击test按钮获取数据</span><BR>
今天访问人数:
<span id="dayvisit" style="color:#CC6633">点击test按钮获取数据</span><BR>
阳光指数:
<span id="sun" style="color:red">点击test按钮获取数据</span><BR>
爱心指数:
<span id="love" style="color:violet">点击test按钮获取数据</span><BR>
雨露指数:
<span id="rain" style="color:blue">点击test按钮获取数据</span><BR>
营养指数:
<span id="nutri" style="color:green">点击test按钮获取数据</span><BR>
花匠级别:
<span id="gardener" style="color:#996633">点击test按钮获取数据</span>
</BODY>
</HTML>

这里请求的资源是
返回的是类似这样的一个js语句 :
visitCountCallBack({"visitcount":1941,"dayvisit":4,"spacemark":0,"markchange":0,"sun":200,"love":14,"rain":200,"nutri":200,"level":4,"gardener":11});


科普一下:
相比xml,json的好处是:天生的跨浏览器(比如我的这个demo应该可以跨所有支持dhtml的浏览器而不需要任何修改),客户端解析代价(CPU和内存)非常小,非单根结构(xml是单根结构),标记名只出现一次(xml的标记名在大多数情况下都需要出现两次:<tag>...</tag>,因此浪费了很多流量)

这种方式获取数据的主要缺点是只支持get方式请求,另外跨编码的时候要注意一下。xml文件的第一行就可以声明文件的编码:encoding="...",因此同一个xml源即使编码经常换来换去(一般不会有人这么做啦)也没有什么关系,而json的数据包装中没有类似的标记来声明自己,因此必须要实现约定好编码,不能随意变换,在跨编码(json资源的编码和引用页面的编码不同)调用的时候要指定script的charset为约定的charset。非要经常变换编码的话就要参数化charset,每次变换的时候用某种形式通知到脚本去更改charset。一般的应用不会有这么变态的需求啦,一般是在做网站国际化的时候,在做数据切割的过程中,才会出现一个数据源有两种编码需要处理的情况。

此外很多人并不知道json可以异步获取,这个例子很重要的一点是展示了如何异步获取json。
posted on 2007-05-14 19:37 emu 阅读(10138) 评论(23)  编辑  收藏

评论

# re: json的例子 2007-05-15 09:17 Java初心
dwr也能很好的实现这个功能,不知孰优孰劣  回复  更多评论
  

# re: json的例子 2007-05-15 17:06 dennis
json跟ajax矛盾吗?不矛盾吧,你可以使用xml做数据传输,也可以使用json做前后台数据传输,各有各的优缺点  回复  更多评论
  

# re: json的例子 2007-05-16 09:55 chinalu
同意部分:json比xml轻巧,在小对象的传输中具有很大的优势,简但实用,
不同意部分:只支持get方式请求?这个问题好像是楼主没有真正搞清楚json是什么吧;
跨编码?异步获取是json独有的吗?
还是没搞清楚json是什么吧。

按我的理解,json只是一种数据封装,组织的形式,xml也是一种数据封装组织形式,只是两者的形式不一样罢了  回复  更多评论
  

# re: json的例子 2007-05-16 12:22 AM
json只是一种数据封装,组织的形式,xml也是一种数据封装组织形式,只是两者的形式不一样罢了
同意。
这篇是不是该改一下, 小心误人。  回复  更多评论
  

# re: json的例子 2007-05-16 19:08 emu
to: dennis & AM
不觉得会误人。我的意思是,当你决定用ajax的时候,你要知道还有个json,你要知道他们各自的优点在哪里,知道你其实在进行的是怎样的取舍。
to:chinalu
我明白你的意思,json只是一个数据描述方式,并不一定要用我的方式来获取的,当然也可以用xmlhttp甚至form post来获取。
我在这里主要是展现一种不用xmlhttp的,异步获取json数据的方法。
至于跨编码,我的意思是,json跨编码的时候比较麻烦,直接用xml就简单得多了,因此这是json的一个劣势。可能你没有仔细看清。
json和xml确实都是数据封装的形式,但是除了形式不同之外还有各自的优劣,运用之妙,存乎一心。举个最简单的例子,我贴出来的这段代码放到任何一个网站(域名)上,在任何浏览器上都可以从 http://g2.qzone.qq.com 域名上获取回来一串数据,如果用xml,你试试看能不能跨得了域?  回复  更多评论
  

# re: json的例子 2007-06-11 20:39 zkjbeyond
http://agiletao.com/read.php?tid=958  回复  更多评论
  

# re: json的例子 2007-06-27 11:16 永恒
觉得json绝对替代不了xml,但在目前javascript为主流客户端开发脚本的情况下,xml是绝对比不上json的  回复  更多评论
  

# re: json的例子[未登录] 2007-08-29 21:04 huangyi
@emu
用你这种方法做跨域拉取 xml 不也一样吗!
visitCountCallback(parseXML("<...>"));

你还是没有能深入领会 json 与 xml 只是形式上不同的内在含义啊。  回复  更多评论
  

# re: json的例子 2007-08-31 15:55 emu
@huangyi
你的意思是用js返回xml字符串再parse吗?当然是可以的,我们实际应用中也有采用这样的方式。

补充一下,我同意大多数情况下xml和json主要是数据包装形式上的不同,但是我认为json和xml并不只是形式上不同,就讲最基本的数据结构吧,xml必需是单根结构的,json没有这个限制。也就是说,下面这个基本的json数据,不包一层皮是无法转换成为对应的xml表现的:

{a:1,b:2,c:3}

当然你可以说包上一层皮以后也没什么不同

<data><a>1</a><b>2</b><c>3</c></data>

不过要注意到,这个xml转换为对应的json的时候应该变成这样:

{data:{a:1,b:2,c:3}}

再举一个例子:

{toString:function(){return "abc"}}

可以转成<toString>function(){return &quot;abc&quot;}</toString>吗?试试把这个xml转回对应的json?

当然,稍微做一点点妥协和变化,我们确实是可以掩盖这些不同,让他们大多数时候可以表达几乎等同的信息:

<toString type="function">function(){return &quot;abc&quot;}</toString>  回复  更多评论
  

# re: json的例子 2007-09-04 15:53 nickey's home
来个异步调用的方法总结吧.  回复  更多评论
  

# re: json的例子 2007-09-19 16:46 kuan
多点几点test的时候,会不会重复生成script标签的问题,有必要优化吗?  回复  更多评论
  

# re: json的例子 2007-09-20 21:38 emu
有必要。这里是我疏忽了。这样如何:
function test(){
    var s = document.createElement("SCRIPT");
     s.id="cgi_emotion_list";
    document.getElementsByTagName("HEAD")[0].appendChild(s);
    s.src="http://g2.qzone.qq.com/fcg-bin/cgi_emotion_list.fcg?uin=123456";
     test=function(){};
}
function visitCountCallBack(data){
     document.getElementsByTagName("HEAD")[0].removeChild(document.getElementById("cgi_emotion_list"));
    for(var i in data){
        var e =document.getElementById(i);
        if(e) e.innerHTML=data[i];
    }
}  回复  更多评论
  

# re: json的例子 2007-10-08 18:56 nap
看了这个文章我感觉好象变魔术啊哈哈,又学了一点。

不过callback方法中那个删除script的代码看起来很不美观啊,不知道各位有没有什么好的办法解决一下?直接在页面上事先写好空的script然后改它的src?

还有我想问一下emu,如果按了test按钮之后,想在数据加载期间出现loading效果,应该是不行的,有办法解决吗?  回复  更多评论
  

# re: json的例子 2007-10-10 13:52 emu
在test函数里面加就可以了嘛:
for(var ar=document.getElementsByTagName("SPAN"),i=0;i<ar.length;i++)ar[i].innerHTML="loading..."
还是你想要出来沙漏图标?还是别的什么“loading效果”?
  回复  更多评论
  

# re: json的例子 2007-10-11 18:05 nap
谢谢你的回复,我明白了。
我其实我想要的就是这个效果,按下按钮的时候显示个loading的字样就可以了。有点菜,见笑了!嘿嘿。  回复  更多评论
  

# re: json的例子 2007-11-08 15:16 A1
@nap
或许设置script的onreadystatechange事件可以实现你要的loading progress 指示功能。  回复  更多评论
  

# re: json的例子[未登录] 2008-01-24 16:06 jack
可以用预先定义script标签的方式 优化 appendChild 和remove的过程
我写了个demo的部分代码:
<script language=javascript id="aScript" src=""></script>

js:aScript.src = "http://10.2.76.62/json/JSONData.aspx?stamp=" + new Date(); //不需要浏览器缓存时的策略  回复  更多评论
  

# re: json的例子[未登录] 2008-01-24 16:07 jack
另外想问下楼主,
不知道用script 这种方式实现异步 跟其他方式比 有什么缺点 ?  回复  更多评论
  

# re: json的例子 2008-01-26 10:54 emu
其他方式的异步指的是什么呢?用XHR异步获取script字符串后eval或者execscript吗?我前面有说过了,好处很多,天生的跨浏览器,客户端解析代价非常小,非单根结构,标记名只出现一次。也许还有其他的,暂时没想到。
或者你想研究其他异步化获取数据的方式?iframe方式我觉得没有什么竞争力了,还有些什么方式一时没想出来。  回复  更多评论
  

# re: json的例子 2009-02-05 13:48 IT公司面试手册
这个还得有待研究  回复  更多评论
  

# re: json的例子 2009-04-24 15:35 王银龙
s.src="http://g2.qzone.qq.com/fcg-bin/cgi_emotion_list.fcg?uin=123456";
这行有错呀!
唉。。。
老大帮帮忙!
语法错误  回复  更多评论
  

# re: json的例子 2010-11-01 15:24 spyking945
@AM
太正确了,
不知道的还以为json是别的什么操作方法呢  回复  更多评论
  

# re: json的例子 2011-10-10 10:38 hqkjack
被科普了一下  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: