使用jquery AJAX获取web页面动态数据

Question

我想从example.com/page.html获取数据。下面是我使用Chrome浏览器获取内容时的page.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
        <p>test 1</p>
        <p>test 2</p>
        <p>test 3</p>
    </div>
   <script src="test.js"></script>
</body>
</html>

下面是我使用Ajax获取内容时的page.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test">
    </div>
     <script src="test.js"></script>
</body>
</html>

正如你所看到的，段落不在那里！

下面是Ajax代码：

$.ajax({
  url: 'http://example.com/page.html',
  success: function(data) {
    alert(data);
  }
});

我知道段落是使用脚本(test.js)生成的，而script.js是使用Chrome JS引擎处理的。所以我的问题是:如何通过AJAX获得整个呈现的page.html内容？

Answer 1

如何通过AJAX获取整个呈现的page.html内容？

你不能这么做。

Ajax只是发出HTTP请求并使用客户端JS获得结果的过程。

你需要做一些不是Ajax的事情。

您需要执行以下任一操作：

• 发出Ajax请求，然后通过重新生成页面所引用的JS所做的一切来进行跟踪。
• 以允许JS执行然后从浏览器读取DOM的方式将HTML注入浏览器(如果注入的代码最终以某种方式与您的页面交互，则这可能是危险的)。
• 构建一个web服务，该服务在无头浏览器中呈现页面，然后返回DOM的序列化版本，然后向该web服务发出Ajax请求。