大量使用ajax的问题-如何在页面上呈现html最初和后来，因为它被修改

Heavy use of ajax question - how to render html on a page initially and afterwards as it is modified?

本文关键字：html 后来 修改 因为 ajax 问题      更新时间：2023-09-26

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

  1. 我可以像正常一样呈现HTML页面，但不具体填充任何数据。然后，页面的每个部分将负责使用Javascript呈现自己。这种方法的好处是，javascript用于呈现所有可更新的内容。这里也有一个非常好的关注点分离，页面上的每个部分都有自己的事情。

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

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

    缺点是我不能进一步检查。另一个缺点是前置/追加非常有限。如果我想维护它的排序方式呢?如果是按字母顺序排列的，用户无论如何都必须刷新屏幕才能获得正确的排序顺序。

  3. 我可以发送一个JSON数据结构，就像在1 -然而，我也可以添加完全生成的html模板。这将使我能够在决定如何将对象前置/追加到页面之前先检查对象。

    这里唯一真正的缺点是我必须在我的控制器中手动调用Freemarker(我使用Spring 3.0)。x MVC)。这通常是自动为我完成的。我肯定有办法做到这一点，但我必须花一些时间研究如何做到这一点。

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

哪种方式被认为是最好的?还有其他方法吗?我正在建设的应用程序是非常复杂的，并将使用大量的ajax。等效的纯html版本是不可能的。事实上，我甚至不打算构建非javascript用户可以使用的应用程序。哦。所以当你回答的时候记住这一点;)

谢谢

我将使用moustache.js为模板部分填充从JS收集的值。

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

最后，如果你正在做一个非常复杂的ajax应用程序，我建议使用backbone.js，一开始有点难以理解，但它真的很强大!下面是一个带有注释代码的完整示例。

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

大纲组件

 HEADER COMPONENT
 COMPONENT X
 COMPONENT Y  
 ...
 FOOTER COMPONENT

在页面请求时，呈现大纲组件及其所有子组件。然后假设COMPONENT X的html需要更新:所以ajax请求是这样的:

GET /MyPage.componentX

返回该组件的HTML。

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

1>

看，我看到很多人和网站获取大量的内容，最终被转储到一个div的innerHTML。我觉得，这只是一种浪费。我所做的就是尽可能提出最小和最快的请求，并希望得到同样的回应。您说在完成新的搜索查询后正在更新名称，我更愿意从响应中提取数据，而不是在表或div表单中提取响应!这样的:-

" User1; 501; BSoD | User2; 507; BSoD"

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

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

2>

不要使用库，但也不要在你的页面上使用脚本标签。

许多人使用的库大到100 - 450 kB，这对AJAX来说毫无意义。它只会让你的网站变慢，最终HTML页面也会变慢。你必须使用脚本标签与src属性从你的网站添加一个脚本文件，但要确保脚本标签开始和结束像<script src="Whatever source"></script>更好的网页性能!

3>

验证自己制作的报头，以防止任何非ajax请求导致响应被显示!

相关文章：