0

我有一个 ASP.NET 网站（c# 作为代码后面），其中我的一个页面具有选项卡式内容。我已经以两种不同的方式完成了它，现在我正在决定哪一种是要走的路。一种方法是，我用 javascript 完成了它。只需根据单击哪个 div 来交换 div，这效果很好（除了一些小的闪烁问题......）。另一方面，我使用了Ajax Control Toolkit和 Tabs 控件。我正在查找 Ajax 的好处，但也看到了在 Ajax 中使用选项卡式界面的这些缺点......

  • 搜索引擎看不到不在第一个选项卡中的数据，因为它们无法访问 Ajax。
  • 不能为选项卡添加书签。所以客户无法保存他们想要的信息。
  • Ajax 不可访问，因此任何使用屏幕阅读器的人，甚至是不支持 JavaScript 的旧版浏览器都看不到其他选项卡中的内容。
  • 如果其中一个选项卡包含大量信息，则在慢速连接上加载可能需要很长时间。而且因为 Ajax 没有表明任何事情正在发生，所以看起来页面已经损坏了。

所有这些都正确吗？我不太担心无法通过搜索引擎找到信息，因为无论如何只有网站的用户才能看到内容。

所以主要问题是，每种实施方法的优缺点是什么？Ajax 确实看起来更干净，但性能如何叠加？

4

3 回答 3

2

回答您的上述观点：

搜索引擎看不到不在第一个选项卡中的数据，因为它们无法访问 Ajax。

搜索引擎索引他们在页面上找到的内容。如果数据不存在，他们将不会加载它。但是，如果用于检索 AJAX 结果的 URL 通过普通<a>标签作为单独的页面链接，则可以对其进行索引。

不能为选项卡添加书签。所以客户无法保存他们想要的信息。

这是真的，即使您使用非 AJAX 解决方案。要为标签添加书签，您必须有效地将页面添加到特定“状态”中。使用散列片段是实现此目的的好方法。

Ajax 不可访问，因此任何使用屏幕阅读器的人，甚至是不支持 JavaScript 的旧版浏览器都看不到其他选项卡中的内容。

与通过脚本加载的任何内容一样，如果用户禁用了脚本，他们将无法获得内容。至于浏览器支持，jQuery 和许多其他库将浏览器差异抽象出来，以支持您合理希望支持的任何内容。

如果其中一个选项卡包含大量信息，则在慢速连接上加载可能需要很长时间。而且因为 Ajax 没有表明任何事情正在发生，所以看起来页面已经损坏了。

不正确。要加载的数据越多，完成 HTTP 请求所需的时间就越长，是的。但是“AJAX 并不表示任何事情正在发生”是不正确的——它甚至没有意义。AJAX 是一种传输机制。向用户显示“正在发生某事”的责任取决于您，并且可以通过旋转占位符等轻松实现。

基本上，AJAX 仅通过请求初始 UI 状态所需的数据来将初始页面加载时间降至最低。与任何 HTTP 请求（包括页面加载）一样，后续请求都需要时间，但在我看来，用户体验的提升要好得多。

于 2012-07-31T15:19:12.513 回答
2

搜索引擎看不到不在第一个选项卡中的数据，因为它们无法访问 Ajax。

这措辞不好。数据驻留在服务器上，所以是的，在 ajax 请求完成并填充 DOM 之前，客户端无法访问它。第一个选项卡中的数据有多重要？如果它比把它放在页面布局上那么重要。

不能为选项卡添加书签。所以客户无法保存他们想要的信息。

不确定书签与保存客户信息有什么关系。好像是两种不同的东西。但...

您可以像 gmail 一样实现自动保存。使用 setTimeout 将 ajax 帖子发回服务器以保存草稿或书签首选项。使用主题标签在单页应用程序中导航页面结构。

Ajax 不可访问，因此任何使用屏幕阅读器的人，甚至是不支持 JavaScript 的旧版浏览器都看不到其他选项卡中的内容。

同样，您是否希望人们筛选您的网站？jQuery 在使用 $.ajax() 支持旧版浏览器方面做得很好。我用 jQuery Mobile 支持 IE6 和 IE7，我们广泛使用了 $.ajax()。

如果其中一个选项卡包含大量信息，则在慢速连接上加载可能需要很长时间。而且因为 Ajax 没有表明任何事情正在发生，所以看起来页面已经损坏了。

您可以为此使用加载条...

$.ajaxStart(function() { /* show spinner gif */ } );
于 2012-07-31T15:20:23.170 回答
0

如果您正在寻找一种 ajax 感觉，当您单击选项卡时页面不会闪烁，我会使用 jQuery.ajax。您将拥有更多控制权，并且那里有很多支持。

要处理搜索引擎问题，您可以提供一个站点地图，其中包含代表每个选项卡的 url。

祝你好运，汤姆

http://api.jquery.com/jQuery.ajax/

于 2012-07-31T15:42:22.887 回答