chapter10-让你拥有“火眼金睛”的 Fiddr4 和其他工具

在前面的课程中，我们通过一个简单的天气预报服务，拓展了如何使用邮件、短信，以及部署在服务器上，完整的开发了一款可以正式使用的小程序。但是有的同学可能也会产生抱怨：这门课不是是爬虫入门吗？为什么讲的爬虫技术这么少呢？因此，本篇文章主要介绍我们接下来要使用，也是以后我们日常开发中经常用到的爬虫技术。同时，本文也简短的介绍一款网页分析利器fiddler4，方便我们“拨开”网页的云雾“。本文所涉及到的代码，你仍然可以从本门课程的Github页面上获取，同时也欢迎大家在讨论区进行讨论！

Ajax——让人爱让人恨的开发技术

如果同学们课后使用之前我们学到的爬虫技术，爬取某些热门网站的话，可能会出现这样一种问题——爬取到的内容，和自己看到的内容不一样。
如果你没遇到上述的情况，那请回忆一下，当我们访问GitChat首页，一直下滑我们的鼠标，发现首页能够展示刚打开网页时未显示的数据：

我们可以看到，当我们使用鼠标将网页拖到最下面时，页面会立刻载入新的内容——这些内容是我们刚开始访问的时候，并不存在的。有心的同学可能也发现当页面加载新的内容的时候，左下角也会相应的显示出网页URL。
那么，到底什么是Ajax呢？

Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

简单的来说，Ajax能够只加载网页的部分内容，一方面提高了网页显示的速度，另一方面也让我们的获取信息变得困难——Ajax让开发人员减少了工作量，让我们这些爬虫新手增加了难度。接下来，让我们解决这个问题。

Chrome——不仅仅是浏览器这么简单

从开始到现在，本门课程一直使用的是Chrome浏览器——除了它的确速度快、可以安装第三方插件外，最重要的是，它内置的"检查"功能，强大到甚至我们都不需要专业的网页分析工具。

接下来我们就要使用Chrome的检查功能，解析Ajax的数据。

注意！本文仅仅从技术角度分析如何解决Ajax加载数据的问题。

我们爬取的网页默认为GitChat首页，尝试获取其所加载的课程标题。
我们在之前就已经确认了该首页使用了Ajax技术，为了确定我们爬取的URL，我们在Chrome中，依次右击->检查->network栏，看它究竟是怎么加载的。

我们可以看到每次我们下拖网页时，系统就会通过Ajax加载对应的网页：

通过分析我们不难发现，在标注的绿色区域，系统分别加载了对应的数据，同时在下面，我们可以看到加载的网页，其实是存在一定的规律的：

https://gitbook.cn/chat/activity/40/60?  加载40-60序号的数据
https://gitbook.cn/chat/activity/60/80?  加载60-80序号的数据
https://gitbook.cn/chat/activity/80/100? 加载80-100序号的数据

让我们尝试直接访问一个网址：

返回的是一个Json格式的数据，让我们使用Python去解析它：

import requests
import json
import re
url = 'https://gitbook.cn/chat/activity/80/100?'

response = requests.get(url)
content  = json.loads(response.text)  ##将返回的数据以Json格式存储
data = content['data']
print(data)

看上去我们想要获取的数据都已经完成了，那么，真正打印出来的数据是什么呢？

软件测试从业者18条可行性发展路径
IDO老徐
测试经理
30职场.....

可以发现，我们真正得到的，只是网页的代码，并没有真正获取到标题。这个时候，我们就要使用我们之前提到过的，但是从来未使用的技术——正则表达式：

import re
url = re.findall('/gitchat/activity/\S{24}',data)
print(len(url))

在上述的代码中，我们导入了re模块，并且使用findall()函数，查找符合正则表达式的课程地址，让我们看现在打印什么吧：

['/gitchat/activity/5b401bcd920199317157e6ab', '/gitchat/activity/5b3aca0819d0a05d47ecc544', '/gitchat/activity/5b3dd77505765f300a81bfe0', '/gitchat/activity/5b4202fe13a6987360cdd26e', '/gitchat/activity/5b42ab12b840d242d3ee2232', '/gitchat/activity/5b42aac8326c9140b77d9081', '/gitchat/activity/5b42d4e64d8d8f115b62c585', .....

Bingo！我们成功获得了网址的地址，那么我们访问对应的网址，就可以获取到了Ajax加载的课程标题啦！什么？你还想看怎么获取标题的？那么就去Github上看对应的代码吧！

Finddler 4——一款实用的抓包工具

Fiddler是强大的抓包工具，它的原理是以web代理服务器的形式进行工作的，使用的代理地址是：127.0.0.1，端口默认为8888，我们也可以通过设置进行修改。
代理就是在客户端和服务器之间设置一道关卡，客户端先将请求数据发送出去后，代理服务器会将数据包进行拦截，代理服务器再冒充客户端发送数据到服务器；同理，服务器将响应数据返回，代理服务器也会将数据拦截，再返回给客户端。
Fiddler可以抓取支持http代理的任意程序的数据包，如果要抓取https会话，要先安装证书。

之前我们爬取的网站，大部分都是通过get方式获取的，但是在日常的上网浏览时，类似于登录、注册等操作，都是通过post方式向服务器发送数据的。使用Chrome的检查虽然也能够帮我们抓取数据包，但是对于Fiddler 4来说，就是“小巫见大巫”了。
我们今天以爬取XX教务系统为目标，通过Fiddler 4来获取我们登录时需要传输的数据，为后续的成绩推送系统做准备！
首先我们需要下载Fiddler 4。安装过程没有什么需要特别注意的，直接一路next即可。

如上图所示，当我们打开软件时，左边显示了我们浏览的网页地址，右边是网页传输时候的数据。
废话不多说，我们直接分析我们的登录界面：

可以看到，在最后的字符串中，我们需要提交的数据有：__VIEWSTATE、TextBox1、TextBox2、TextBox3、RadioButtonList1、Button1、lbLanguage。
经过查询，我们可以知道这些参数的意义为：

• _VIEWSTATE:.Net框架特有的一个东西
• extBox1:学号参数
• TextBox2:密码参数
• TextBox3:验证码
• RadioButtonList1:学生标记
• Button1:空值
• lbLanguage:空值

仅仅是普通访问，我们就能够直接获取对应的数据，是不是特别简单！没错，Fiddler 4能够大大地简化我们的工作！

总结

1. 本文首先介绍了目前流行Ajax技术，然后使用Chrome分析Ajax加载的规律，最后使用正则表达式获取到了相应的课程标题；
2. 正如之前提到的那样，正则表达式是一种强大的语言，当网站没有一定的规律或者是爬取的信息不能够正常的解析出来时，我们只能通过正则表达式来获取我们想要的数据；
3. Fiddler 4 最大的优点是可以直接连接手机，抓取手机的请求数据——在某些情况下，使用手机爬取信息往往是最简单的。限于篇幅原因，你可以在这篇文章了解如何连接手机；
4. 接下来我们就要实战成绩通知系统，如果你有时间，可以往前翻翻我们之前学的知识，然后投入到最后的大项目开发中！