什么是Ajax?

文章目录

  • 什么是Ajax
  • 1.实例引入
  • 2.基本原理
    • 发送请求
    • 解析内容
    • 渲染网页

有时候,我们在用requests抓取页面的时候,得到的结果可能和在浏览器中看到的不一样:在浏览器中可以看到正常显示的页面数据,但是使用requests得到的结果并没有。这是 因为requests获取的都是原始的HTML文档,而浏览器中的页面则是经过JavaScript处理数据后生成的结果,这些数据的来源有多种,可能是通过Ajax加载的,可能是包含在HTML文档中的,也可能经过JavaScript和特定算法计算后生成的。
对于第一种情况,数据加载是一种异步加载方式,原始的页面最初不会包含某些数据,原始页面加载完后,会再向服务器请求某个接口获取数据,然后数据才被处理从而呈现到网页上,这其实就是发送了一个Ajax请求。
照Web发展的趋势来看,这种形式的页面越来越多。网页的原始HTML文档不会包含任何数据,数据都是通过Ajax统一加载后呈现出来的,这样在Web开发商做到前后端分离,而且降低服务器直接渲染页面带来的压力。
所以如果遇到这样的页面,直接利用requests等库来抓取原始页面,是无法获取到有效数据的,这时需要分析网页后台向接口发送的Ajax请求,如果可以用requests来模拟Ajax请求,那么就可以成功抓取了。
下面我们来了解一下什么是Ajax请求。

什么是Ajax

Ajax,全称为Asynchronous JavaScript and XML,即异步的JavaScript和XML。它不是一门编程语言,而是利用JavaScript在保证页面不被刷新、页面链接不改变的情况下与服务器交换数据并更新部分网页的技术。
对于传统网页,如果想更新其内容,那么必须要刷新整个页面,但有了Ajax,便可以在页面不被全部刷新的情况下更新其内容。在这个过程中,页面实际上是在后台与服务器进行了数据交互,获取到数据之后,再利用JavaScript改变网页,这样网页内容就会更新了。

1.实例引入

浏览网页的时候,我们会发现很多网页都有下滑查看更多的选项。比如,拿微博来说,以许嵩的主页为例:https://m.weibo.cn/u/1251000504,切换到微博页面,一直下滑,可以发现下滑几个微博后就没有了,转而出现一个加载的动画,然后下方继续出现新的微博内容,这个过程其实就是Ajax加载的过程:
什么是Ajax?_第1张图片
我们注意到页面其实没有整个刷新,也就意味着页面的链接没有变化,但是网页中却多了新内容,也就是后面刷出来的新微博。这就是通过Ajax获取新数据并呈现的过程。

2.基本原理

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

  • (1)发送请求
  • (2)解析内容
  • (3)渲染网页
    下面我们分别详细了解这几个过程

发送请求

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

var xmlhttp;
if (window.XMLHttpRequest){
	//code for IE7+,Firefox,Chrmoe,Opera,Safari
	xmlhttp=new XMLHttpRequest();
}else{//code for IE5,IE6
	xmlhttp=new ActiveXObject("Mircrosoft.XMLHTTP");
}
xmlhttp.onreadystatchange=function(){
	if(xmlhttp.readyState==4 && xmlhttp.stutus == 200){
		document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
	}
}
xmlhttp.open("POST","/ajax/",true);
xmlhttp.send();

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

解析内容

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

渲染网页

JavaScript有改变网页内容的能力,解析完响应内容之后,就可以调用JavaScript来针对解析完的内容对网页进行下一步处理了。比如,通过document.getElementById().innerHTML这样的操作,便可以对某个元素内的源代码进行更改,这样网页显示的内容就改变了,这样的操作也被称做DOM操作,即对Document网页文档进行操作,如更改、删除等。
上面例子中,document.getElementById(“myDiv”).innerHTML = xmlhttp.responseText便将ID为myDiv的节点内部的HTML代码更改为服务器返回的内容,这样myDiv元素内部便会呈现服务器返回的新数据,网页的部分内容看上去就更新了。
我们观察到,这3个步骤其实都是JavaScript完成的,它完成了整个请求、解析和渲染的过程。
再回想微博的下拉刷新,这其实就是JavaScript向服务器发送了一个Ajax请求,然后获取新的微博数据,将其解析,并将其渲染在网页中。
因此,我们知道,真实的数据其实都是一次次Ajax请求得到的,如果想要抓取这些数据,需要知道这些数据到底是怎么发送的,发往哪里,发了哪些参数。如果我们知道了这些,就可以用Python模拟这个操作,获取其中结果了。

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