用 Ajax 和 del.icio.us 创建自己的信息空间(1)

最新推荐文章于 2025-05-01 20:40:11 发布

phantomhu

最新推荐文章于 2025-05-01 20:40:11 发布

阅读量392

点赞数

分类专栏： AJAX 文章标签： ajax 读书 api 浏览器 div delete

AJAX 专栏收录该内容

31 篇文章

订阅专栏

本教程介绍如何利用Ajax技术和del.icio.us Web API创建一个交互式的书签管理页面，用户可以在该页面上直接管理del.icio.us帐户中的书签和标记。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开始之前

如果您是 Ajax 开发人员，希望通过在 Ajax 应用程序中访问 Web API 和解析 XML，设计更好的 Ajax 页面，那么本教程正好适合您。具体地说，我们将访问 del.icio.us Web API，对与 del.icio.us 帐户相关联的链接和标记进行管理。

关于本教程

本教程讲解如何使用 Ajax 和一个 PHP 代理脚本访问 del.icio.us Web API，这些访问都在一个 “超级页面” 上进行，这个页面的效果就像是哈利波特读书俱乐部的主页。这个页面将放在因特网上，允许任何人访问，这样您的读书俱乐部就可以吸引新成员加入（当然，您可能希望建立注册机制，以便控制能够在页面上添加链接的用户）。del.icio.us API 使开发人员能够创建定制的书签管理应用程序，允许用户（比如您自己和读书俱乐部的成员）在俱乐部的主页上直接管理俱乐部 del.icio.us 帐户中的标记和书签，而不需要访问 del.icio.us 站点。

本教程包含以下内容：

学习 del.icio.us 的概念。
学习可用的各种 API 并在浏览器中测试它们。
使用大量 div 标记设计一个没有表格的超级 Web 页面。
用 PHP 开发一个服务器端代理，用来处理 del.icio.us API 调用和网络冲浪。
解析 del.icio.us API 返回的 XML，并用解析后的数据修改 div 标记中的 HTML。
在超级页面上实现以下 del.icio.us API：
- tags/get —— 用于从 del.icio.us 帐户中获取标记
- tags/rename —— 用于修改标记的名称
- posts/add —— 用于在 del.icio.us 帐户中直接添加新的书签
- posts/get —— 用于从帐户中获取与所选标记相关联的书签
- posts/delete —— 用于删除帐户中的现有书签

这些 API 功能使您的读书俱乐部成员能够访问您创建的可定制 Web 页面，并通过这个页面向俱乐部的 del.icio.us 帐户中添加书签和标记。

前提条件

除了文本编辑器和浏览器之外，还需要 PHP 和 Web 服务器：

PHP —— 我们将用 PHP 实现代理。任何版本都可以。
Apache2 —— 建议使用 Apache2 HTTP 服务器作为 Web 服务器。

为了在 Windows® 上轻松地安装 Apache2 和 PHP 以及 MySQL（本教程不需要 MySQL），可以考虑使用 WampServer 的最新版本。

简介

del.icio.us 的创新之处在于，它改变了人们（尤其是 blog 作者）对他们的链接、blog 文章、喜欢的网站等设置书签的方式。本节简要概述 del.icio.us 是什么、它可以实现什么功能以及 Ajax 超级页面如何改进读书俱乐部的 del.icio.us 体验。

del.icio.us 的概念

del.icio.us 究竟是什么？简单地说，del.icio.us 是于 2003 年建立的一个社交性书签站点，它独立运行了两年之后，于 2005 年被 Yahoo! 收购了。实际上，如果在 del.icio.us API 中输入了错误的用户名和密码组合，就会进入图 1 所示的页面。

图 1. 失败的 del.icio.us API 授权

使用 del.icio.us 的主要好处之一是，可以随时随地保存新的书签并附带选择的标记，从而改进网络冲浪体验。这些标记（即关键字 ）是由一个单词组成的描述性标识符，比如 comedy、horror、romance、movie 和 novel。例如，如果一个页面描述一部有趣的电影，那么页面的链接可能有两个标记：comedy movie。这两个标记以空格分隔（这是输入标记时的一项要求）。请看一下 yoddler55 的 del.icio.us 帐户（本教程使用这个帐户进行测试）中的几个书签，见图 2。

图 2. 哈利波特读书俱乐部的 del.icio.us 帐户的书签示例

在这里可以看到三个书签：Emma Watson Interview、Harry Potter Cheap! 和 Harry Potter Wikipedia Entry，每个书签都有说明和标记。在输入的说明（比如 “Q and A with Emma Watson”）下面是关键字 “to ...”。注意，每个书签都有关键字 harry potter，然后是这个书签特有的其他标记（注意，标记以空格分隔）。标记标题下面右边总结和统计了这个 del.icio.us 帐户使用的每个标记（见图 2）。有三个书签包含标记 harry potter，所以 harry 和 potter 这两个标记后面的计数值是 3。

接下来，讨论 Ajax 如何改进 del.icio.us 的用户体验。

Ajax 可以提供哪些改进

