Question

我正在开发一个纯HTML网站，所有页面都是HTML，与任何服务器端代码无关。

基本上每个服务器的请求都是使用AJAX进行的，我从表单发送数据，我在处理程序中处理这些数据，然后返回一个JSON字符串，将在客户端处理回来。

假设该页面在URL中加载了参数，例如question.html?id=1。之前，我曾经在Page Load方法上读取此查询字符串，然后从数据库中读取数据等等......

现在，由于它的纯HTML页面，我试图想出一种方法，这将允许我做同样的事情，我有一个想法，但它的99％是一个坏主意。

想法是使用JS读取URL参数（在页面加载后），然后发出AJAX请求，然后获取数据并在页面上显示它们。我知道，我们现在有2个请求，第一个请求获取页面，第二个请求是AJAX请求，而不是向服务器（Web窗体）发出1个请求。当然，这有很多延迟，因为页面将在开头加载而不需要我需要的实际数据。

我的目标不可能或者那里有成熟的方法吗？

Answer 1

我的目标不可能或者那里有成熟的方法吗？

最近有很多JavaScript框架围绕这个概念（＆＃34;单页面应用程序＆＃34;）设计了一个页面加载而没有预装任何数据，并访问所有数据通过AJAX。这种框架的一些例子是AngularJS，Backbone.js，Ember.js和Knockout。所以不，这根本不可能。我建议学习这些框架和其他框架，以找到适合您所在网站的框架。

我们的想法是使用JS读取URL参数（在页面加载后），然后发出AJAX请求，然后获取数据并在页面上显示它们。

这听起来很不错 Here是如何使用JavaScript从当前网页的网址中提取查询参数的示例。

我知道我们现在有2个请求，第一个请求获取页面，第二个请求是AJAX请求，而不是向服务器（Web窗体）发出1个请求。当然，这有很多延迟，因为页面将在开头加载而不需要我需要的实际数据。

这就是为什么你不应该担心这个：

用户的浏览器通常会缓存HTML文件和相关的JavaScript文件，因此当他们第二次访问您的网站时，浏览器会发送请求以检查文件是否已被修改。如果没有，服务器将发回一条短消息，只是说它们没有被修改，文件也不需要再次传输。
AJAX响应只包含页面所需的数据而不包含任何标记。因此，检索在服务器上生成的页面将涉及更多数据传输，而不是将可缓存的.html文件和AJAX请求组合在一起的方法。
因此，即使您提出两个请求而不是一个请求，总加载时间应该更少。如果您担心用户在加载AJAX数据时会看到没有内容的页面，您可以（a）在加载数据时让页面完全空白（只要它不是太慢，这应该不是问题），或者（b）抛出启动画面告诉用户页面正在加载。同样，如果页面在此之后速度很快，用户通常不会在开始时遇到少量加载时间的问题。

Answer 2

我认为你是在思考它。我敢打赌，你担心的两个组合调用将在与单个webforms page_load大致相同的时间内运行，如果你编码的话 - 只是现在的区别是初始页面加载真的会是真的快速（因为你只是加载一个轻量级的html / css / images页面而没有减速来运行任何服务器代码。

通常的解决方案是使用'微调器'或某种类型（动画GIF），在ajax调用等待完成时为用户提供页面未完成加载的可视指示。

观看从几乎任何主要网站以任何语言进行的典型页面加载，您将看到许多组成单个页面的请求被加载，而是从CDN中提取css / images，js来自CDN，加载谷歌分析，来自广告网络的广告等。尝试在一次通话中加载100％的页面并不是你应该担心的目标。

Answer 3

我不认为2个请求是个坏主意＆＃34;一点都不实际上，如果您只想使用静态HTML + AJAX（这是Web开发的现代方法，因为这允许重用其他非HTML客户端（如Android或iOS本机应用程序）的AJAX请求），则没有其他解决方案。表现也非常相对。如果您的客户端可以缓存第一个静态HTML，那么即使需要两个请求，它也会比服务器生成的方法快得多。只需使用网络探查器来说服自己。

如果您不希望用户注意到GUI中的任何延迟，您可以执行的操作是使用显示弹出窗口隐藏/阻止所有完整窗口的通用脚本（可能带有＆＃34;请等待＆＃34;）直到收到带有AJAX的第二个请求并且接收到数据＆＃34; （或类似的）事件在AJAX回调中触发。

编辑：我认为你可能需要的是将你的网站转换为webapp，使用清单列出＆＃34; cacheable＆＃34;静态内容。然后只查询服务器的动态（AJAX）数据： http://diveintohtml5.info/offline.html （IE 10+也支持Webapp清单）

