ajax抓取网页内容(AngularJS抓取前端渲染的页面是怎么处理这种页面的？)

　　ajax抓取网页内容(AngularJS抓取前端渲染的页面是怎么处理这种页面的？)

　　抓取前端呈现页面

　　随着Ajax技术的不断普及和angularjs等单页应用框架的出现，越来越多的页面被JS呈现。对于爬虫来说，这种页面很烦人：仅提取HTML内容通常无法获得有效信息。那么如何处理这种页面呢？一般来说，有两种方法：

　　在爬行阶段，浏览器内核内置到爬行器中，页面在爬行之前由JS呈现。这方面的相应工具是selenium、htmlunit或phantom JS。然而，这些工具存在一些效率问题，并且不太稳定。其优点是编写规则与静态页面相同。由于JS呈现页面的数据也是从后端获取的，基本上是通过Ajax获取的，因此分析Ajax请求并找到相应的数据请求也是可行的。此外，与页面样式相比，此界面不太可能更改。缺点是找到这个请求并模拟它是一个相对困难的过程，需要相对较多的分析经验

　　比较这两种方法，我的观点是，对于一次性或小规模的需求，第一种方法可以节省时间和精力。然而，对于长期和*敏*感*词*的需求，第二个将更可靠。对于一些站点，甚至是一些JS技术，目前，第一种方法基本上是万能的，第二种方法将非常复杂

　　对于第一种方法，webmagic selenium就是这样一种尝试。它定义了一个downloader，在下载页面时使用浏览器内核进行渲染。Selenium的配置很复杂，取决于平台和版本。没有稳定的计划。如果您感兴趣，可以查看我的博客：使用selenium抓取动态加载的页面

　　这里主要介绍第二种方法。我希望您会发现解析前端呈现页面并没有那么复杂。这里我们以安格拉斯华人社区为例

　　如何判断前端渲染

　　判断页面是否以JS呈现的方法相对简单。在浏览器中直接查看源代码（windows中为Ctrl+u，MAC中为Command+Alt+u）。如果找不到有效的信息，基本上肯定会在JS中呈现

　　在本例中，如果在源代码中找不到页面中的标题“优孚计算机网络-前端攻城师”，则可以断定是JS渲染，数据是通过Ajax获取的

　　分析请求

　　让我们转到最难的部分：查找数据请求。此步骤可以帮助我们的工具，主要是用于在浏览器中查看网络请求的开发人员工具

　　以chome为例。让我们打开“开发者工具”（windows上的F12和MAC上的Command+Alt+I），然后再次刷新页面（它也可能是一个下拉页面，简而言之，所有您认为可能触发新数据的操作），然后记住保留场景并逐个分析请求

　　这一步需要一点耐心，但并非没有规则可循。首先可以帮助我们的是上面的分类过滤器（所有、文档等）。如果是普通的Ajax，它将显示在XHR标记下，jsonp请求将显示在scripts标记下。这是两种常见的数据类型

　　然后你可以根据数据的大小来判断。通常，结果的大小越大，越有可能是返回数据的接口。其余取决于经验。例如，这里的“最新的？P=1&s=20”乍一看是可疑的

　　对于可疑地址，您可以查看响应主体是什么。我们无法在开发人员工具中清楚地看到它。我们将URL复制到地址栏并再次请求它（如果您安装了chrome推荐的JSON查看器，则可以方便地查看Ajax结果）。看看结果，我们似乎找到了我们想要的

　　同样，我们转到“发布详细信息”页面，找到了对特定内容的请求：

　　程序设计

　　如果您回忆一下前面的列表+目标页面示例，您会发现我们这次的需求与之前的需求类似，但是它们被Ajax-Ajax列表、Ajax数据所取代，返回的数据变成JSON。然后，我们仍然可以使用最后一种方法在两页中编写：

　　数据表

　　在这个列表页面中，我们需要找到有效的信息来帮助我们构建目标Ajax的URL。在这里，我们看到这个ID应该是我们想要的帖子的ID，而帖子详细信息请求由一些固定URL加上这个ID组成。因此，在这一步中，我们手动构造URL并将其添加到要获取的队列中。这里，我们使用选择语言jsonpath来选择数据（webmatic扩展包中提供了jsonpathselector来支持它）

　　 if (page.getUrl().regex(LIST_URL).match()) {

//这里我们使用JSONPATH这种选择语言来选择数据

List ids = new JsonPathSelector("$.data[*]._id").selectList(page.getRawText());

if (CollectionUtils.isNotEmpty(ids)) {

for (String id : ids) {

page.addTargetRequest("http://angularjs.cn/api/article/"+id);

}

}

}

　　目标数据

　　使用URL，解析目标数据实际上非常简单。因为JSON数据是完全结构化的，所以我们节省了分析页面和编写XPath的过程。这里我们仍然使用jsonpath来获取标题和内容

　　 page.putField("title", new JsonPathSelector("$.data.title").select(page.getRawText()));

page.putField("content", new JsonPathSelector("$.data.content").select(page.getRawText()));

　　有关此示例的完整代码，请参见angularjsprocessor。爪哇

　　总结

　　在本例中，我们分析了一个经典的动态页面爬行过程。事实上，动态页面抓取的最大区别在于它增加了链接发现的难度。让我们比较两种开发模式：

　　后端呈现页面

　　下载辅助页面=&gt；发现链接=&gt；下载并分析目标HTML

　　前端呈现页面

　　找到的辅助数据=&gt；构造链接=&gt；下载并分析目标Ajax

　　对于不同的站点，这些辅助数据可能在HTML页面中预输出，可能通过Ajax请求，甚至是一个多数据请求的过程，但这种模式基本上是固定的

　　但是，这些数据请求的分析仍然比页面分析复杂得多，因此这实际上是动态页面捕获的难点

　　本示例的目的是提供一种模式，在分析请求后，可以遵循该模式准备此类爬虫程序，即查找辅助数据=&gt；构造链接=&gt；下载并分析目标Ajax模式

　　附言：

　　WebMagic0.5.0之后，JSON的支持将添加到链API中。将来，您可以使用：

　　page.getJson().jsonPath("$.name").get();

　　这种方法可以解析Ajax请求

　　它还支持

　　page.getJson().removePadding("callback").jsonPath("$.name").get();

　　这是解析jsonp请求的方法