回复:(xiaopiao)回复:(ming206)人呢?发给我份啊...
看了一下
主要是这个文件
http://www.mipang.com/places/place_v2.v15.js
不过把回车和多于空格都去掉了,处理一下还是能看的,文件里提示需要用到
http://www.mipang.com/js/global.v6.js 中的函数
大致浏览了一下这个文件,他还作了查询缓存,同一关键词多次查询都在本地作了缓存,速度很快
用到的css在这个文件 http://www.mipang.com/css/common_v2.v11.css
就是这段:
#eps .pl { list-style:none;padding:5px;margin:0; }
.ac {padding:0px 0;font-family:Arial;}
.ac span {
text-decoration:none;
display:block;
cursor:default;
padding:0 10px 0 10px;
font-size:12px;
white-space:nowrap;
}
.ac span.sel {background-color:#9fbfff;}
.ac span b {}
input.valid { background:url(/images/check-small.gif) no-repeat 100% 50%;background-color:#fff;}
input.pending { background:url(/images/spinner.gif) no-repeat 100% 50%;background-color:#fff;}
input.error { /*background:url(/images/check-small.gif) no-repeat 100% 50%;*/ background-color:#ff5028;}
后台查询的地址是 http://www.mipang.com/places/place_search_xml.ue
返回的应该是xml代码,不过看了一下,其实是返回xml包裹起来的JSON代码
比如浏览器输入,查询shangh(上海)
http://www.mipang.com/places/place_search_xml.ue?action=Search&q=shangh
结果是
<?xml version="1.0" encoding="UTF-8"?>
<pps version="0.1" code="0"><places><![CDATA[[[3,3],[[2030,'上海','Shanghai','','中国'],[5606,'上杭县','Shanghang','','龙岩市'],[5894,'商河县','Shanghe','','济南']]]]]></places></pps>
把JSON代码嵌在CDATA段中返回的,不知道为什么这样设计而不是直接返回JSON代码,不过效率影响应该非常小,可能跟他原始接口设计有关。
他是UTF8编码的,查询中文 "上海"
http://www.mipang.com/places/place_search_xml.ue?action=Search&q=%E4%B8%8A%E6%B5%B7
结果是
<?xml version="1.0" encoding="UTF-8"?>
<pps version="0.1" code="0"><places><![CDATA[[[6,6],[[2030,'上海','Shanghai','','中国'],[3308,'上海交通大学','SJTU,上海交大','','上海'],[2543,'上海植物园','','','龙吴路'],[3003,'上海理工大学','','','杨浦区'],[2587,'上海野生动物园','','','南汇'],[6530,'旧香港上海银行纪念馆','','','长崎']]]]]></places></pps>
试了几下,最多返回100条结果,因该是数据库作了优化工作,查询很快
看了他网站上用了很多很人性化的Ajax设计,感觉都非常好用
http://www.mipang.com/places/ 页面上 点地图出来的效果很cool,很方便,貌似也作了缓存,点同一个地方没有等待效果。
http://www.mipang.com/places/2030/map 点放大地图也出来一个很酷的效果
注册一下仔细研究了一番,
http://www.mipang.com/blog/post 发文叶面的图文并茂插入也很不错,核心用的应该是FCKeditor。
http://www.mipang.com/photos/upload_v2 照片上传也很人性化,不同于传统的多文件同时递交,他是自动一个个上传的,避免了一次上传多张照片的容量限制,思路不错
感觉是个用心在做的网站,他把Ajax和JS效果都用到了点子上,没有很多网站Ajax滥用的毛病,不错,值得学习。