Javascript ajax的大量使用问题-如何在页面被修改时最初和之后呈现html？

我相信这是当今许多web应用程序的常见问题。重用html模板的最佳方法是什么，以便在最初呈现页面时以及在向该页面添加新内容时不会出现重叠

我可以像正常情况一样呈现HTML页面，但不能专门填充任何数据。然后，页面的每个部分将负责使用Javascript呈现自己。这种方法的优点是使用javascript呈现所有可更新的内容。这里还有一个很好的关注点分离，页面上的每个部分都有自己的功能

缺点是，当服务器加载时，我会在每页向服务器发出多个请求

我可以发送服务器生成的HTML片段，只需在页面的任何部分添加它们。这使得页面的初始加载非常快。它还重用相同的服务器端模板代码，因此也没有重复

缺点是我不能进一步检查它。另一个缺点是prepend/append非常有限。如果我想保持它的排序方式，该怎么办？如果是按字母顺序排列的，用户必须刷新屏幕才能获得正确的排序顺序。如果结果是分页的，那么这样做就更麻烦了

我可以发送一个JSON数据结构，就像在1中一样-但是，我也可以添加完全生成的html模板。这将使我能够在决定如何在页面中预先添加/附加对象之前，首先检查对象

这里唯一真正的缺点是，我必须在控制器中手动调用Freemarker（我使用的是Spring3.0.xMVC）。这通常是为我自动完成的。我相信有办法做到这一点，但我必须花一些时间研究如何做到这一点

实际上，这给了我1和2的所有好处，但它也是最复杂的解决方案。传输的数据也高于其他两种解决方案。。。但也许这是没办法的

哪种方式被认为是最好的？还有其他方法吗？我正在构建的应用程序非常复杂，将使用大量ajax。仅使用HTML的等效版本是不可能的。事实上，我甚至不打算构建应用程序，让非Javascript用户可以使用它。哦，好吧。所以在回答时要记住这一点；）

---

谢谢

一个合理的方法是让模板由许多组件组成。第一次呈现页面时，将呈现整个模板，并返回整个页面的html。更新页面特定部分的后续Ajax请求只调用特定组件的呈现，并返回仅此组件的html

轮廓组件

 HEADER COMPONENT

 COMPONENT X

 COMPONENT Y  

 ...

 FOOTER COMPONENT

在页面请求时，将呈现大纲组件及其所有子组件。然后假设组件X的html需要更新：因此ajax请求类似于：

GET /MyPage.componentX

它将返回该组件的html

不过，我绝对建议使用一个像样的web应用程序框架。大多数都是基于组件的，内置了必要的客户端javascript。

1>

看，我见过很多人和网站获取大量内容，这些内容最终被转储到div的innerHTML中。我觉得，这只是一种浪费。我所做的是尽可能地提出最小、最快的请求，并希望得到同样的响应。如果您说在完成新的搜索查询后更新名称，我更希望从响应中提取数据，而不是将响应放在表或div表单中！像这样：-

“用户1；501；BSoD |用户2；507；BSoD”

因此，我将使用Javascript在客户端呈现表，而不是获取表代码。我将首先用“|”分割响应，然后用“；”分割每个块。这使得运行AJAX命令更容易、更快

您还可以选择根据搜索结果存储这些响应（此处使用的示例），以减少流量使用并获得更好的GUI

2>

不要使用库，但也不要对页面上的内容使用脚本标记

许多人使用的库大小高达100-450KB，这对于AJAX来说毫无意义。它只会让你的网站变慢，最终也会让HTML页面变慢。您必须使用带有src属性的脚本标记从您的网站添加脚本文件，但请确保脚本标记以

开头和结尾，以提高网页性能

3>

验证发送的自制标头，以防止任何非AJAX请求导致显示响应

我将使用从JS收集的值填充模板部件

另外，如果不想在初始加载时使用ajax，可以在初始html的脚本标记中以json格式编写初始页面的json

---

最后，如果您正在开发一个非常复杂的ajax应用程序，我建议您使用它，一开始理解它有点困难，但它非常强大！这里有一个例子。

你的基本解决方案与我在帖子第1点中所说的相同。它的问题是对服务器进行了许多调用。我不知道这是否是一个大问题，因此我问；）但是在java世界里。。。使用Spring。。。这里并没有“使用web框架”这样的帮助。这是一个非常好的MVC框架，它确实支持发送JSON，而无需自己封送数据——但除此之外，它还相当弱。映射传入的JSON实际上是一件很麻烦的事，如果它很复杂并且与实体相关的话。除此之外，它没有提供任何东西。嗯。。。这和我的问题有什么关系？我会调查的。重新发明轮子是没有意义的。我也不想陷入框架无法1的情况