Ajax 可以给任何 Web 页面提供强大的功能，但是 Ajax 在这里能提供哪些改进呢？有很多。Ajax 风格的按钮和页面更新使哈利波特读书俱乐部的成员能够直接访问 del.icio.us 书签功能。现在看一下将用 Ajax 和 HTML 开发的超级页面，见图 3。

图 3. 超级页面

注意，浏览的内容显示在右边，书签显示在左边。在上面的页眉中可以输入要在右边装载的 URL。在底部还有一个页脚（图中没有显示）。在 Your tags 下面可以看到所有与哈利波特相关的标记，在 Your bookmarks 下面显示读书俱乐部的书签。

在本教程中，您将学习如何创建这个页面。但是，首先了解一下 del.icio.us API。

del.icio.us API

通过使用 del.icio.us API，开发人员可以创建读书俱乐部超级页面这样的定制 del.icio.us 应用程序。del.icio.us API 分为四个主要类别：Update、Tags、Posts 和 Bundle。下面几小节分别讨论各个类别。

Update

Update 是一个简单的 API 调用，开发人员可以用它查明用户最后一次更新 del.icio.us 帐户的时间。提供这个方法的目的是，如果没有修改帐户，开发人员就不必反复调用 Web API。

在浏览器中输入以下 URL 来测试这个 API：https://api.del.icio.us/v1/posts/update。

注意，del.icio.us API 要求通过 SSL 进行安全连接，因为需要发送密码（除非已经输入了密码）。

应该会收到下面这样的 XML 响应：<update time="2007-12-12T08:23:54Z"/>。

这是最后一次修改的时间戳。一般会在获取所有内容之前，调用这个函数，以免不必要和重复的调用增加 del.icio.us API 服务器的负担。所以在这个读书俱乐部 del.icio.us 实现中不使用这个函数。

Tags

tags API 有两个函数，它们使用户能够查看和管理与哈利波特读书俱乐部相关联的标记。第一个函数可以获取当前的所有标记。在浏览器中输入以下 URL 来测试这个函数：https://api.del.icio.us/v1/tags/get。

应该会收到清单 1 所示的响应。

清单 1. 列出 del.icio.us 帐户中的所有标记

                    
<tags>
  <tag count="1" tag="deal"/>
  <tag count="1" tag="emma"/>
  <tag count="3" tag="harry"/>
  <tag count="1" tag="interview"/>
  <tag count="1" tag="overview"/>
  <tag count="3" tag="potter"/>
  <tag count="1" tag="watson"/>
</tags>

这里给出每个标记的名称，以及使用每个标记的次数。哈利波特与三个链接都相关，所以 harry 和 potter 的计数值是 3。其他所有标记都只使用了一次，所以计数值是 1。这实际上就是图 2 中 tags 下面的信息。

rename 函数用来修改标记的名称，其语法如下：https://api.del.icio.us/v1/tags/rename?old=<current-tag-name>&new=<new-tag-name>。

这些就是用 tags API 能够实现的功能。下面讨论比较复杂的 posts API。

Posts

posts API 处理保存在哈利波特读书俱乐部的 del.icio.us 帐户中的所有书签。其中包含以下函数：

Get —— 获取与某个标记相关的书签。
Recent —— 获取最新的书签。
All —— 获取所有内容（del.icio.us 建议尽可能少使用这个函数）。
Dates —— 获取一个日期列表，其中包含每个日期创建的书签数量。
Add —— 在哈利波特读书俱乐部帐户中添加一个新书签。
Delete —— 从哈利波特读书俱乐部帐户中删除一个书签。

在浏览器中输入以下 URL 来测试 Get 函数：https://api.del.icio.us/v1/posts/get?tag=interview。

这应该会返回 Emma Watson Interview 的书签。看一下 XML（见清单 2）。

清单 2. 包含一个书签的 XML

< posts dt ="2007-12-12" tag ="interview" user ="yoddler55" >

< post

href ="http://teacher.scholastic.com/scholasticnews/indepth/harry_potter/emma_watson.htm"

description ="Emma Watson Interview"

extended ="Q and A with Emma Watson"

hash ="2935aed7d2b1985345f44d73a1138282"

others ="1"

tag ="harry potter interview emma watson"

time ="2007-12-12T08:15:42Z" />

</ posts >

href 属性包含这个书签的 URL。description 属性包含基本说明，extended 属性包含关于这个书签的详细说明。Others 指出有多少个书签包含给定的标记（interview）。tag 属性列出与这个书签相关联的所有标记。time 属性提供最后一次修改这个书签的时间。

我们稍后将在超级页面中实现 Get、Add 和 Delete。接下来，看看如何创建和编辑 bundle。

Bundles

bundle 相当于标记的文件夹或目录。可以创建一个 bundle 并把任意数量的标记与它关联起来。例如，可以把标记 music、movies 和 books 与名为 entertainment 的 bundle 关联起来。可以使用以下三个函数管理 bundle：

All —— 获取与一个用户相关联的所有 bundle。
Set —— 创建一个新的 bundle。
Delete —— 删除一个现有的 bundle。

在默认情况下没有任何 bundle，所以通过在浏览器中输入 https://api.del.icio.us/v1/tags/bundles/all 来请求 bundle 列表时，会返回一个空集：</bundles>。

