Python爬虫学习( 四 )——Ajax数据爬取

Python之Ajax数据爬取

引言

​ 有时候我们在用requests抓取网页的时候,得到的结果可能和在浏览器中看到的不一样:在浏览器中可以看到正常显示的页面数据,但是使用requests得到的结果并没有

​ 这是因为requests获取的数据都是原始的HTML文档,而浏览器中的页面则是经过 JavaScript 处理数据后生成的结果,这些数据的来源有很多种,可能是通过 Ajax 加载的,可能是包含在 HTML 文档中的,也可能是经过 JavaScript 和特定算法计算后生成的。

​ 对于第一种情况,数据加载是一种异步加载方式,原始的页面最初不会包含某些数据,原始页面加载完后,会向服务器请求某个接口获取数据,然后数据才被处理从而呈现到网页上,这其实就是发送了一个 Ajax 请求。

​ 照Web发展的趋势来看,这种形式的页面越来越多。网页的原始HTML文档不会包含任何数据,数据都是通过 Ajax 统一加载后再呈现出来的,这样在 Web 开发上可以左到前后端分离,而且降低服务器直接渲染页面带来的压力。

​ 所以如果遇到这样的页面,直接利用 requests 等库来抓取原始网页,是无法获取到有效数据的,这时需要分析网页后台向接口发送的 Ajax请求,如果可以用requests来模拟 Ajax 请求,那么就可以成功抓取了。

什么是Ajax?

​ Ajax,全称为 Asynchronous JavaScript and XML,即异步的 JavaScript 和 XML。它不是一门编程语言,而是利用 JavaScript 在保证页面不被刷新、页面链接不改变的情况下与服务器交换数据并更新部分网页的技术。

​ 对于传统的网页,如果想更新其内容,那么必须要刷新整个页面,但有了 Ajax,便可以在页面不被全部刷新的情况下更新其内容。在这个过程中,页面实际上是在后台与服务器进行了数据交互,获取到数据之后,再利用 JavaScript 改变网页,这样网页内容就会更新了。

1.实例引入

​ 浏览网页的时候,我们会发现很多网页都有下滑查看更多的选项。比如,下面的这个腾讯新闻网,一直下滑,可以发现下滑几个新闻之后,再向下就没有了,转而会出现一个加载中的动画,不一会儿下方就继续出现了新的新闻内容,这个过程其实就是 Ajax 加载的过程

在这里插入图片描述

​ 我们注意到页面其实并没有整个刷新,也就意味着页面的链接没有变化,但是网页中却多了新内容,也就是后面刷出来的新新闻。就这是通过 Ajax 获取新数据并呈现的过程。

2.基本原理

​ 初步了解了 Ajax之后,我们再来详细了解它的基本原理。发送 Ajax 请求到网页更新的这个过程可以简单分为以下3步:

(1)发送请求;

(2)解析内容;

