使用 phantomjs 异步爬取 ajax 网页数据

【摘要】这几天在学习 phantomjs ，今天学习到了如何实现使用 phantomjs 爬取由 ajax 异步生成的数据，这里做个笔记。

首先，需要了解一下 ajax , ajax 是一个异步输出的技术，当普通的爬虫爬取网页的时候，发送 http 请求，而获取到的都是 http 请求后直接的响应数据，然后在网页中可能还有 ajax ，这是网页向服务器发送的异步请求数据，这是第二次 http 请求，但爬虫是获取不到的。

实际问题如下：

淘宝的某个商品链接：https://item.taobao.com/item.htm?id=545533644459

当第一次加载的是时候，并不是把所有的数据都一次性全部加载到网页中的，如图所示：

红色方框中的累计评论数和交易成功数就是使用 ajax 异步输出的。当整个网页所有的请求都加载完毕之后，数据会显示出来：

之后，当我们查看网页源代码的时候，累计评论数和交易成功数都是 "-"：

本文所用的解决办法，直接上代码：

1. var webPage = require('webpage');//创建一个 webpage 模块的实例

2. var page = webPage.create();

4. var taobaoURL = 'https://item.taobao.com/item.htm?id=545533644459';//淘宝某一商品的链接

6. page.viewportSize = { width: 1440, height: 1080 };

7. page.settings.userAgent = "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36";

8. //page.settings.loadImages = false;//禁止加载图片

9. //page.settings.userAgent = "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.31 (KHTML, like Gecko) PhantomJS/19.0";

11. page.open(taobaoURL, function(status) 

12. {

14. if(status !== 'success') 

15. {

16.         console.log("open fail!");

17.     }else

18.     {

19.     //由于是拉取异步数据，我们打开页面后，等待若干秒后再去操作 dom （这里设置成 3 秒），获取累计评论

20.     setTimeout(function() 

21.     {

23.         var result = page.evaluate(function()

24.         {

25.             return document.getElementById("J_RateCounter").innerText;

26.         });

28.         console.log('累计评论：' + result + '条');

30.         //生成当前页面截图

31.         page.render("taobao.png");

33.         phantom.exit();

35.     }, 3000);

36.     }

38. });

执行该文件得到最后的结果：

生成的网页截图如下：