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

Posted 2023-02-22

【中文标题】纯 HTML AJAX 网站中的页面加载替代方案

【英文标题】：Page Load alternative in a Pure HTML AJAX Website

【发布时间】：2015-02-23 01:52:26

【问题描述】：

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

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

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

现在，由于它是纯 HTML 页面，我正在尝试想一种方法来允许我做同样的事情，我有一个想法，但 99% 是个坏主意。

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

我的目标是不可能的，还是有成熟的方法？

【问题讨论】：

我猜，你可以使用htaccess，如果有参数你可以覆盖链接并调用php文件，但我不知道怎么做，只是一个想法

很好的问题，然后我用谷歌搜索了一句话：“javascript单页应用程序框架”。 Nro 1 结果是 Durandal，之后有一个与我的搜索相关的不同来源的列表，我浏览了一下。在这些链接中，AngularJS、Backbone、Knockout 和许多其他框架都被提及并或多或少地进行了详细比较，我认为这非常有用。

我在查看 Durandal (durandaljs.com/showcase.html) 时注意到的一件事是它用于 BizTalk 360 Web 监控，有趣的是微软选择它作为 BizTalk 的 Web 框架;所以我强调 Durandal 的原因是您使用的是 ASP.NET :-) 总的来说，我认为找到“正确”的框架有点困难，因为它们似乎都有起起落落。

您使用的是 WebForms 还是 MVC？如果你对使用 MVC 持开放态度，那么实现这种 SPA 应用会容易得多。

@abhitalks 也不是，我的目标是实现完全分离，我不希望我的 HTML 页面与任何类型的服务器端代码相关，换句话说，我希望页面以 @ 结尾987654324@，没有.aspx，没有.xhtml，没有.cshtml，什么都没有。也许global.asax 可以提供一个解决方案，也许可以拦截请求？

【参考方案1】：

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

【参考方案2】：

如果我正确理解您的询问。您可能想了解更多：

1) window.location.hash

您可以使用“#”来根据查询字符串来操作您的页面，而不是使用“？”。

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

2) hashchange 事件

只要网址的片段/哈希（“#”）发生变化，就会触发此事件。此外，您可能希望跟踪哈希以比较先前的哈希值和当前的哈希值。

例如

$(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，您可以使用它，

例如

/* 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，因此这种技术的好处是您可以轻松处理来自浏览器的上一个/下一个按钮单击事件，并向用户呈现正确的数据/页面。

【参考方案3】：

我的目标是不可能的，还是有成熟的方法？

最近有很多 JavaScript 框架是围绕这个概念（“单页应用程序”）设计的，即在没有预加载任何数据的情况下加载页面，并通过 AJAX 访问所有数据。此类框架的一些示例是 AngularJS、Backbone.js、Ember.js 和 Knockout。所以不，这根本不是不可能的。我建议了解这些框架和其他框架，以找到适合您正在制作的网站的框架。

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

这听起来是个好主意。Here 是一个示例，说明如何使用 JavaScript 从当前页面的 URL 中提取查询参数。

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

这就是您不必担心的原因：

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

【讨论】：

非常相信，你让我感觉好多了，所以总而言之，这个方法很好，没有错，而且更好，我应该去吗？

@AliBassam 我认为不能说一种方法绝对比所有其他方法都好，但您正在考虑的方法肯定是一个很好的现代选择，有很多好处。如果你愿意，我认为你应该去。

【参考方案4】：

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

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

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

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

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

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

【参考方案5】：

您似乎最想要的是所谓的路由器。

由于您似乎想让事情保持裸露状态，因此传统的答案是Backbone.js。如果您想要更快、更精简，那么优化的 Backbone fork ExoSkeleton 可能只是票，但它没有 Backbone 正确的以下内容。当然比自己做饭要好。

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

带有附加路由器组件之一的 React/Flux 将带您走得很远（Facebook/Instrgram），在我看来，它为 Web 应用程序提供了比传统 MVC 更优越的架构；它是目前更新 DOM 最快的框架，还允许同构应用程序（在客户端和服务器上运行）。这代表了所谓的 Web 应用程序的“圣杯”，因为它从服务器发送初始渲染页面并避免由于框架加载而导致的任何延迟，随后的交互然后使用 ajax。

最重要的是，检查一些框架并找到最适合您的框架。您可能会在 TodoMVC 上找到一些比较框架实现的价值，但在我看来，Todo 应用程序太简单了，无法真正展示不同框架的亮点。

我自己的进化是 jQuery -> Backbone -> Backbone + Marionette -> Ember -> React/Flux 所以不要指望能很好地掌握对你来说最重要的东西，直到你愤怒地使用了一些框架.

【参考方案6】：

我认为 2-requests 根本不是一个“坏主意”。事实上，如果您只想使用静态 HTML + AJAX（这是现代 Web 开发方法，因为这允许将 AJAX 请求重用于其他非 HTML 客户端，如 android 或 ios 原生应用程序），实际上没有其他解决方案。性能也是非常相对的。如果您的客户端可以缓存第一个静态 HTML，即使需要两个请求，它也会比服务器生成的方法快得多。只需使用网络分析器来说服自己。

如果您不希望用户注意到 GUI 中的任何延迟，您可以做的是使用一个通用脚本，该脚本显示一个弹出窗口隐藏/阻止所有完整窗口（可能带有“请稍候”），直到接收到带有 AJAX 的第二个请求，并在 AJAX 回调中触发“数据接收”（或类似）事件。

编辑： 我认为您可能需要的是使用清单将您的网站转换为 webapp 以列出“可缓存”静态内容。然后仅查询您的服务器以获取动态 (AJAX) 数据： http://diveintohtml5.info/offline.html （IE 10+ 也支持 Webapp 清单）

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

【参考方案7】：

我觉得你想多了。我敢打赌，如果您以其他方式进行编码，您担心的两个调用的组合运行时间将与单个 webforms page_load 的运行时间大致相同 - 现在唯一的区别是初始页面加载将是真的快速（因为您只加载了一个轻量级的 html/css/images 页面，而不会降低运行任何服务器代码的速度。

常见的解决方案是使用“微调器”或某种形式（动画 GIF），在您的 ajax 调用等待完成时向用户提供页面未完成加载的视觉指示。

观看从几乎任何主要网站以任何语言完成的典型页面加载，您会看到许多构成单个页面的请求正在加载，无论是从 CDN 中提取 css/图像，还是从CDN、加载谷歌分析、来自广告网络的广告等。试图在一次调用中加载 100% 的页面并不是你真正应该担心的目标。

【参考方案8】：

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

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

如果您使用查询字符串来读取和确定要加载的内容，您必须进行两次调用。

【参考方案9】：

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

【讨论】：

是的，只有接收 AJAX 请求的 HTML 页面和处理程序。我在这个网站的目标是完全分离，页面中没有服务器端代码（或以任何方式与页面相关）。