Javascript 纯HTML AJAX网站中的页面加载备选方案

我在一个纯HTML网站上工作，所有页面都是HTML，与任何服务器端代码都没有关系

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

假设页面加载了URL中的参数，类似于

question.html？id=1

。之前，我在

页面加载

方法上读取这个查询字符串，然后从数据库中读取数据，依此类推

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

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

---

我的目标是不可能实现的，还是已经有了成熟的方法？

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

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

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

---

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

我不认为2-request是一个“坏主意”。事实上，如果您只想使用静态HTML+AJAX，则没有其他解决方案（这是web开发的moderm方法，因为这允许对其他非HTML客户端（如Android或iOS本机应用程序）重用AJAX请求）。另外，性能也是非常相关的。如果您的客户机可以缓存第一个静态HTML，那么即使需要两个请求，也会比服务器生成的方法快得多。只需使用网络探查器来说服自己

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

编辑： 我认为您可能需要的是使用清单将您的网站转换为webapp，以列出“可缓存”的静态内容。然后仅查询服务器中的动态（AJAX）数据： （IE 10+还支持Webapp清单）

---

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

我认为您想得太多了。我敢打赌，您担心的两个调用组合将在大致相同的时间内运行，如果您编码为其他方式，那么单个webforms页面加载的时间将大致相同-唯一的区别是，初始页面加载将非常快（因为您只加载了一个轻量级的html/css/images页面，运行任何服务器代码都不会减慢速度

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

观看几乎任何一个主要网站以任何语言进行的典型页面加载，你将看到许多组成单个页面的请求被加载，无论是从CDN中提取css/图像，从CDN中提取js，还是从广告网络加载google分析，广告等等。试图在一次调用中加载100%的页面都是不可能的这真是一个你应该担心的目标

我的目标是不可能实现还是有成熟的方法

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

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

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

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

以下是您不必担心的原因：

• 用户的浏览器通常会缓存HTML文件和相关的JavaScript文件，因此当用户第二次访问您的站点时，浏览器会发送请求以检查文件是否已被修改。如果未被修改，服务器将发送回一条短消息，简单地说这些文件未被修改，不需要传输我又哭了
• AJAX响应将只包含页面所需的数据和

  $(window).on('hashchange', function () {
  
      //your manipulation for query string goes here...
  
      prevHash = location.hash;
  
  });
  
  var prevHash = location.hash; //For tracking the previous hash.
  

  /* 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);