论坛首页 Web前端技术论坛

Google AJAX Search API+TAG=美味的站点?(一)

浏览 5050 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2006-12-29  



摘要:

del.icio.us提供了多种可重用的数据格式。而它提供了通用API访问和类似PHP的输出格式,使这些数据也可以被JavaScript开发者将 其作为JSON格式所使用。Google AJAX Search API提供一些简单的web对象。如何把这两项技术结合在一起呢?Google AJAX Search API+TAG=美味的站点?由于本文长达25页,详细阅读请下载原文和源代码。

原文地址http://www.matrix.org.cn/resource/article/2006-12-20/c5a99539-8ffb-11db-ab77-2bbe780ebfbf.html

前言

        del.icio.us提供了多种可重用的数据格式。而它提供了通用API访问和类似PHP的输出格式,使这些数据也可以被JavaScript开发者将其作为JSON格式所使用。

        Google AJAX Search API提供一些简单的web对象:它们执行建立在各种Google服务(页面搜索、本地搜索、视频搜索、Blog搜索、新闻搜索)之上的内嵌(inline)搜索。

        如何把这两项技术结合在一起呢?Google AJAX Search API+TAG=美味的站点?由于本文长达25页,所以下面仅列出了一些摘要性段落,详细阅读请下载原文和源代码:
  

什么是Google AJAX Search API ?

image
图-1 这就是Google AJAX Search API?


        Google AJAX Search API是提供在页面和web应用中嵌入Google Search的JavaScript代码库。当然像其它Google开发API相同,在使用它之前,你首先需要注册一个API key

        Google AJAX Search API提供一些简单的web对象:它们执行建立在各种Google服务(页面搜索、本地搜索、视频搜索、Blog搜索、新闻搜索)之上的内嵌 (inline)搜索。如果你设计页面是为了帮助用户建立内容(比如信息板、blog等),而这个API可以设计成:通过允许它们直接把搜索结果复制到它 们的信息中的方式来支持前面的这些活动。

        Google AJAX Search API是最新发布的,它的特性被广泛地用户使用,你可以通过加入Google AJAX Search API讨论组来进行反馈和技术讨论。

示例

        注意:这里的示例仅提供了相关的Javascript代码而并非全部的HTML文件。你可以将这些代码插入到HTML文件或者通过点击下载链接下载完整的HTML文件。

基本功能
        下面的代码建立了一个搜索控制,并配置它用以完成跨越本地搜索、页面搜索、视频搜索、blog搜索的搜索,然后将搜索控制放置在页面中。
        ...
GSearcherControl 绘制(Draw)模式
        ...
搜索者对象(Searcher Objects)
        ...
搜索者选项(GsearcherOptions)
        ...
控制展开模式
        ...
保持搜索结果
        ...
设置站点限制
        ...
搜索控制回调方法
        ...
自定义Search Form
        ...
高级的商标用法
        ...
附加示例
        ...

Troubleshooting

        如果你在编写代码时遇到问题,请参考下面的步骤找出、修正问题:
        image确认你的API key是有效的。
        image查看输入的代码。请记住JavaScript是一种大小写敏感的语言。
        image使用JavaScript调试器。在Firefox中,你可以使用JavaScript console或是Venkman Debugger。在IE中,你可以使用Microsoft Script Debugger
        image搜索AJAX Search API讨论组。如果你找不到问题的答案,请将你的问题和能
        image重现问题的页面链接发表在讨论组。
        image查看来自第三方开发者的其它资源。

API回顾

        Google AJAX Search API由下面的类组成:

          imageGSearchControl:提供用户接口和对搜索者对象的控制,每个搜索者对象被设计用来执行指定类型的搜索并返回相应类型的结果(网页搜索、本地搜索等)。
          imageGSearch:所有搜索者类的基类,它定义了所有搜索者服务必须实现的接口。
          imageGResult:用来封装搜索者对象产生的搜索结果的基类。
          imageGsearchOptions:用于在将搜索者对象添加到搜索控制时,配置搜索者对象的行为。
        ...

使用JSONDishy轻松集成美味书签

什么是Dishy?

image
图-4 马赛克的魅力(Dishy)


        Dishy是一种对del.icio.us JSON REST API 的JavaScript封装。在使用时你所需做的事首先是将它包含到你的HTML文档中
        ...

Dishy能做什么?

        社会书签网站:del.icio.us,提供了多种可重用的数据格式。而它提供了通用API访问和类似PHP的输出格式,使这些数据也可以被JavaScript开发者将其作为JSON格式所使用。

        Dishy:使用del.icio.us提供的JSON REST API来获得关于Tag的JSON格式的工具。

        Dishy与tag一起协力是用户获得以下益处:
        1.你可以接收你的链接或者tag数据,而不是用服务器端代理。
        2.获得的数据被自动缓存。
        3.在页面被装载后根据需要摘取数据,并且没有增加页面的负担。
        4.由于搜索引擎不愿索引那些显示你的页面的相关性的del.icio.us链接这类的事情不再发生,你的pagerank将会提高。

Dishy属性和方法
        ...
下载Dishy
        ...
Dishy示例
        ...

改进Dishy的engage方法

image
图-5 “进化”才刚开始

        Dishy的核心方法engage:使用提供的参数访问使用del.icio.us JSON REST API的URL,然后执行返回的字符串。
        ...

使用Tags+Search模式丰富页面的相关性

image
图-6 内容的关联性是提高UE的重要元素


Tags+Search模式

        Tags+Search模式是指利用页面中的Tags,对与Tags相关的资源进行搜索、罗列。
使用Dishy+AJAX Search API实现Tags+Search模式
        前提条件:为了方便后面的tag搜索工作,首先要将文章的标题作为书签的description值提交到del.icoi.us。

        如何添加书签:我在《如何定制Roller blog》介绍了如何在blog中添加美味书签的方法,在页面上添加美味书签的过程应该与之类似。当然,你也可以使用程序在文章发布时自动将其信息提交到美味书签,此方法就留给大家思考吧。

         实现过程:我使用Dishy根据文章标题找到此文章在del.icoi.us中相应的Tags,并对Tags中的多个tag进行随机抽取组成search 关键字,然后使用Google AJAX Search API对search 关键字进行搜索,并将搜索结果放到页面适合的位置(比如网站的sidebar)。这将大大增加页面的信息相关性。


具体实现第一步:增加Dishy对tag的过滤能力

        这里简要说一下如何结合Tags和Google Search两项技术。请注意:这里的代码使用到了prototype.js(1.4版),而JavaScript类使用了prototype(也被称为原型)的风格。...


具体实现第二步:封装Google AJAX Search API和页面request类
        ...
具体实现第三步:完成测试页面
        ...
具体实现第四步:与网站集成
        ...
   发表时间:2006-12-29  
挺不错的新闻稿,图文并貌,就是缺了具体技术内容的讲解,颇有bd7lx的风格。
0 请登录后投票
   发表时间:2006-12-29  
回复robbin同学:
由于本文长达25页,所以下面仅列出了一些摘要性段落,详细阅读请下载原文和源代码:
 
Google AJAX Search API+TAG=美味的站点.pdf        Dishy+Google AJAX Search API演示源代码
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics