【问题标题】:REST/Ajax deep linking compatibility - Anchor tags vs query stringREST/Ajax 深度链接兼容性 - 锚标签与查询字符串
【发布时间】:2009-11-08 10:12:56
【问题描述】:

所以我正在开发一个网络应用程序,我想过滤搜索结果。

一个不错的宁静实现可能如下所示:

1. mysite.com/clothes/men/hats+scarfs

但是假设我们想要 ajax 过滤,就像酷孩子一样,我们想要保留深度链接,我们可能会使用锚标记并使用 Javascript 解析它以显示正确的列表:

2. mysite.com/clothes#/men/hats+scarfs

但是,如果有人在启用 JS 的情况下单击第一个链接,然后更改过滤器,我们可能会得到:

3. mysite.com/clothes/men/hats+scarfs#/women/shoes

乌尔克。

同样,如果有人没有启用 JS,并且单击链接 2 - JS 将不会解析选项并且不会显示正确的列表。

Ajax 深层链接和非 Ajax 链接不兼容吗?看起来是这样,因为服务器无法解析 url 的 # 部分,因为它没有发送到服务器。

【问题讨论】:

    标签: html ajax http hyperlink


    【解决方案1】:

    Google:A proposal for making Ajax crawlable 在这个问题上提出了一个猴子扳手。 Google 正在那里提供有关 url 结构的建议,可能会为您自己的应用程序提供一些想法。

    以下是总结:

    总之,从有状态开始 网址如 http://example.com/dictionary.html#AJAX , 两者都可以使用 爬虫和用户作为 http://example.com/dictionary.html#!AJAX 可以被抓取为 http://example.com/dictionary.html?_escaped_fragment_=AJAX 反过来会显示给用户 并访问为 http://example.com/dictionary.html#!AJAX

    查看Google's Presentation here(注:谷歌文档演示)

    总的来说,我认为完全关闭 JavaScript 和 CSS 并浏览您的网站和 Web 应用程序并查看最终暴露的内容是很有用的。一旦您了解什么是可见的,您就会了解大多数搜索引擎看到了什么,进而会向您展示什么是蜘蛛网,什么没有。

    【讨论】:

    • 感谢您的链接 - 非常有用,很高兴知道 Google 也认为这是一个值得解决的问题。该站点完全可以在没有 Javascript 的情况下浏览 - 当 URL 从没有启用 JS 的系统存储并在一个系统中使用时出现问题,反之亦然。
    • 我认为这个答案是最有用的,因为它提供了有关 Google 如何尝试解决问题的有趣信息。我认为目前还没有理想的解决方案。
    • Facebook 实际上实现了这一点。示例:facebook.com/group.php?gid=15185147661#!/developers
    【解决方案2】:

    如果您在启用 JavaScript 的情况下访问 mysite.com/clothes/men/hats+scarfs,那么您的 JavaScript 应该会自动将其重写为 mysite.com/clothes#men/hats+scarfs - 当您单击过滤器时,它们应该由 JavaScript 控制,这意味着您只会更改主题标签而不是整个 URL(因为无论如何您都将返回 false)。

    您遇到的问题是非 JS 用户访问启用了 JS 的深层链接,因为服务器无法确定这些内容。不幸的是,您唯一能做的就是将他们带到 mysite.com/clothes 并让他们重新开始他们的旅程(据我所知)。您需要尝试确保当人们链接到该网站时,他们使用的是硬编码的深层链接,而不是散列的深层链接

    【讨论】:

    • Javascript 无法将地址从 /clothes/men/hats+scarfs 重写为 /clothes#men/hats+scarfs - 它只会影响 # 部分。除非你的意思是重定向,它可以工作但有点笨重 - 加载一个页面,然后重定向到相同的东西,但使用 # 语法。
    【解决方案3】:

    我不建议您使用查询字符串,因为您将数据发送回服务器,而与先前指定的目的地没有直接关系。这是一个可破坏的安全漏洞,因为可以手动将恶意代码添加到查询字符串中,从而在您的网络服务器上引发 XSS 或缓冲区溢出攻击。

    我相信 REST 旨在使用不带查询字符串的绝对 URI,因为这样您只指定了资源的位置,并且该位置具有描述性和语义相关性,此外资源可能如此平等相关的。即使指定路径上没有资源,您仍然实例化了一个可能唯一且具有描述性的位置,可以相应地进行处理。

    【讨论】:

      【解决方案4】:

      通过深层链接进入网站的用户

      如果您构建 Ajax 初始化代码的方式是:在过滤页面(例如 /clothes/women/shoes)上进入站点的用户在任何之前被带到 /clothes 页面,则可以避免无意义的链接(例如 /clothes/men/hats#women/shoes)发生 Ajax 过滤。例如,你可能会做这样的事情(使用jQuery):

      $("a.filter")
        .each(function() {
          var href = $(this).attr("href").replace("/clothes/", "/clothes#");
          $(this).attr("href", href);
        })
        .click(function() {
          update_filter($(this).attr("href").split("#")[1]);
        });
      

      没有 JavaScript 的用户

      正如您在问题中所说,服务器无法知道 URL 片段,因此如果用户获得指向 /clothes#filter 的链接,则不会对未启用 JavaScript 的用户应用过滤。

      然而,即使没有过滤,通过在/clothes 页面中使用过滤字符串作为 ID,这些链接对于非 JS 用户来说也更有意义。为了防止这种对 Ajax 体验的干扰,需要在初始化 Ajax 链接之前使用 JavaScript 更改 ID(或删除元素)。

      这有多实用取决于您有多少类别以及您的/clothes 页面包含什么。

      【讨论】:

      • 谢谢 - 可以,但第一次过滤点击不是 ajax,对吧?让第一次点击是非 ajax 并且后续点击 ajax 对用户来说可能很奇怪。至于没有 JS 的用户,是的,我认为 ID 可以使用更简单的接口。但是,这里我们有不止一个过滤器维度,这会使使用 id 变得非常棘手
      • 是的,第一次点击不会是 Ajax,这并不理想。
      猜你喜欢
      • 2017-05-01
      • 1970-01-01
      • 2019-07-29
      • 1970-01-01
      • 1970-01-01
      • 2017-06-16
      • 1970-01-01
      • 2013-11-30
      • 1970-01-01
      相关资源
      最近更新 更多