Moderm浏览器将读取清单以了解是否需要重新加载静态内容。使用webapp清单还可以将您的网站集成到操作系统中。例如，在Android上，它将列在最近任务列表中（否则只显示您的浏览器，而不是您的应用程序），用户可以在桌面上添加一个快捷方式。

Answer 4

那么，您只有处理程序中的静态HTML和用户服务器端代码？为什么你不能有一个ASP .Net页面（在服务器端生成）来加载初始数据，所有其他数据将使用AJAX请求进行处理？

Answer 5

如果可以使用任何支持的逻辑来确定在服务器端加载什么，那么很容易获得数据。

例如，如果你通过调用页面cc.php？json = a来加载json一个int页面cc.php，你可以从PHP代码中确定将json放入它自己的页面并用作对象在您的HTML页面

如果您使用查询字符串来读取和确定，加载什么则必须进行两次调用。

Answer 6

您想要的主要内容是所谓的路由器。

由于你似乎想要保持金属裸露，传统的答案是Backbone.js。如果您想要更快更精简，那么优化的Backbone fork ExoSkeleton可能只是票证，但它没有Backbone本身具有的功能。当然比烹饪自己更好。

有一些很好的框架，比如Ember和Angular，它们拥有庞大的用户群。我最近一直在使用Ember作为一个相当复杂的应用程序，因为它有一个非常复杂的路由器，但根据我的经验，我更加符合React / Flux中现有的架构（不仅仅是React，而是架构）通量模式）。

React / Flux与其中一个附加路由器组件将带您走得很远（Facebook / Instrgram），在我看来，它提供了比传统MVC更好的Web应用程序架构;它是目前用于更新DOM的最快框架，也允许同构应用程序（在客户端和服务器上运行）。这代表了所谓的圣杯＆＃34; Web应用程序从服务器发送初始呈现页面，避免因框架加载而导致的任何延迟，随后的交互使用ajax。

最重要的是，检查一些框架，找出最适合你的方法。你可能会发现在TodoMVC上比较框架实现的价值，但在我看来，Todo应用程序太简单和人为，无法真正展示不同框架如何发光。

我自己的进化是jQuery - ＆gt;骨干 - ＆gt; Backbone + Marionette - ＆gt;灰烬 - ＆gt; React / Flux所以不要期望能够很好地处理对你最重要的事情，直到你愤怒地使用了一些框架。

Answer 7

主要问题是从UX / UI的角度来看。

一旦从服务器（在Ajax中） 页面加载后获取数据 - 一旦将数据注入页面，您将获得“闪烁”行为。

您可以通过仅在数据到达后显示页面来解决此问题，或者使用某种类型的预加载器 - 让用户知道页面仍在获取其数据，但随后您将获得性能正如你已经提到的那样。

在这种情况下，理想的解决方案是获取页面所需的“基本”数据（在第一次请求服务器时），并通过客户端进行操作 - 从而轻松实现“闪烁”行为。

这是性能和“闪烁”/预加载指示之间的考虑因素。

此SPA（单页应用程序）页面最受欢迎的库是angularJS

Answer 8

如果我理解你的询问。您可能希望了解更多信息：

1）window.location.hash

您可以使用＆＃34;＃＆＃34;而不是使用＆＃34;？＆＃34;根据查询字符串操作页面。

参考：How to change the querystring on the same page without postback

2）hashchange事件

只要网址的片段/散列（＆＃34;＃＆＃34;）发生了变化，就会触发此事件。此外，您可能希望跟踪散列以比较先前散列值和当前散列值。

e.g。

$(window).on('hashchange', function () {

    //your manipulation for query string goes here...

    prevHash = location.hash;

});

var prevHash = location.hash; //For tracking the previous hash.

参考：On - window.location.hash - Change?

3）对于客户端入口点或类似于服务器端的PageLoad，您可以使用它，

e.g。

/* Appends a method - to be called after the page(from server) has been loaded. */
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function () {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

function YourPage_PageLoad()
{
   //your code goes here...

}

//Client entry-point
addLoadEvent(YourPage_PageLoad);

由于您正在使用纯粹的ajax，因此您可以轻松地从浏览器处理上一个/下一个按钮单击事件，并向用户显示正确的数据/页面。

Answer 9

我更喜欢AngularJS。这将是一项很好的技术，您可以使用一个HTML进行分页。所以我认为这将是您使用静态内容的好框架。在AngularJS MVC概念中，请阅读AngularJS Tutorial。所以这个框架对你的新项目来说是值得的。快乐的编码

页面加载Pure HTML AJAX网站中的替代方案

9 个答案: