Just is here--恰恰在这里 » Ajax http://ishere.cn Jena's blog Sat, 14 Jan 2012 07:51:41 +0000 en hourly 1 http://wordpress.org/?v=3.3 Ajax and JSON http://ishere.cn/2008/07/11/ajax-and-json.html http://ishere.cn/2008/07/11/ajax-and-json.html#comments Fri, 11 Jul 2008 14:20:32 +0000 jena http://www.aobodo.com/?p=172 Continue reading →]]> 关于JSON，是很久以前就听说了，但是一直没有真正的去研究，去使用。

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

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

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

数据库里有４W条记录，通过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，呵呵，或许会有这一天。

]]> http://ishere.cn/2008/07/11/ajax-and-json.html/feed 0 MaiMaiJ Live Messenger[Beta1.0] http://ishere.cn/2008/06/26/maimaij-live-messengerbeta10.html http://ishere.cn/2008/06/26/maimaij-live-messengerbeta10.html#comments Thu, 26 Jun 2008 16:08:12 +0000 jena http://www.aobodo.com/?p=165 经过几天的努力，MaiMaiJ Live® Messenger已经初具模型了，运用创新的Ajax和灵活的XML，实现WEB方式的及时互动交流！

发几张图上来，晒晒先！

]]> http://ishere.cn/2008/06/26/maimaij-live-messengerbeta10.html/feed 0 成功实现ajax,xmlhttp跨域访问 http://ishere.cn/2007/01/15/ajax-xmlhttp.html http://ishere.cn/2007/01/15/ajax-xmlhttp.html#comments Mon, 15 Jan 2007 02:11:23 +0000 jena http://news.aobodo.com/?p=105 Continue reading →]]> 其实这篇文章是那篇YAHOO!天气预报的后续,因为天气预报是利用XMLHTTP实现的,而XMLHTTP存在跨域访问的问题,在还没本篇文章之前,我直接通过静态的javascript来获取数据,在本机测试是正常的,但是放到服务器上就不行了,提示没有访问权限,百度了一下,原来已经有好多人遇到了这问题—–XMLHTTP跨域访问.不过以前我用ASP在服务器上是可以实现数据获取的,于是我就想是不是可以先利用ASP获取到数据,然后再用javascript获取ASP收到的数据呢,我试验了一下,结果是可行的. [smile] !~

好高兴,这个天气预报终于是圆满的解决了.

附代码:
weather.asp页

<%
p = “http://weather.cn.yahoo.com/weather.html?city=%E7%83%9F%E5%8F%B0″
Response.BinaryWrite ZQcnGet(p)
Response.Flush

Function ZQcnGet(url)
Set Retrieval = CreateObject(“Microsoft.XMLHTTP”)
With Retrieval
.Open “Get”, url, False, “”, “”
.Send
ZQcnGet = .ResponseBody
End With
Set Retrieval = Nothing
End Function
%>

weather.js页面

// JavaScript Document
/*
================
Yahoo!天气预报
Jena.want [迦楠]
http://www.ishere.cn [在这里,迦楠的BLOG]
Last Edit:2007.01.15 解决跨域访问的问题.
================
*/
var cDOMtype = ”;
if (document.getElementById)
{
cDOMtype = “std”;
}
else if (document.all)
{
cDOMtype = “ie4″;
}
else if (document.layers)
{
cDOMtype = “ns4″;
}

// #############################################
// function to emulate document.getElementById
function _$$(idname){
return fetch_object(idname);
}
function fetch_object(idname)
{
switch (cDOMtype)
{
case “std”:
{
return document.getElementById(idname);
}
break;

case “ie4″:
{
return document.all[idname];
}
break;

case “ns4″:
{
return document.layers[idname];
}
break;
}
}

function get_weather(){
if(_$$(‘weatherook2′)){
_$$(‘weatherook2′).innerHTML = “<marquee behavior=”slide”>The data is loading…</marquee>”;

var xml;
if (window.XMLHttpRequest) {
xml=new XMLHttpRequest();
}else if (window.ActiveXObject){
xml=new ActiveXObject(“Microsoft.XMLHTTP”);
}

xml.onreadystatechange = function(){
if(xml.readyState == 4){
if ( xml.status == 200 || xml.status == 304 ){
_$$(‘weatherook2′).innerHTML = get_content(xml.responseText,’<div class=”dt_d”>’,'<div class=”l2″>’);
}
}

}

xml.open(“GET” , uPath + “weather.asp” ,false);
xml.setRequestHeader(“If-Modified-Since”,”Tus, 9 Jan 2007 09:17:54 GMT”);
xml.send(“”);
}else{
alert(‘invalid page id’);
}
}
function get_content(str,starM1,starM2){
var starP,endP;
if(str){
starP = str.indexOf(starM1);
endP = str.indexOf(starM2)-1;
}
return str.substring(starP,endP);
}

window.onload = get_weather ;

weather.html页

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
<link href=”weather.css” rel=”stylesheet” type=”text/css” media=”screen” />
<script language=”javascript”>
var uPath = ”;
</script>
<script language=”javascript” src=”weather.js”></script>
</head>

<body>
<h3>YAHOO!天气预报</h3>
<div style=”width:130px”><div id=”weatherook2″ class=”map_cnt2″></div></div>
</body>
</html>

]]> http://ishere.cn/2007/01/15/ajax-xmlhttp.html/feed 0