html解析数据原理,AJAX数据爬取基本认识及原理

原创不易，转载前请注明博主的连接地址：Blessy_Zhu https://blog.csdn.net/weixin_42555080

本次代码的环境：

运行平台： Windows

Python版本： Python3.x

IDE： PyCharmphp

1、 问题引入

在爬虫的过程当中，会看到以下状况，以微博评论为例子：向下滑动滚动条，却发现出现如图1所示的加载延迟(若是网络环境较好，看到的几率较小)，摁下F12打开开发者工具后，继续滑动滚动条，里面出现了不少type为xhr的文件，如图2。这个时候，用requests中的get()方法爬取原生的HTML文档，却发现里面并无要找的加载的评论内容。

java

图1

图2

而后，继续点开一个type类型的xhr文件，并依次按照Network–>XHR—>Preview能够看到页面上显示的数据在这个data—>comments—>text中，如图3所示。

web

图3

经过不断加载，页面上的评论一片片的涌来，可是对应的url却没有发生任何变化，如图4所示

ajax

图4

这究竟是什么呢？

原来那些数据是经过AJAX加载而来的，是一种异步加载方式，原始的页面最初不会包含某些数据，原始页面加载完后，会再向服务器请求某个接口获取数据，而后数据才被处理从而呈现到网页上，这其实就是发送了一个Ajax请求。按照Web发展的趋势来看，这种形式的页面愈来愈多。网页的原始HTML文档不会包含任何数据，数据都是经过Ajax统一加载后再呈现出来的，这样在Web开发上能够作到先后端分离，并且下降服务器直接渲染页面带来的压力。数据库

二 AJAX概述

什么是Ajax?json

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加载的数据奠基理论基础。这篇文章就到这里了，欢迎大佬们多批评指正，也欢迎你们积极评论多多交流。