(3)渲染网页。

  • 发送请求

    ​ 我们知道 JavaScript 可以实现页面的各种交互功能,Ajax也不例外,它也是由JavaScript实现的,实际上执行了如下代码:

    var xmlhttp;
    if(window.XMLHTTPRequest)
    {
    	//code for IE7+,Firefox,Chrome,Opera,Safari
    	xmlhttp = new XMLHTTPRequest();
    }
    else
    {
    	//code ofr IE6,IE5
    	xmlhtpp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementByID("myDiv").innerHTML=xmlhttp.responseText;
            }
    }
    xmlhttp.open("post","/ajax/",true);
    xmlhttp.send();
    

    ​ 这是 JavaScript 对 Ajax 最底层的实现,实际上就是新建了 XMLHTTPRequest 对象,然后调用onreadystatechange 属性设置了监听,然后调用open( )和send( )方法向某个链接( 也就是某个服务器 )发送了请求。前面用Python实现请求发送之后,可以得到响应结果,但这里请求的发送变成JavaScript来完成。由于设置了监听,所以当服务器返回响应时候,onreadystatechange 对应的方法便会被触发,然后再这个方法里面解析响应内容即可。

  • 解析内容

    ​ 得到响应之后,onreadystatechange 属性对应的方法便会被触发,此时利用 xmlhttp 的responseText 属性便可取到响应内容。

    ​ 这类似于Python中利用request向服务器发起请求,然后得到响应的过程。那么返回内容可能是HTML,可能是JSON,接下来只需要在方法中用 JavaScript 进一步处理即可。比如,如果是JSON的话,可以进行解析和转化。

  • 渲染网页

    ​ JavaScript有改变网页内容的能力,解析完响应内容之后,就可以调用 JavaScript 来针对解析完的内容来对网页进行下一步处理了。

    ​ 比如,通过document.getElementById( ).innerHTML 这样的操作,便可以对某个元素内的源代码进行更改,这样网页显示的内容就改变了,这样的操作也被称作 DOM 操作,即对 Document 网页文档进行操作,如更改、删除等。

    ​ 上例中,document.getElementById(“myDiv”).innerHTML 便将ID为myDiv的节点内容的HTML代码更改为服务器返回的内容,这样 myDiv 元素内部便会呈现出服务器返回的新数据,网页的部分内容看上去就更新了。

    ​ 我们观察到,这3个步骤其实都是由 JavaScript 完成的,它完成了整个请求、解析和渲染的过程。

    ​ 再回想腾讯新闻的下拉刷新,这其实就是JavaScript向服务器发送了一个Ajax请求,然后获取新的新闻数据,将其解析,并将其渲染在网页中。

    ​ 因此,我们知道,真实的数据其实都是一次次 Ajax 请求得到的,如果想要抓取这些数据,需要知道这些请求到底是怎么发送的,发往那里,发了哪些参数。如果我们知道了这些,不就可以用Python模拟这个发送操作,获取到其中的结果了吗?

    3.Ajax分析方法

    ​ 现在以微博为例,我们知道拖动刷新的内容由Ajax加载,而且网页的URL没有变化,那么应该到哪里取查看这些Ajax请求呢?

    1.查看请求

    ​ 打开微博的开发者工具,重新刷新网页,切换到Network选项卡,可以看到多出来许多条目。

    在这里插入图片描述

    ​ 前面有提到,这里其实就是在页面加载过程中浏览器与服务器之间发送请求和接收响应的所有记录。

    Ajax其实有其特殊的请求类型,它叫xhr。在图片中,我们可以发现一个名称以getIndex开头的请求,其Type为xhr,这就是一个Ajax请求。

    在这里插入图片描述

    ​ 用鼠标点击这个请求,可以查看这个请求的详细信息。在右侧可以观察到其 Request Headers、URL 和 Response Headers 等信息。

    ​ 其中Request Headers中有一个信息为X-Requested-With:XMLHttpRequest这就标记了此请求是Ajax请求。

    在这里插入图片描述

    ​ 随后点击以下Preview,即可以看到响应的内容,它是JSON格式的。这里浏览器为我们自动做了解析,点击箭头即可展开和收起响应的内容。

    ​ 观察可以发现,这里返回的解释是个人的信息,如昵称、简介、头像等,这也是用来渲染个人主页所使用的数据。JavaScript接受到这些数据之后,再执行响应的渲染方法,整个页面就渲染出来了。

    在这里插入图片描述

    ​ 接下来,切回第一个请求,观察一下它的Response是什么。

    在这里插入图片描述

    ​ 这是最原始的链接返回的结果,其代码只有不到50行,结构也非常简单,只是执行了一些JavaScript后再次向后台发送了Ajax请求,浏览器拿到数据后再进一步渲染出来的。

    2.过滤请求

    ​ 接下里,再利用开发者工具的筛选功能筛选出所有的 Ajax 请求。在请求的上方有一层筛选栏,直接点击XHR,此时在下方显示的所有请求便都是Ajax请求了。

    在这里插入图片描述

    ​ 接下来,不断滑动页面,可以看到页面底部有一条条新的微博被刷出,而开发者工具下方也一个一个地出现 Ajax 请求,这样我们就可以捕获到所有的Ajax请求了。

    ​ 随意点开一个条目,都可以清楚地看到其 Request URL、Request Headers、Response Headers、Response Body等内容,此时想要模拟请求和提取就非常简单了。

    ​ 到现在为止,我们已经可以分析出Ajax请求的一些详细信息了,接下来只需要用程序模拟这些Ajax请求,就可以轻松提取我们所需要的信息了。
    equest Headers、Response Headers、Response Body等内容,此时想要模拟请求和提取就非常简单了。

    ​ 到现在为止,我们已经可以分析出Ajax请求的一些详细信息了,接下来只需要用程序模拟这些Ajax请求,就可以轻松提取我们所需要的信息了。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值