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

最新推荐文章于 2025-11-27 11:57:21 发布

最新推荐文章于 2025-11-27 11:57:21 发布 · 124 阅读

文章标签：

本文介绍了一个基于Ajax的哈利波特读书俱乐部网站如何利用del.icio.us API实现书签的添加、获取和删除功能。通过定义特定函数，如addNewLink、loadLinks及deleteLinks等，实现了与del.icio.us服务的有效交互。

使用 API

通过使用 posts API，您和哈利波特读书俱乐部成员可以添加、查看和删除书签。在下面三小节中，讲解如何实现 posts API 中的三个函数，先从 add 开始。

Add

post 的 add API 允许在帐户中添加新的书签。按照清单 11 创建和定义 addNewLink 函数。

清单 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 帐户中获取书签。

Get 函数

现在已经可以从超级页面添加新书签了，下面要把书签装载到适当的 div 元素中。为此，要编写 loadLinks 函数（在清单 4 中调用），见清单 12。

清单 12. 定义 loadLinks 函数

                    
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。

清单 13. 完成 processXML 函数的定义

                    
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. 装载书签

注意，在图 9 的顶部选中了 potter 复选框。单击图 9 底部的 LOAD BOOKMARKS! 按钮。这时应该会在 Your bookmarks 下面装载相同的三个链接。

接下来，讨论如何删除 Interview 链接。

Delete

为了删除书签，要定义 deleteLinks 函数（由清单 4 中的 DELETE CHECKED! 按钮调用），见清单 14。

清单 14. 定义 deleteLinks 函数

                    
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。

图 10. 删除书签