AJAX应该使用井号 /#!/ 还是不用？

Question

AJAX应该使用井号 /#!/ 还是不用？

javascriptajaxinternet-explorerhashtagurl-design

10

我创建了一个URL形式为http://www.example.com/module/content 的网页，实际上是一个非常动态的网页，也是一个Web应用程序。为了使其尽可能响应迅速，我想使用AJAX而不是普通的页面请求。这也使我能够使用JavaScript添加一层以提供脱机功能。我的问题只是：我应该如何制作这些URL？它们应该是http://www.example.com/module/content还是http://www.example.com/#!/module/content？如果您已经对此有清晰的看法，则可以不必阅读接下来的内容。我想使用第一个版本，因为我想支持新的HTML5标准。它易于使用，URL看起来很漂亮。但更重要的是，它允许我做到这一点：如果用户请求页面，它将返回完整的HTML页面。如果用户点击链接，则将通过AJAX仅将内容插入到容器div中。这将使没有JavaScript的用户能够使用我的网站，因为它不需要使用JavaScript，它只是使用旧的“单击链接-请求-获取完整html页面”的方法。虽然这很棒，但问题当然是Internet Explorer。只有IE的最新版本支持History API，为了在旧版本中使其工作，需要使用井号。 (我的用户中50％将使用IE，因此我需要支持它...) 因此，我必须使用/#!/来使其工作。如果同时使用这两个URL版本，则会出现问题，即如果IE用户将此链接发布到网站上，Google将向服务器发送一个_unescaped_string（或类似的内容），并将以带有井号的IE版本索引页面。而一些页面则没有井号。

正如我们所记得的，非哈希标签在许多方面都更好。那么，这个搜索引擎问题能够被规避吗？是否可以告诉GoogleBot，如果它正在查找网站的哈希标签版本，应该重定向到网页的非哈希标签版本？这样，就可以获得所有非哈希URL的好处，并仍然支持IE6-IE9。

你认为最好的方法是什么？也许你自己在实践中尝试过？感谢您的答案！

- Student of Hogwarts

1

即使你是霍格沃茨的学生，你也不是我的对手 :P。谷歌永远不会索引带有标签的URL，因为它无法做到，标签只适用于客户端，而谷歌索引不支持JavaScript。 - Madara's Ghost

1

@MadaraUchiha 是的，它会索引带有哈希标记的页面，因为它将其转换为GET请求！;) - Student of Hogwarts

2

然后它将添加带有哈希符号的URL到索引中，以便搜索结果将返回带有哈希符号的版本，直接将用户引导到网页的AJAX版本。 - Student of Hogwarts

3个回答

2

在这种情况下，解决方案非常简单。您使用第一个URL方案，并且不使用旧版IE浏览器的AJAX增强功能。

如果您珍贵的用户不想升级，那是他们的问题，但他们不能抱怨没有这些酷炫的效果和动态效果。

您也可以为传统浏览器提供“您的浏览器已过时！”的提示。

- Madara's Ghost

正如我所说，我需要支持他们，因为他们人数众多，并且由于工作需要，他们无法更新浏览器... - Student of Hogwarts

@Hogwarts的学生：那是一个不同的问题。在我以前的工作场所，我差点打败了我们所谓的“网络管理员”，直到他最终同意升级到Chrome。在此之前，我们在拥有200台计算机的网络中使用IE6。问题是，只要没有人抱怨，就没有人关心。成为那个发出声音的人。 - Madara's Ghost

嗯，你说得有道理。但那不是我的问题所在。我不能制造噪音的原因是大多数用户来自小公司。所以他们不是个人，但也不是一个大公司。所以我不能告诉13个不同的公司去改变并假设他们都会这样做。 - Student of Hogwarts

@StudentofHogwarts：当然你需要这么做！这些公司是你的客户，对吧？声明一个新的浏览器是你的Web应用程序的要求，就像他们不应该使用Windows 95一样，他们也不应该使用旧版IE浏览器。小公司更容易说服，因为它们规模较小，计算机数量较少（使升级过程不那么麻烦）。无论如何，我会再读一遍，尝试想出更好的方法。但你真的应该考虑这种方法！你不仅可以帮助自己，还可以帮助所有被迫使用IE的可怜人！ - Madara's Ghost

好的，如果你/我想不出足够好的解决方案，我就得尝试一下你说的方法。 - Student of Hogwarts

1

我不会在URL中使用/#!/。首先确保页面正常工作，使用完整的页面请求（这应该很容易）。一旦这样做了，您可以检查window.history对象，如果存在则添加AJAX。 AJAX调用可以发送到相同的URL，主要区别在于服务器端处理。检查很简单，如果设置了HTTP_X_REQUESTED_WITH，则请求是AJAX请求，如果未设置，则处理标准请求。

您不需要担心重复内容，因为GoogleBot不设置HTTP_X_REQUESTED_WITH请求头。

- Arjan

谢谢你的回答！那确实是我现在的做法。（我只是用 ?ajax=1 来设置它。）但是那些使用 Internet Explorer < 9 的 50% 怎么办？ - Student of Hogwarts

如果你使用 ?ajax=1，那么你正在添加冗余信息，因为头部应该已经告诉你请求是否是 Ajax 请求。渐进增强的好处在于即使浏览器缺少某些功能，网站仍然能正常工作。它可能会慢一些，但它确实可以工作。 - Arjan

是的，我将使用HTTP_X_REQUESTED_WITH。谢谢您的回复！ :) - Student of Hogwarts

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul · Accepted Answer

如果您希望Google索引您的Ajax内容，则应像这样使用#!key=value。这是Google推荐用于Ajax导航。

如果您确实喜欢没有#!的漂亮HTML5网址，那么可以支持两者而不会出现索引问题！只需添加：

<link rel="canonical" href="preferredurl" />

将以下代码添加到每个页面的<head>部分（用于初始加载），以帮助Google了解您希望他们索引哪个版本的URL。在这里阅读更多关于规范网址的信息。