动态网页抓取( Ajax基本原理发送Ajax请求到网页更新的过程可以简单以下3步)

　　动态网页抓取(

Ajax基本原理发送Ajax请求到网页更新的过程可以简单以下3步)

　　from selenium import webdriver

# chromedriver的绝对路径

driver_path = r'D:\ProgramApp\chromedriver\chromedriver.exe'

# 初始化一个driver，并且指定chromedriver的路径

driver = webdriver.Chrome(executable_path=driver_path)

# 请求网页

driver.get("https://www.baidu.com/")

# 通过page_source获取网页源代码

print(driver.page_source)

　　阿贾克斯基础

　　向网页更新发送 Ajax 请求的过程可以简单分为以下 3 个步骤：

　　这三个步骤实际上是由 JavaScript 完成的；

　　越来越多的网页使用Ajax请求，了解一些基本的网页抓取基础知识可以帮助我们在抓取时成功获取我们需要的数据，尤其是动态网页的抓取还是比较难的，上手比较困难。太熟练的人，可以通过实战进行更多的练习。

　　以下是我自己使用的直播课。在上帝的帮助下，我学习并操作了许多网页。有兴趣的可以去看看↓↓

　　

　　接下来看看Ajax请求

　　我们知道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();

　　Ajax 有其特殊的请求类型，称为 XHR (XMLHttpRequest)

　　这是 JavaScript 对 Ajax 的底层实现。其实就是新建一个 XMLHttpRequest 对象，然后调用 onreadystatechange 属性设置*敏*感*词*器，然后调用 open() 和 send() 方法向一个链接（也就是服务器）发送请求。

　　JavaScript 具有更改网页内容的能力。解析响应内容后，可以调用 JavaScript 对网页进行解析处理。

　　例如，通过document.getElementById().innerHTML等操作，可以改变元素中的源代码，从而改变网页上显示的内容。该操作也称为DOM操作，即对Document网页的Document操作，如更改、删除等。

　　要查看 Ajax 请求，我们可以使用 Chrome 的开发者工具，该工具可以查看页面加载期间浏览器与服务器之间发送的请求和接收的响应的所有记录。

　　以豆瓣电影为例查看Ajax请求

　　点击“Load More”后，可以找到一个Type为xhr的新请求，即Ajax请求。

　　

　　鼠标点击请求，查看请求的详细信息：

　　

　　在右侧我们可以观察到 Request Headers、URL 和 Response Headers 等信息；

　　点击“预览”查看响应内容：

　　

　　JavaScript 接收到数据后，执行相应的渲染方法，整个页面都被渲染出来了。

　　或者，我们可以切换到 Response 选项卡并观察真实的返回数据：

　　

　　切换回第一个请求并观察其响应：

　　

　　这是原创 URL 返回的内容，具有非常简单的代码结构，只执行一些 JavaScript。

　　因此，我们看到的页面的真实数据并不是原创页面返回的，而是在执行完 JavaScript 后，再次向后台发送 Ajax 请求，浏览器获取数据并进一步渲染。

　　模拟 Ajax 请求

　　使用 Chrome 开发者工具的过滤功能过滤掉所有的 Ajax 请求；

　　请求上方有一层过滤栏，直接点击XHR，下面显示的所有请求都是Ajax请求，然后点击“Load more”捕获所有Ajax请求。

　　

　　当我们开始学习时，我们需要一个标准来帮助我们验证自己的水平。现在市场上有很多学习课程，包括试听、直播，以及不同难度级别的课程可供选择。合理利用这些资源才能得到很好的满足。入门-学习-熟练使用的成长路径。

　　

　　案例演示流程：

　　以下是被抓取的微博马云首页内容的完整演示；

　　使用Chrome浏览器打开微博链接，然后在页面上右击，在弹出的快捷菜单中选择“检查”选项，就会弹出开发者工具。

　　此时会在Elements选项卡中观察到网页的源代码，节点的样式会在右边。但这不是我们要找的。切换到网络选项卡，然后再次刷新页面。

　　

　　我们可以找到一个名字以getIndex开头的请求，它的Type是xhr。这是一个 Ajax 请求。鼠标点击该请求，可以查看该请求的详细信息，如下图：

　　

　　在右侧，可以观察到它的 Request Headers、URL 和 Response Headers 等信息。请求标头之一是 X-Requested-With: XMLHttpRequest，它将请求标记为 Ajax 请求。

　　

　　然后单击预览以查看响应的内容。它是 JSON 格式。在这里，Chrome 会自动为我们解析它。单击箭头可展开和折叠相应的内容。

　　

　　您可以在这里找到返回结果的个人信息，例如昵称、*敏*感*词*、头像等，这也是用于呈现个人主页的数据。

　　您也可以切换到 Response 选项卡来观察真实的返回数据。

　　

　　……………………………………………………………………………………………………………………

　　然后使用Chrome开发者工具的过滤功能过滤掉所有Ajax请求：

　　

　　接下来继续滑动页面，可以看到新的微博在页面底部滑动，在开发者工具下一个个出现Ajax请求，这样我们就可以捕获所有Ajax请求了。

　　随意打开一个entry，可以清晰的看到它的Request URL、Request Headers、Response Headers、Response Body等，这时候模拟请求和提取就很简单了。

　　至此，我们已经能够分析出一些Ajax请求的详细信息了。接下来，我们只需要用程序模拟这些Ajax请求，就可以很方便的提取出我们需要的信息了。

　　分析请求

　　打开Ajax的XHR过滤器，然后不断滑动页面加载新的微博内容，可以看到会不断的发送Ajax请求。

　　选择其中一个请求，分析其参数信息，点击请求进入详情页面。

　　

　　这是一个GET类型的请求，请求有4个参数：type、value、containerid和page。

　　稍后再查看其他请求，可以看到它们的类型、值和 containerid 始终相同。type总是uid，value的值是页面链接中的数字，其实就是用户的id。另外还有containerid，改变的值为page。很明显，这个参数是用来控制分页的，page=1代表第一页，page=2代表第二页，以此类推。

　　

　　然后，观察这个请求的响应内容。

　　此内容为 JSON 格式，为方便我们浏览器开发工具会自动解析。

　　可以看出，最关键的两条信息是cardlistInfo和cards：前者收录了比较重要的信息总量，我们可以根据这个数字来估计页数；后者是一个列表，收录10个元素，我们可以展开一个来看看。

　　

　　这里的元素有一个比较重要的字段mblog；

　　展开它，找到它收录的一些微博信息，例如，mentions_count（点赞数）、comments_count（评论数）、reposts_count（转发数）、created_at（发布时间）、text（微博文本）等。

　　而且都是格式化的内容，所以我们请求一个接口就可以得到10条微博，请求时只需要更改页面参数即可。

　　在这种情况下，我们只需要做一个简单的循环就可以得到所有的微博。