原创不易,转载前请注明博主的链接地址:Blessy_Zhu https://blog.csdn.net/weixin_42555080
本次代码的环境:
运行平台: Windows
Python版本: Python3.x
IDE: PyCharm
一、 问题引入
在爬虫的过程中,会看到如下情况,以微博评论为例子:向下滑动滚动条,却发现出现如图1所示的加载延迟(如果网络环境较好,看到的概率较小),摁下F12打开开发者工具后,继续滑动滚动条,里面出现了很多type为xhr的文件,如图2。这个时候,用requests中的get()方法爬取原生的HTML文档,却发现里面并没有要找的加载的评论内容。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190307202810873.png)
图1
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190307195818514.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU1NTA4MA==,size_16,color_FFFFFF,t_70)
图2
然后,继续点开一个type类型的xhr文件,并依次按照Network–>XHR—>Preview可以看到页面上显示的数据在这个data—>comments—>text中,如图3所示。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190307204103274.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU1NTA4MA==,size_16,color_FFFFFF,t_70)
图3
通过不断加载,页面上的评论一片片的涌来,但是对应的url却没有发生任何变化,如图4所示
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190307195935251.png)
图4
这到底是什么呢?
原来那些数据是通过AJAX加载而来的,是一种异步加载方式,原始的页面最初不会包含某些数据,原始页面加载完后,会再向服务器请求某个接口获取数据,然后数据才被处理从而呈现到网页上,这其实就是发送了一个Ajax请求。按照Web发展的趋势来看,这种形式的页面越来越多。网页的原始HTML文档不会包含任何数据,数据都是通过Ajax统一加载后再呈现出来的,这样在Web开发上可以做到前后端分离,而且降低服务器直接渲染页面带来的压力。
二 AJAX概述
什么是Ajax?
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML 或者是 HTML(标准通用标记语言的子集)。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面
概括的来说,Ajax实际就是XMLHttpRequest对象和DOM、(X)HTML和CSS的简称,用于概括异步加载页面内容的技术。实际上,页面是在后台与服务器进行数据交互,获得了数据之后,再利用JavaScript改变网页,这样网页的内容就会被更新了。
三 详细讲解
简单了解Ajax后,接下来,再详细认识一下它的基本原理。发送Ajax请求到网页更新这个过程可以分为三步:
- (1) 发送请求
- (2) 解析内容
- (3) 渲染显示页面
如5所示,客户端发送请求给服务器,服务器收到请求后,将type为xhr的文件返送给客户端,客户端进行解析并渲染显示页面。
图5
1 发送请求
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 == 20){
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POSt","ajax在服务器的位置",true);
xmlhttp.send();
(1) 上述代码中核心对象是XMLHttpRequest这正是Ajax的技术基础。所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject) XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
- 创建 XMLHttpRequest 对象,所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
- 创建 XMLHttpRequest 对象的语法:
variable=new XMLHttpRequest();
- 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
variable=new ActiveXObject("Microsoft.XMLHTTP");
- 为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :
(2)向服务器发送请求
如需将请求发送到服务器,我们使用XMLHttpRequest 对象的 open() 和 send()方法:
xmlhttp.open("GET","test.txt",true);
xmlhttp.send();
方法 | 描述 |
---|---|
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。(1)method:请求的类型; GET或POST(2)ur/:文件在服务器上的位置(3)asymc: true(异步)或false (同步) |
send(string) | 将请求发送到服务器。string: 仅用于POST请求 |
(3) 接下来讨论open(method,url,async)
1)GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,需要使用 POST 请求:
- 无法使用缓存文件(必须需要更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
① GET 请求
一个简单的 GET 请求:xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
在上面的例子中,可能得到的是缓存的结果。
为了避免这种情况,请向 URL 添加一个唯一的 ID:
如果希望通过 GET 方法发送信息,请向 URL 添加信息:xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
② POST 请求
一个简单 POST 请求:xmlhttp.open("POST","demo_post.asp",true);
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
2)open() 方法的 url 参数是服务器上文件的地址:
该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。
3) 异步 - True 或 False?
AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:
对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。通过 AJAX,JavaScript 无需等待服务器的响应,而是:
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理
- Async = true
当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数: - Async = false
如需使用 async=false,请将 open() 方法中的第三个参数改为 false:
xmlhttp.open(“GET”,“test.txt”,false);
2 解析内容
实际上就是新建了XMLHttpRequest 对象,然后调印onreadystatechange属性设置了监听,然后调用open()和send()方法向某个链接(也就是服务器)发送了请求。前面用Python实现请求发送之后,可以得到响应结果,但这里请求的发送变成JavaScript来完成。由于设置了监听,所以当服务器返回响应时,onreadystatechange对应的方法便会被触发,然后在这个方法里面解析响应内容即可。
得到响应之后,onreadystatechange 属性对应的方法便会被触发,此时利用xmlhttp 的responseText属性便可取到响应内容。这类似于Python 中利用requests向服务器发起请求,然后得到响应的过程。那么返回内容可能是HTML,可能是JSON,接下来只需要在方法中用JavaScript进一步处理即可。比如,如果是JSON的话,可以进行解析和转化。
3 渲染并显示页面document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象responseText 或 responseXML 属性。
属性 | 描述 |
---|---|
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得XML形式的响应数据。 |
其中responseText用于获取文本或json格式的数据,而responseXML用于获取XML文档。
获得相应,接收到xhr文件之后,剩下的事情就交给JavaScript来做了,比如,JavaScript会针对解析完的内容对网页进行下一步处理。document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
会将id为myDiv的节点内部的HTML代码更改为服务器返回的内容,这样myDiv元素便会呈现出服务器返回的新数据,网页就会实现部分内容的更新。
三 总结
Ajax优点是很明显的:可以减少页面刷新请求,实现局部数据更新。
当然,缺点是可访问性降低,搜索引擎不友好,此外如果滥用Ajax请求,反而会导致无谓的请求增多,比如一般而言通过异步请求加载文章内容是低效的,本来只要1次请求,被拆分成2次请求(一次加载页面框架,一次加载内容)。这篇文章主要介绍了什么是Ajax以及Ajax底层实现原理: (1) 发送请求(2) 解析内容(3) 渲染显示页面,从而更好的认识Ajax,为以后爬取Ajax加载的数据奠定理论基础。这篇文章就到这里了,欢迎大佬们多批评指正,也欢迎大家积极评论多多交流。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190308134020134.png)