因为这个 API 当前的 bundle 功能还不够丰富（除了创建和删除），本教程不使用任何 bundle 功能。

接下来，我们看看如何设计哈利波特读书俱乐部超级页面的结构。

使用无表格布局设计超级页面的结构

Ajax 代码适合使用 HTML div 元素，所以我们将用 div 创建一个页面设计，而不使用表格（没有 <table>、<tr> 或 <td> 元素）。注意，这里也可以使用表格设计，但是为了与众不同和适应 Ajax 技术，本教程将实现一个无表格设计。首先设计页眉和页脚。

页眉和页脚

在页眉中可以放置一张图片，图片内容是以美术字书写的读书俱乐部名称。首先创建一个新文件 superPage.html 并定义页眉，见清单 3。

清单 3. Web 页面的页眉和页脚

< html >

< head >

< title > My Super del.icio.us Web Page </ title >

</ head >

< body >

< div id ="main" style ="margin:0px auto; width: 600px;" >

< div id ="header" style ="text-align: center;" >

Load the following page:

< input id ="currentHTMLpage" size ="30" value ="http://" />

< button onclick ="showHTML();" > BROWSE IT! </ button >

</ div >

< div id ="main-inner" >

...

< div id ="footer"

style ="text-align: center; clear:both; padding-top: 50px;" >

</ div >

< script type ="text/javascript" >

reload2();

</ script >

</ body >

注意，所有 div 都包含在一个外层 div（它的 id 是 main）中。style 属性 margin:0px auto 的作用是让页面居中。接下来是页眉，它显示用来装载 Web 页面的文本框和按钮。然后是一个新的 main-inner div，它包含所有主区域和浏览器面板内容。最后是页脚。由于使用了 style 属性 clear:both;，页脚显示在所有其他 div 的下面（见图 3 和图 4）。请注意 JavaScript 函数 showHTML()。本教程后面将实现这个函数。

目前，应该会看到图 4 所示的浏览器输出。

图 4. 页眉和页脚的效果

现在，读书俱乐部的超级页面已经形成了！接下来，讲解如何声明左边栏和浏览器面板。

左边栏和浏览器面板

这是读书俱乐部超级页面的关键之处。在这里声明显示标记和书签的各个部分，还有用来为新书签输入描述、说明和新标记的输入框。按照清单 4 继续设计页面。

清单 4. 定义读书俱乐部超级页面的左边栏和浏览器面板

...

< body >

< div id ="main" style ="margin:0px auto; width: 600px;" >

< div id ="viewing" style ="text-align: center;" >

...

</ div >

< div id ="main-inner" >

< div id ="tags" style ="float:left; width: 200px;" >

< h3 > Your tags </ h3 >

< div id ="tags-div" >

< div id ="tags-div-1" style ="float:left;" >

</ div >

< div id ="tags-div-2" style ="float:left; margin-bottom: 10px;" >

</ div >

< div id ="tags-div-3" style ="clear:both;" >

< button onclick ="renameTags();" > RENAME TAGS! </ button >< br />

< button onclick ="reload();" > RELOAD TAGS! </ button >

</ div >

< br />

New Tags: < br />

< input id ="newTags" />< br />< br />

Site Description: < br />

< textarea id ="urlDescription" ></ textarea >< br />< br />

Other Notes: < br />

< textarea id ="extendedNotes" ></ textarea >< br />

< br />

Save current page to your del.icio.us account,

along with above tags, description, and other notes: < br />

< button onclick ="addNewLink();" > SAVE LINK! </ button >

< br />< br />

< h3 > Your links </ h3 >

< div id ="links-div" >

< div id ="links-div-1" style ="float:left;" >

</ div >

< div id ="links-div-2" style ="float:left; margin-bottom: 10px;" >

</ div >

< div id ="links-div-3" style ="clear:both;" >

Check a single tag, and load all your links associated it:

< button onclick ="loadLinks();" > LOAD LINKS! </ button >< br />

< button onclick ="deleteLinks();" > DELETE CHECKED! </ button >

</ div >

< div id ="HTMLcontent"

style ="margin-left: 50px; margin-top: 50px; width: 350px; float:left" >

</ div >

< div id ="footer"

style ="text-align: center; clear:both; padding-top: 50px;" >

...

看看图 5 就会理解上面所有部分的位置。为了在 id 为 tags-div-1 和 tags-div-2 的 div 中填充内容，需要创建两个函数：reload() 装载每个标记的复选框和名称，renameTags() 创建用来输入标记的新名称的输入框。对于 links-div-1 和 links-div-2 创建 loadLinks() 函数，它从 del.icio.us 帐户装载书签并在 links-div-2 中装载复选框，让用户能够指定在按 DELETE CHECKED! 按钮时要删除的书签。请注意 id 为 HTMLcontent 的浏览器面板 div。实现了 showHTML 函数（见清单 3）之后，输入一个有效的 URL，单击 BROWSE IT! 按钮（见图 5），把这个页面装载到 HTMLcontent div 中。完整的页面布局见图 5。