爬虫实例（5）网页动态内容的识别

爬虫实例（5）动态网页

对于静态网页，我们只需要访问对应的URL就可以获得全部的数据了，动态网页则没有这么简单。
比如这个网站，可谓秀中秀之超级秀！！！

edx
不愧是世界顶尖大学联盟的公开课平台，代码就是牛，操作就是骚。。。

本节目标：网页动态内容
本节内容：理解网页动态内容
本节技术点：浏览器观察并理解网页的动态内容

本节阅读需要（15）min。
本节实操需要（15）min。

---

---

前言

所谓的动态网页，是指跟静态网页相对的一种网页编程技术。静态网页，随着html代码的生成，页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。而动态网页则不然，页面基础的代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。

所以动态网页的内容是需要一定的条件才会有的。很多数据无法直接访问。

凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。

---

一、动态网页的类型

ajax

具体的内容见另一篇博客。
动态网页ajax

js动态网页

其实和ajax是很难区分开来的。

js实现的动态网页，一般指的是不依赖于和服务器交换数据的js操作而来的网页。

js动态网页，一般这种可能就是一些比如提醒信息，画廊，动画卡通，页面特效之类。
一般都是数据其实一次都加载完了，但是还需要各种根据用户操作变化而变化的呈现方式的处理。

当然也有可能很复杂。会改变链接，从而引入大量的新的内容。不过是少数。。。

二、判断动态加载

说了那么多，如何快速的判断一个网页是不是动态加载的呢？如何判断一段内容是不是动态加载的呢？

根据程序get请求的返回值

F12打开一个网页如果HTML内容很多，还有不停跳动的元素，网页大概率就是动态加载的。

这个时候我们用程序试着请求，查看返回的text如果发现内容明显缩短，那就断定网页是动态加载的。
比对目标内容在HTML有没有就可以确定内容是不是动态加载的。

根据浏览器的最终返回值

最终返回值也就是查看器那个窗口的HTML结果。

以edx为例

不要忘记浏览器才是最好的前端解释器！！！

我们可以看到有很多的flex和event这些都是动态的过程。

根据浏览器的网络值（推荐）

相当于观察浏览器的返回的过程值

记得的查看网络值的时候要重新加载。
一般最开始的是我们请求的主页。

这个我时候我们就会发现这里的HTML与上面最终的HTML差别特别的大。
这就说明这个网页大量的用到了ajax，和js技术。。。

火狐浏览器比较好玩。关闭原始时候他会解析一下原始的，当作静态处理。还渲染了一下。。

所以大家可以猜猜用了多少ajax技术啊。。。

显然后面的那么多的都是追加过来的信息。

根据二次返回值XHR

F12打开调试，查看网络选项。然后如下：

返现了json数据，所以网页用到了ajax技术。
至于哪些内容用到了，需要查看返回的json内容了。都在里面。
但是寻找需要花费一番功夫，一般浏览器都有查找快捷键ctrl+F，可以快一点。

三、实例讲解

我们判断从edx的搜索页访问具体的课程页的过程中遇到了哪些动态内容吧。
我们的[目标页]

搜索页

搜索页
判断过了，如上肯定是用到了的。

学科页

通过网络返回内容的观察，多刷新几次，看清楚。
我们发现从搜索页到学科页用的是js，重定向了，url也改变了。这不是ajax

搜索工商管理，然后展示所有。
工商管理

但是同一个页面刷新，会发现不断的有返回值，对应的是画廊的内容。

这些明显是ajax，页面不变，内容不断冒出来。。。

课程页

课程主页
课程页链接会要求登录。尽管我们可以post提交登陆信息，但是这一节只谈识别。。。

和上面两个类似。。。

但是js和ajax可谓铺天盖地。。。好的学校就是牛

---

总结

查看xhr的时候要多看几个json数据。
一般有用的信息可能是分批加载到页面框架上的，所以每个网络返回数据都要留心。
不过可以根据类型和名称猜一猜。。。

简单总结：
1、JS是一门前端语言。
2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。
3、jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便

这些网页是纯英文的，别告诉我看不懂，那就尴尬了。。。
不过我想能看我文章的，水平不会那么差，哈哈哈哈哈。