Ajax数据解释和爬取-微博案例

什么是Ajax

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

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

例如:淘宝向下滑,上面内容没有动,下面在不断的出现新内容,这就是ajax加载

基本原理

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

(1) 发送请求; (2) 解析内容; (3) 渲染网页。

下面我们分别来详细介绍这几个过程。

发送请求

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

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

解析内容

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

渲染网页

JavaScript有改变网页内容的能力,解析完响应内容之后,就可以调用JavaScript来针对解析完的内容对网页进行下一步处理了。比如,通过document.getElementById().innerHTML这样的操作,便可以对某个元素内的源代码进行更改,这样网页显示的内容就改变了,这样的操作也被称作DOM操作,即对Document网页文档进行操作,如更改、删除等。

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

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

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

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

Ajax分析方法

查看请求

这里还需要借助浏览器的开发者工具,下面以Chrome浏览器为例来介绍。

首先,用Chrome浏览器打开微博的链接,随后在页面中点击鼠标右键,从弹出的快捷菜单中选择“检查”选项,此时便会弹出开发者工具

此时在Elements选项卡中便会观察到网页的源代码,右侧便是节点的样式。

不过这不是我们想要寻找的内容。切换到Network选项卡,随后重新刷新页面,可以发现这里出现了非常多的条目

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

Ajax其实有其特殊的请求类型,它叫作**xhr**。我们可以发现一个名称以getIndex开头的请求,其Type为xhr,这就是一个Ajax请求。用鼠标点击这个请求,可以查看这个请求的详细信息

在右侧可以观察到其Request Headers、URL和Response Headers等信息。其中Request Headers中有一个信息为X-Requested-With: XMLHttpRequest,这就标记了此请求是Ajax请求

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

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

另外,也可以切换到Response选项卡,从中观察到真实的返回数据

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

这是最原始的链接 https://m.weibo.cn/u/1917053352 返回的结果,其代码只有不到50行,结构也非常简单,只是执行了一些JavaScript。

所以说,我们看到的微博页面的真实数据并不是最原始的页面返回的,而是后来执行JavaScript后再次向后台发送了Ajax请求,浏览器拿到数据后再进一步渲染出来的。

过滤请求

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

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

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

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

Ajax 爬取

分析请求

打开Ajax的XHR过滤器,然后一直滑动页面以加载新的微博内容。可以看到,会不断有Ajax请求发出。

选定其中一个请求,分析它的参数信息。点击该请求,进入详情页面

可以发现,这是一个GET类型的请求,请求链接为

请求的参数有4个:typevaluecontainerid和 since_id 其中type、value、containerid 是保持不变的,since_id每次是变动的。

在原文中最后一个参数是page,但是我这里显示的为since_id,经过仔细观察发现 since_id 是翻页的参数,而且这个会在 cardlistInfo 选项卡里出现下一次翻页的since_id,所以我们还是可以一页一页爬下去。

分析响应

随后,观察这个请求的响应内容

这个内容是JSON格式的,浏览器开发者工具自动做了解析以方便我们查看。可以看到,最关键的两部分信息就是cardlistInfocards:前者包含一个比较重要的信息total,观察后可以发现,它其实是微博的总数量,我们可以根据这个数字来估算分页数;后者则是一个列表,它包含10个元素,展开其中一个看一下

可以发现,这个元素有一个比较重要的字段mblog。展开它,可以发现它包含的正是微博的一些信息,比如attitudes_count(赞数目)、comments_count(评论数目)、reposts_count(转发数目)、created_at(发布时间)、text(微博正文)等,而且它们都是一些格式化的内容。

这样我们请求一个接口,就可以得到10条微博,而且请求时只需要改变 since_id 参数即可。

这样的话,我们只需要简单做一个循环,就可以获取所有微博了。

实战演练

原文中的是page参数,现在为 since_id

pyquery主要作用为去掉a链接相关内容,只保留文字

多加了一项保存图片链接,但是还有很多瑕疵~

爬取部分内容展示:

程序员未雨

Do one thing at a time, and do well.

暂无评论

发表评论

您的电子邮件地址不会被公开,必填项已用*标注。

相关推荐

鼠标轨迹的检测和原理

我们在浏览器鼠标拖动某个 web元素组件 时,是会记录一些坐标位置的,但是selenium 偏移时会造成只有起始点和终点的坐 ...

滑块验证码案例一

目标网址:http://www.porters.vip/captcha/jigsaw.html 观察结论: 当鼠标点击紫色按钮后,会出现缺口 查看html元素, ...

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

Ajax数据解释和爬取-微博案例