爬虫篇:动态网页的处理方式(上)——逆向工程

###每篇一句:

A man is not old as long as he is seeking something. A man is not old until regrets take the place of dreams.


动态网页简介:

在我们编写爬虫时,可能会碰到以下两种问题:

  • 我们所需要爬取的数据在网页源代码中并不存在;
  • 点击下一页跳转页面时,网页的URL 并没与发生变化;

造成这种问题原因是,你所正在爬取的页面采取了动态加载的方式,是一个动态网页。

所谓的动态网页,是指跟静态网页相对的一种网页编程技术。静态网页,随着html代码生成,页面的内容和显示效果就不会发生变化了。而动态网页则不然,其显示的页面则是经过Javascript处理数据后生成的结果,可以发生改变。这些数据的来源有多种,可能是经过Javascript计算生成的,也可能是通过Ajax加载的。

动态网页经常使用的一种技术是Ajax请求技术。

  • Ajax:

    Ajax = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),其最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页的内容。

    • 想要了解更多有关Ajax技术的可以看这里:
      1. AJAX教程——菜鸟教程
      2. jQuery ajax -ajax()方法——W3school

目前,越来越多的网站采取的是这种动态加载网页的方式,一来是可以实现web开发的前后端分离,减少服务器直接渲染页面的压力;二来是可以作为反爬虫的一种手段。


爬虫处理动态页面的两种方式

  • 逆向工程
  • 渲染动态网页
    • 使用pyside或ghost.py
  • selenium模拟浏览器

接下来就以 新浪读书——书摘 这个网站为例(典型的Ajax请求技术应用),采用这两种方法分别介绍一下爬虫如何处理这种动态页面,获取所需要数据的。


逆向工程:

对于动态加载的网页,我们想要获取其网页数据,需要了解网页是如何加载数据的,该过程就被成为逆向工程

对于使用了Ajax 请求技术的网页,我们可以找到Ajax请求的具体链接,直接得到Ajax请求得到的数据。

  • 需要注意的是,构造Ajax请求有两种方式:
    • 原生的Ajax请求,会直接创建一个XMLHTTPRequest对象。
    • 调用jQuery的ajax()方法。一般情况下,$.ajax()会返回其创建的XMLHTTPRequest对象;但是,如果$.ajax()dataType参数指定了为scriptjsonp类型,$.ajax()不再返回其创建的XMLHTTPRequest对象。

对于这两种方式,只要创建返回了XMLHTTPRequest对象,就可以通过Chrome浏览器的调试工具在NetWork窗口通过设置XHR过滤条件,直接筛选出Ajax请求的链接;如果是$.ajax()并且dataType指定了为scriptjsonp,则无法通过这种方式筛选出来。


示例:

接下来以 新浪读书——书摘 为例,介绍如何得到无法筛选出来的Ajax请求链接:

  1. 在Chrome中打开网页,右键检查,会发现首页中书摘列表包含在一个id为subShowContent1_static的div中,而查看网页源代码会发现id为subShowContent1_static的div为空。

    点击更多书摘下一页时,网页URL并没有发生变化。

    与我们最前面所说的两种情况相同。

  2. F12打开调试工具,打开NetWork窗口*(功能是记录浏览器的活动记录network activities)*,F5刷新,可以看到浏览器发送以及接收到的数据记录:

    爬虫篇:动态网页的处理方式(上)——逆向工程_第1张图片

    其实我们所找的Ajax请求链接就是其中一条。

    首先设置XHR过滤条件:

    爬虫篇:动态网页的处理方式(上)——逆向工程_第2张图片

    发现为空白,可以推断出这个网页采用的Ajax请求应该是设置了dataTypescript或者jsonp

  3. 重新打开调试工具,点击网页上的更多书摘,发现NetWork窗口出现了很多记录,网页也多了新的内容,说明浏览器向服务器发送了请求。

    在网页上,右键检查 更多书摘,观察次元素绑定的JavaScript事件:

    JavaScript

    根据JavaScript的知识:javascript:是一个伪协议,表示在触发时,执行一段JavaScript代码,而javascript:;表示什么都不执行,这样点击时就没有任何反应。但一般在这种情况下,会给绑定一个事件回调,来执行业务.

    接下来就需要在网页的JavaSCript代码中找到更多书摘所触发的回调函数。

  4. 右键检查网页源代码Ctrl+F搜索subShowContent1_loadMore”(元素更多书摘的id),发现并没有某个具体的函数与之相关:

    爬虫篇:动态网页的处理方式(上)——逆向工程_第3张图片

    这说明更多书摘的回调函数不在网页自身写的JavaScript代码中,那就应该在网页嵌入的JS文件中(通过

你可能感兴趣的:(爬虫)