Ajax and JSON

关于JSON,是很久以前就听说了,但是一直没有真正的去研究,去使用。

关于AJAX,也是很久以前就听说了,而且一直也在研究,在使用。

关于AJAX and JSON,是刚刚开始研究和使用。

JSON,JavaScript Object Notation, 我理解为Javascript 对象标记,可能不太准确,但是这样有助自己理解和使用。高人们都说JSON使用起来要比XML更灵活,更方便,是吗,带着这样的疑问,自己写了个小例子。

数据库里有4W条记录,通过ASP读取出来,再用JSON的ASP类生成JSON格式数据:

json.asp:

Server.ScriptTimeOut  = 500000
Response.Buffer = True
Response.ContentType = “application/json”

Dim Conn
Set Conn=Server.CreateObject(“Adodb.connection”)
Conn.Open “Provider = Microsoft.Jet.OLEDB.4.0; Data Source =D:TempIPCountry.mdb”

QueryToJSON(Conn, “SELECT Top 1500 country, countrylong FROM ip2country”).Flush

Response.ContentType = “application/json”这句话指定了内容输出类型为JSON,这样,当AJAX获取以后,就可以直接作为对象来对待,进而直接使用,不用再eval了。

json.html

<div id=”outer”  style=” position:relative;line-height:22px; width:auto; padding:20px; height:300px; border:1px solid #006699; overflow:auto;”></div>
<script>
getJson = function(){
new Element.update(‘outer’,’Init…’+ new Date().toJSON() + ‘<br>’);
new Ajax.Request(‘json.asp’,{
onCreate:function(){new Insertion.Bottom(‘outer’,’Create:’+ new Date().toJSON() + ‘<br>’);},
onLoading:function(){new Insertion.Bottom(‘outer’,’Loading:’+ new Date().toJSON() + ‘<br>’);},
onLoaded:function(){new Insertion.Bottom(‘outer’,’Loaded:’+ new Date().toJSON() + ‘<br>’);},
onSuccess:function(trans){
new Insertion.Bottom(‘outer’,’Start Insert:’+ new Date().toJSON() + ‘<br>’);
var json = trans.responseJSON;
for(var i=0;i<json.length;i++){
new Insertion.Bottom(‘outer’,'<div style=”border-bottom:1px dashed #cccccc;”><img src=”http://image.test.com/images/flags/’+json[i].country+’.png”> ‘+ json[i].countrylong +'</div><div></div>’);
$(‘outer’).scrollTop = $(‘outer’).scrollHeight;
};
new Insertion.Bottom(‘outer’,’End Insert:’+ new Date().toJSON() + ‘<br>’);
$(‘outer’).scrollTop = $(‘outer’).scrollHeight;
}
});
}
</script>
<button onclick=”getJson()”>Get Json</button>

JS的类库我使用的是prototype的,里面已经封装了对JSON对象的处理方法,所以,只用responseJSON这一方法就可以获得返回来的JSON对象。接下来对获取的数据进行解析,这里的解析也没有用JSON官方的类包,只是用JS本身的规范对已确定的JSON数据格式进行处理,把内容指定到该指定的地方,就可以了,很简单。

在执行效率上,比使用XML确实快了一些,因为对数据的处理不再需要DOM对象,而是使用JS本身规范就可以了,这样一来就省了一部分时间,整体感觉上还是不错。

只是一个简单的测试,对JSON的理解可能也太过肤浅,以后随着项目的需要,肯定还会接触,还会更深的去理解和使用它,另外,在网上看到有评论说JSON可能会取代XML,让AJAX变成AJAJ,呵呵,或许会有这一天。

Leave a Comment

Your email address will not be published.

*