将 AJAX 响应作为文档处理？答案

【问题标题】：Handling an AJAX response as a document?将 AJAX 响应作为文档处理？
【发布时间】：2012-06-09 03:49:57
【问题描述】：

我正在尝试使用 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 并只发回内容区域会更好吗？

【问题讨论】：

包含jQuery 是否可以做到这一点？使用 jQuery Ajax 的 .load(): $('#result').load('ajax/test.html #container');。我知道你应该比我更清楚，shebang 和 jQuery 有什么问题吗？
您的#! 处理程序不能简单地发出与页面逐字不同的请求吗？例如，当#! 处理/somepage.php 时，请求/somepage.php?json（返回一些方便使用的东西）。
使用纯 JS，您还可以将请求的页面附加到隐藏元素（或者只是动态创建它），然后也可以通过 getElementById 获取加载的内容 div。

标签： javascript ajax hashbang

【解决方案1】：

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

这种方法需要两个步骤。

通过 JSON 公开您的内容页面。使该服务可用于满足特定条件的请求，例如特殊的 get 参数、扩展名、标头等。例如，/somepage.php?json 可能以 JSON 格式提供/somepage.php 的内容。
编写您的#! 处理程序，以便在处理请求时调用您在上面为该页面定义的服务。例如，当example.com/#!/somepage.php 被加载并且您处理somepage.php 时，改为请求somepage.php?json，并根据需要传播该请求的内容。

这种方法可为您带来诸多好处。

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

【讨论】：

（我将此作为评论发布，但我认为我不妨将其推广为答案。）

【解决方案2】：

请注意，您实际上并不需要使用正则表达式来从返回的数据中获取内容。例如，使用 jQuery，只需使用 $ 选择器 (live fiddle) 的 context 参数即可

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

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

【讨论】：