0

如果只使用一个带有块的html页面怎么办，如下所示

<div id="page1" style="display:block">...</div>

<div id="page2" style="display:none">...</div>

<div id="page3" style="display:none">...</div>

活动块有 style="display:block" 其他 "display:none"，当块变为活动时 "display:block" 前一个变为 "display:none"。

AJAX 服务器通信，例如

$.post("json", { "name": $("#name").val(), "sex": $("#sex").val() },
function(data) { console.log("server responded", data); });

这种方法有什么缺点？

4

3 回答 3

1

这是快速和动态的，但这种方法缺乏书签工具，用户无法保存特定链接，因为数据是动态的，而且它对搜索引擎不友好，另一个缺点是历史按钮后退和前进不起作用。

于 2012-05-06T19:15:46.960 回答
0

使用纯 AJAX 没有缺点。事实上，在很多方面，它是有利的。

如果您没有正确计划，您可能会遇到一些问题。例如，您习惯一次使用 CSS 效果 1 个页面，但使用纯 AJAX，CSS 将影响每个页面。

此外，所有事情都会变得稍微困难​​一些。链接到另一个页面变得更加困难，因为您必须使用 JavaScript。

最后，您的应用程序现在需要 JavaScript，所以我会有一个不错的后备。

于 2012-05-06T19:14:41.003 回答
0

这种方法在一些移动 Web 框架中使用，例如 jQuery Mobile，旨在使 Web 应用程序感觉更加原生。与传统的网站或 Web 应用程序相比，这更像是 Web 2.0，因为传统网站或 Web 应用程序的每个页面转换都需要访问服务器。

我相信您已经知道优点，所以让我们继续讨论缺点。

稍大的初始延迟：

这种方法的主要缺点是加载页面内容的时间会稍长一些，因为您一次就可以从服务器获取所有 HTML。因此，初始加载时间可能比传统的 Web 1.0 应用程序涉及更多的延迟。但是，根据我的经验，只有几页，延迟并不足以成为一个问题。

后退按钮丢失 - 维护历史更加复杂：

另一个潜在的缺点是，作为开发人员，您需要以不同的方式开发您的网站。因为您通过隐藏一个 DIV 块并取消隐藏另一个来转换页面，所以您将失去本机后退按钮功能。这可以通过使用 URL 中的散列来记录页面转换的历史来缓解。然后，您需要注册一个事件来查看哈希并在用户向后导航时重新加载旧内容。您还需要更改 JavaScript 对象和变量的状态以反映旧状态，这可能会增加您的应用程序的复杂性。当然，还有 API 和库可以使这更容易实现，并有助于确保您编写出良好的、可维护的代码。

更有状态的范围涉及重新思考方法和可能的学习曲线：

最后，您需要记住，每个页面的范围不会在每次转换后重置。虽然这实际上可能是一个优势，因为您的应用程序更有状态，但您需要解除自己的思维方式，即每个加载的页面都会导致您设置的所有 JavaScript 变量和数据被清除。

概括：

如果你要走这条路，我的建议是使用图书馆。除非你有充分的理由，否则不要重新发明轮子。像 jQuery mobile 这样的库有助于确保对旧浏览器有良好的回退，有些甚至可以确保在禁用 JavaScript 的情况下，您的站点仍将使用 Web 1.0 技术加载。

于 2012-05-06T19:17:40.627 回答