Ajax数据爬取-爬虫篇

To be continue
前言:
有时候我们用requests抓取页面的时候,得到的结果可能和在浏览器中看到的不一样:在浏览器中可以看到正常显示的页面数据,但是使用reuqest的到的结果并不一样。这是因为request获取的都是原始的HTML文档,而浏览器中的页面则是经过JavaScript处理数据后生成的结果,可能是通过Ajax加载的,可能是包含的HTML文档中的,也可能是经过JavaScript和特定的算法计算后生成的。
现在针对第一种情况,数据加载是一种异步加载方式,原始的页面最初不会包含某些数据,原始页面加载完后,再向服务器请求某个接口获取数据,然后数据才被处理从而呈现到网页上,这其实就是发送了一个Ajax请求。
什么是Ajax:
Ajax,全程Asynchronous JavaScript and XML,即异步的JavaScript 和XML。利用JavaScript在保证页面不被刷新、页面链接不改变的情况下与服务器交换数据并更新部分网页的技术。
实例引入:
在浏览网页的时候,我们会发现很多网页都有下滑查看更多的选项。拿youtube来说,如下图,一直下滑,可以发现下滑几个之后,转而会出现一个加载的动画,不一会下方就继续出现新的内容,这个过程其实就是Ajax加载的过程。
在这里插入图片描述
基本原理:
初步了解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 for IE6,IE5
	xmlhttp = 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中利用requests向服务器发起了请求,然后得到响应的过程。那么返回内容可能是HTML,可能是JSON,接下来只需在方法中用JavaScript进一步处理即可。
比如,如果是JSON的话,可进行解析和转化。
渲染网页
JavaScript有改变网页内容的能力,解析完响应内容之后,就可以调用JavaScript来针对解析完的内容对网页进行下一步处理了。比如,通过document.getElementById().innerHTML这样的操作,便可以对某个元素内的源代码进行操作,比如更改、删除等。
上例中,document.getElementById(“myDiv”).innerHTML = xmlhttp.responseText便将ID为myDiv的节点内部的HTML代码更改为服务器返回的内容,这样myDiv元素内部便会呈现出服务器返回的新的数据,网页的部分内容看上去就更新了。
我们看到,这三个步骤其实都是由JavaScript完成的,它完成了整个请求、解析、渲染的过程。再回想youtube的下拉刷新,这其实就是JavaScript向服务器发送了一个Ajax请求,然后获取新的数据,将其解析,并将其渲染在网页中。
因此,我们知道,真实的数据其实都是一次次的Ajax请求得到的,如果想要抓取这些数据,需要知道请求到底是怎么发送的,发往哪里,发了哪些参数。如果我们知道了这些,不就可以用Python模拟这发送操作,获取到其中的结果了吗?
我们就来了解下哪里可以看到这些后台Ajax操作,了解它到底是怎么发送的,发送了什么参数。
Ajax分析方法
这里还是以前面的youtube为例,我们知道拖动刷新的内容由Ajax加载,而且页面的URL没有变化,那么应该到哪里去查看这些Ajax请求呢?
1.查看请求
这里还需要借助浏览器的开发者工具,下面以chrome浏览器为例来介绍。
首先,用chrome浏览器打开youtue的链接
按下F12,切换到Network选项卡,随后按下F5重新刷新页面,可以发现这里出现了非常多的条目。如下图所示:
在这里插入图片描述
前面也提到,这里其实就是在页面加载过程中浏览器与服务器之间发送请求和接收响应的所有记录。
Ajax其实有其特殊的请求类型,它叫做xhr。如下图中,我们可以发现一个名称以getIndex开头的请求,其Type为xhr,这就是一个Ajax请求。
在这里插入图片描述
在右侧可以观察到其Reques Headers、URL和Response Headers等信息。其中Request Headers中有一个信息为
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值