用ajax+json连接yahoo搜索web service打造本地搜索引擎
今天写了一个demo,利用yahoo提供的Yahoo! UI Library调用search web service,实现本地搜索.下面是代码片断说明:
调用Yahoo! UI Library Connection Manager的必要代码:
JAVASCRIPT:
-
<!-- Namespace source file -->
-
<script src = "js/YAHOO.js"></script>
-
<!-- Connection Manager source file -->
-
<script src = "js/connection.js"></script>
查询表单
HTML:
-
<form id="form1" name="form1" action="">
-
关键字
-
:
-
<input type="text" id="query" name="query" value="photo" />
-
<input type="button" name="Submit" value="搜索" onclick="searchIt(document.getElementById('query').value)" />
-
</form>
yahoo提供的的web service,可以直接以json的格式返回数据,也支持xml格式,这里采用json
JAVASCRIPT:
-
<script type="text/javascript">
-
//yahoo提供的的web service
-
var searchUrl = 'http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&results=4&output=json&query=';
-
-
var resultWin = document.getElementById('result');
-
-
var responseSuccess = function(o){ //调用成功后执行的函数
-
//transaction success case logic
-
eval('var rs =' + o.responseText);
-
var tmp;
-
var j = 0;
-
-
//这里以js格式化数据内容
-
var content = '
-
<ul>';
-
for(i in rs.ResultSet.Result) {
-
tmp = rs.ResultSet.Result[i];
-
content+= '
-
<li class="cols"><a target="_blank" href="' + tmp.ClickUrl + '"><img src="' + tmp.Thumbnail.Url + '" width="60" border="0" alt="' + tmp.Title + '"/></a></li>
-
';
-
-
if(j == 4) {
-
j = 0;
-
content+= '
-
<div class="rows"></div>
-
';
-
} else {
-
j++;
-
}
-
}
-
content+= '</ul>
-
';
-
-
resultWin.innerHTML = content;
-
document.getElementById('debug').innerText = o.responseText;
-
}
-
-
//callback定义,见<a href="http://developer.yahoo.net/yui/connection/index.html">http://developer.yahoo.net/yui/connection/index.html</a>
-
var callback =
-
{
-
success:responseSuccess
-
}
-
-
//查询
-
function searchIt(query) {
-
if(!query)
-
return;
-
resultWin.innerHTML = '查找ing.....
-
<img src="images/searching.gif"/>';
-
YAHOO.util.Connect.asyncRequest('POST', searchUrl + query, callback, null);
-
}
-
-
</script>
最开始使用了上面的代码片段,在本机能够成功调用yahoo的web service,但是经常报跨站警报,相当不便.
于是采用代理模式,写了个很简单的proxy.php,如下:
PHP:
-
<?php
-
$searchUrl = 'http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&results=4&output=json&query=';
-
if(!empty($_POST['query']))
-
echo file_get_contents($searchUrl . $_POST['query']);
-
?>
而js部分只要做个小小调整
JAVASCRIPT:
-
var searchUrl = 'proxy.php';
-
-
..................................
-
-
//查询
-
function searchIt(query) {
-
if(!query)
-
return;
-
resultWin.innerHTML = '查找ing.....
-
<img src="images/searching.gif"/>';
-
YAHOO.util.Connect.asyncRequest('POST', searchUrl, callback, 'query=' + query);
-
}
最后就以这段简单的代码实现了本地搜索,你可以在此demo的基础上进一步完善,例如翻页,调整每页显示的数目等等,具体参数请参考http://developer.yahoo.net/search/local/V3/localSearch.html
解压密码:www.ooso.net
demo下载
参考文档:
http://developer.yahoo.net/yui/connection/index.html
http://developer.yahoo.net/php/howto-parseRestPhp.html
作者: Volcano 发表于March 7, 2006 at 5:18 pm
刘 于 2006-03-11 @ 09:10:34 留言 ：
请教一个问题,出现如下错误应该怎样解决:
—————————
错误
—————————
出现了运行时间错误。
是否要进行调试?
行: 306
错误: 系统错误: -1072896658。
—————————
是(Y) 否(N)
—————————
volcano 于 2006-03-11 @ 10:26:32 留言 ：
是运行上面的demo出现的错误?
刘 于 2006-03-11 @ 15:56:08 留言 ：
对, 没做改动,运行demo出现错误.
volcano 于 2006-03-12 @ 20:38:55 留言 ：
请问你的运行环境是?
我运行过的环境是:
apache2+php4.3/php5+ie6/firefox 1.07
刘 于 2006-03-13 @ 13:24:18 留言 ：
我运行的环境是
win2000 + apache2.0.5 + php4.3 + ie6/firefox1.0
这个报错是在IE下面报错的.
我的MSN lwter#hotmail.com (#替换成@)
刘 于 2006-03-13 @ 14:30:35 留言 ：
非常感谢volcano 的耐心指导.
关于这个错误, volcano找到了,这个链接是:
http://www.panoramio.com/blog/explorer-system-error-1072896658/
Michael 于 2006-07-11 @ 17:20:41 留言 ：
http://weblogs.asp.net/mschwarz/archive/2006/07/11/Yahoo_2100_-Web-Services-Request-and-AjaxPro-JSON-Parser-_2D00_-I-love-it_2100_.aspx
A great example on how to use Yahoo! JSON output.
» Ajax+PHP+YUI手工制作rss阅读器 - 某人的栖息地 于 2007-07-05 @ 08:06:48 留言 ：
[...] 用ajax+json连接yahoo搜索web service打造本地搜索引擎Pear::Pager和AJAX的整合应用Connection Manager Of YUI用php5来赚大钱试用google search的Ajax api用php将rss转化为json格式php+ajax文件上传进度条当ajax遭遇系统错误: -1072896658Rasmus Lerdorf: 无框架式的PHP MVC 框架phpmore vol6 发布 [...]