一. JSON相关
JSON相关资料 http://www.json.org/;
用JSON替代XML作为一种数据交换格式有很多优点,而且很多语言现在都有处理JSON的扩展,可以直接将集合转成JSON格式,对于JSON的优点请大家自己查阅,下面我们举一个JSON的例子.
建立一个测试目录 /json 和HTML文档test.html 和HTML文档 jsondata.html 将 bingo.js 保存到测试目录,可以用地址 http://127.0.0.1/json/test.html来访问test.html, jsondata.html 内容如下:
{
"channelName" : "国内新闻" , "channelID" : "66" , "siteName" : "bingo" , "isHot" : false , "puber" : null,
"newsList" : [
{
"title" : "Alexa,你知道我在“诓”你吗?" ,
"linkUrl" : "http://home.donews.com/donews/article/1/118622.html" ,
"description" : "排名技术实力雄厚,想排第几就第几。业界独家技术,可以提升二级域名比例和国家比例(二级域名需要另外收费)。 Alexa 排名经验丰富,算法精准, Alexa 排名提高曲线真实自 ... "
}, {
"title" : "流言甚嚣尘上 Google即将推出自家手机" ,
"linkUrl" : "http://www.enet.com.cn/article/2007/0907/A20070907814205.shtml" ,
"description" : "宏达电HTC亲自操刀制作该款Gphone。不过HTC却对此事保持相当低调的态度,关于传言也无法正式得到证实。 网络巨擘Google要推出自有品牌手机的谣传,根本不知道是真是假,但是却已经在网络上传的沸沸扬扬,一副煞有其事的样子。许多国外媒体和相关网站,针对该项传言去询问的结果是,Google机密到家,保持神秘、维持不反对也不承认的中立态度。"
}, {
"title" : "马化腾:将所有互联网商业模式都纳入腾讯" ,
"linkUrl" : "http://b2b.netsun.com/detail--1380106.html" ,
"description" : "马化腾的胃口足够大:“无线(增值)有100多亿元的盘子,我们必须进去;网游有70多亿的盘子,腾讯不能放弃;广告有30多亿的盘子,腾讯不能放弃;腾讯不能放弃的还有搜索、电子商务。”"
}
]
}
上面的例子中文没有用UNICODE编码,在实际使用中可能会遇到问题,请参考: 郁闷的IE对中文字符串的支持,当然,很多扩展已经支持自动处理编码问题.
二. 处理JSON
JSON处理并不复杂,但是涉及的问题比较多,比如容错、压缩、结构判断、交互信息等,所以一个完整的处理过程是比较烦琐的,json.org上有一些处理方法。
在test.html 里引用bingo.js并加入下面的代码,这些处理过程是简化过的,为了初学者能尽快上手,大家在实际使用的使用请查阅些相关的资料:
function getJSON(){
AJAXCALL("jsondata.html",doGetJSON);
}
function doGetJSON(jsondata){
var data=eval("("+jsondata+")");
var head=$c();
var headTitle=$c("span");
bindStyle(headTitle,{fontSize:"20px",marginRight:"30px"});
headTitle.innerHTML=data.channelName;
var headSite=$c("span");
bindStyle(headSite,{fontSize:"11px",color:"#CCC"});
headSite.innerHTML=data.siteName;
head.appendChild(headTitle);
head.appendChild(headSite);
var newsList=$c();
for(var i=0;i<data.newsList.length;i++){
var newsTitle=$c("a");
bindStyle(newsTitle,{display:"block",padding:"4px 0px 3px 10px"});
newsTitle.innerHTML=data.newsList[i].title;
newsTitle.title=data.newsList[i].description;
newsTitle.href=data.newsList[i].linkUrl;
newsTitle.target="_blank";
newsList.appendChild(newsTitle);
}
$("json_effect").innerHTML="";
$("json_effect").appendChild(head);
$("json_effect").appendChild(newsList);
}