将AJAX响应作为文档处理？

Question

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

显然，这样做的方法是只请求somepage.php，然后用新文档替换documentElement的整个内容。然而，这似乎有点辜负了AJAX的目的。

相反，我想尝试加载somepage.php，然后提取页面的content部分，然后将其放在内容区域中。

要做到这一点，我可以使用regex来查找/<div id="content">.*</div>/，但这将是一个非常糟糕的主意(最简单的问题是“哪个</div>结束了内容？”)。相反，我希望能够做一些类似于ajaxresponse.getElementById('content')的事情，但是如何将ajaxresponse转换为document (或documentFragment)对象呢？

或者，这只是实现这样一个AJAX设置的错误方法吗？让服务器端检查X-Requested-With: XMLHttpRequest并只发送内容区域会更好吗？

Answer 1

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

这种方法分为两个步骤。

1. 通过JSON公开内容页面。将此服务提供给满足特定条件的请求，例如特定的get参数、扩展、头等。例如，/somepage.php?json可能在JSON中为/somepage.php的内容提供服务。
2. 编写#!处理程序，以便当它处理请求时，它会调用上面为该页面定义的服务。例如，在加载example.com/#!/somepage.php并处理somepage.php时，请代之请求somepage.php?json，并酌情传播该请求的内容。

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

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

Answer 2

注意，实际上不需要使用正则表达式从返回的数据中获取内容。例如，对于jQuery，只需使用$ selector (活小提琴)的context参数即可

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

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