使用 API
通过使用 posts
API,您和哈利波特读书俱乐部成员可以添加、查看和删除书签。在下面三小节中,讲解如何实现 posts
API 中的三个函数,先从 add
开始。
post 的 add
API 允许在帐户中添加新的书签。按照清单 11 创建和定义 addNewLink
函数。
function addNewLink(){ var url = "proxy.php?url=https://api.del.icio.us/v1/posts/add"; inputTags = document.getElementById("tags-div-1") .getElementsByTagName("input"); var tagStr = ''; for (var i = 0; i < inputTags.length; i++) { var tag = inputTags.item(i); if(tag.checked){ if(tagStr == '') tagStr = tag.getAttribute('name'); else tagStr = tagStr + ' ' + tag.getAttribute('name'); } } var newTags = document.getElementById('newTags').value; if(tagStr == '') tagStr = newTags; else tagStr = tagStr + ' ' + newTags; var saveUrl = document.getElementById('currentHTMLpage').value; var desc = document.getElementById('urlDescription').value; var notes = document.getElementById('extendedNotes').value; var url = url + '&url2=' + saveUrl + '&description=' + desc + '&extended=' + notes + '&tags=' + tagStr; getResponse(encodeURI(url), 'senddata'); reload(); } |
如果回忆一下 清单 4 中第一次出现这个函数的情况,就会知道在单击 SAVE BOOKMARK! 按钮时会调用这个函数。在这个函数中,首先循环遍历所有标记复选框,并把它们连接成一个字符串(tagStr
)。然后,把 newTags div
中新的标记连接到 tagStr
中,这样就获得了与新 URL 相关联的标记列表。然后获取 currentHTMLpage
中指定的 URL,以这个 URL 作为与标记相关联的主 URL。然后,从 urlDescription
和 extendedNotes div
元素分别获取描述和说明。然后设置 URL 并把请求发送给代理。这时会显示与图 7 相似的弹出窗口,并在标记的 div
元素中重新装载任何新标记。
接下来,看看如何从 del.icio.us 帐户中获取书签。
现在已经可以从超级页面添加新书签了,下面要把书签装载到适当的 div
元素中。为此,要编写 loadLinks
函数(在 清单 4 中调用),见清单 12。
function loadLinks(){ var url = "proxy.php?url=https://api.del.icio.us/v1/posts/get"; inputTags = document.getElementById("tags-div-1") .getElementsByTagName("input"); var tagStr = ''; for (var i = 0; i < inputTags.length; i++) { var tag = inputTags.item(i); if(tag.checked){ if(tagStr == '') tagStr = tag.getAttribute('name'); else{ alert('Can only select one tag!'); return; } } } if(tagStr == ''){ alert('You must check a tag!'); return; } var url = url + '&tag=' + tagStr; var xmlDoc = loadXML(url); var string = processXML(xmlDoc, 'links'); document.getElementById("links-div-1").innerHTML = string; string = processXML(xmlDoc, 'deleteLinks'); document.getElementById("links-div-2").innerHTML = string; } |
为了装载链接,首先要获取标记复选框中选中的标记。还要确保有一个(且只有一个)标记被选中(这是 posts API get
函数的要求)。如果符合要求,就把标记变量连接到 url,向代理发送请求,并把两次调用 processXML
函数的结果分别装载到 links-div-1
和 links-div-2
div
中。所以,为了让对 processXML
函数的这两次调用起作用,需要完成它的定义,见清单 13。
function processXML(xmlDoc, type){ ... else if(type == 'links'){ var postStr = ''; var posts = xmlDoc.getElementsByTagName("post"); for (var i = 0; i < posts.length; i++) { var url = posts.item(i).getAttribute('href'); var desc = posts.item(i).getAttribute('description'); postStr = postStr + '<a href="' + url + '">' + desc + '</a><br/>'; } return postStr; } else if(type == 'deleteLinks'){ var postStr = ''; var posts = xmlDoc.getElementsByTagName("post"); for (var i = 0; i < posts.length; i++) { var url = posts.item(i).getAttribute('href'); postStr = postStr + '<input type="checkbox" name="' + url + '" /><br/>'; } return postStr; } } |
在 清单 12 中,对 processXML
函数的第一次调用以 links
作为 type
参数。这会获取所有 post 元素,创建一个链接列表并返回它,然后把这些链接放在 links-div-1 div
元素中。对 processXML
函数的第二次调用以 deleteLinks
作为参数。这里的代码创建一组复选框,让用户可以指定要从读书俱乐部帐户中删除的链接。然后把这些复选框放在 links-div-2
div
元素中链接的右边。
这个功能的效果见图 9。
注意,在图 9 的顶部选中了 potter 复选框。单击图 9 底部的 LOAD BOOKMARKS! 按钮。这时应该会在 Your bookmarks 下面装载相同的三个链接。
接下来,讨论如何删除 Interview 链接。
为了删除书签,要定义 deleteLinks
函数(由 清单 4 中的 DELETE CHECKED! 按钮调用),见清单 14。
function deleteLinks(){ var url = "proxy.php?url=https://api.del.icio.us/v1/posts/delete"; inputLinks = document.getElementById("links-div-2") .getElementsByTagName("input"); for (var i = 0; i < inputLinks.length; i++) { var link = inputLinks.item(i); if(link.checked){ deleteUrl = link.getAttribute('name'); sendUrl = url + '&url2=' + deleteUrl; getResponse(encodeURI(sendUrl), 'senddata'); } } reload(); } |
这个函数与标记重命名函数相似。选中的每个复选框表示希望删除的书签,把这些书签追加到 posts/delete URL 后面,并向代理发送请求。在删除这些书签之后,重新装载标记。
为了测试这个功能,选中 Emma Watson Interview 链接旁边的复选框,并单击 DELETE CHECKED!。应该会看到与 图 7 相似的 JavaScript 弹出窗口,它指出链接已经删除了。重新选中 potter 标记并再次单击 LOAD LINKS! 之后,应该会看到这个链接已经删除了,而且不再与俱乐部的书签相关联的标记也被删除了,见图 10。
删除成功了!Interview 链接消失了,而且与 Interview 链接相关联的其他三个标记(emma、watson 和 interview)现在也消失了,因为它们与读书俱乐部帐户中的任何书签都不相关。
结束语
好了!现在,您的哈利波特读书俱乐部可以通过 Ajax 功能访问 del.icio.us 帐户,这大大增加了对成员的吸引力。您学习并实现了 del.icio.us API,并把这些功能结合到了一个无表格的超级页面中。
描述 | 名字 | 大小 | 下载方法 |
---|---|---|---|
示例源代码 | delicious.tut.code.zip | 4KB | HTTP |