将 AJAX 响应作为文档处理

Handling an AJAX response as a document?

本文关键字：文档 处理 AJAX 响应      更新时间：2023-09-26

我正在尝试使用 shebang 实现 AJAX - 这意味着example.com/#!/somepage.php只是example.com/somepage.php加载到 AJAX 站点的内容区域中。

这样做的明显方法是只请求somepage.php，然后将documentElement的全部内容替换为新文档。然而，这似乎违背了AJAX的目的。

相反，我正在考虑尝试加载somepage.php，然后提取页面的content部分并将其简单地放在内容区域中。

为此，我可以使用正则表达式来查找/<div id="content">.*</div>/但这将是一个非常糟糕的主意（最简单的问题是"哪个</div>结束内容？相反，我希望能够做类似ajaxresponse.getElementById('content')的事情，但是我将如何ajaxresponse转换为document（或documentFragment）对象？

或者这只是实现这种 AJAX 设置的错误方法？我最好让服务器端检查X-Requested-With: XMLHttpRequest并只发回内容区域？

与其逐字请求#!页面，不如请求与#!处理程序兼容的变体。

这种方法需要两个步骤。

  1. 通过 JSON 公开您的内容页面。 使此服务可用于满足特定条件的请求，例如特殊的 get 参数、扩展、标头等。 例如，/somepage.php?json可能会以 JSON 格式提供/somepage.php的内容。

  2. 编写#!处理程序，以便在处理请求时调用上面为该页面定义的服务。 例如，当加载example.com/#!/somepage.php并且您处理somepage.php时，改为请求somepage.php?json，并根据需要传播该请求的内容。

这种方法为您提供了许多好处。

  • 减少了 AJAX 请求的响应大小
  • 减少服务器端负载，因为不需要呈现 HTML
  • 避免 HTML 解析和一些昂贵的 DOM 操作
  • 不依赖于浏览器来发送适当的 AJAX 相关标头

请注意，您实际上不需要使用正则表达式来从返回的数据中获取内容。例如，使用jQuery，只需使用$选择器（实时小提琴）的context参数即可。

$.get("/", {}, function(data){
    $("#text").append($("#login", data));
});​

另请注意，shebang 导航通常与一些 Javascript 框架相关联。

相关文章：