1、任务任务5 5 使用使用 AJAX AJAX 采集数据采集数据 爬取爬取汽车之家动态数据汽车之家动态数据本章学习目标 了解AJAX的基本概念和数据特点 了解静态数据和动态数据基本知识 掌握web系统架构和操作系统内存管理中的使用和存放形式 掌握使用AJAX采集数据的实例 AJAX 基于已有的标准，这些标准已被大多数开发者使用多年。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。5.1 任务描述 本任务通过Chrome谷歌浏览器的“开发者工具”分析汽车之家网站页面数
2、据的各项内容，通过获得AJAX请求的URL，运用爬虫程序向AJAX请求动态数据，将采集到的动态数据进行过滤后保存至MySQL数据库中。5.2 AJAX5.2.1 AJAX的起源 在2005年，Google通过其 Google Suggest使AJAX 变得流行起来。Google Suggest 使用AJAX 创造出动态性极强的web界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。5.2.2 AJAX的概述 AJAX（Asynchronous Javascript And XML）就是异步的Javascript 和XML。
3、AJAX 并不是一种新的编程语言，而仅仅是一种新的技术，它可以创建更好、更快且交互性更强的 Web 应用程序。在前面章节中学习了如何使用requests库来获取页面数据。但是，requests库只能获取的静态HTML页面的数据，如果页面当中存在使用Javascript 处理的数据的话，requests库是无法获取的。目前，越来越多的页面都在使用AJAX技术实现页面数据的动态处理。AJAX能够在传统的静态HTML页面加载完成之后，再异步地调用Javascript 向服务器获取某个接口的发送和接收特定数据，这种异步交互的数据格式包括XML。从页面处理的效果上看，AJAX能够在不刷新整个页面的情况下
4、，实现后台局部刷新。这样做的好处是显而易见的，浏览器不用每次都向服务器请求整个页面的全部数据，从而节约的网络带宽，减少了服务器工作负载，提高了web程序的整体性能。图5-1所示为AJEX和传统Web模式的区别。图5-1 AJAX和传统Web模式的区别 当前的Web应用程序发展来看，很多的WEB前端数据都是通过基于Javascript 框架实现与后端的数据交互。也就是说，不论后端使用何种语言，都能够很好地与基于Javascript 的框架实现数据交互。5.2.3 AJAX的特点 AJAX是基于Javascript 的一个对象。不同的浏览器对这个对象有着不同的支持。可以根据不同的浏览器，使用不同的
5、AJAX对象，实现数据的异步交互。下面来举例说明。对于比较早期版本的IE和IE6浏览器，可以分别使用var xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”)和var xmlHttp=new ActiveXObject(“Microsoft2.XMLHTTP”)获取AJAX对象。图5-2 AJAX实现兼容不同浏览器 对于目前主流的浏览器，可以使用var xmlHttp=new XMLHttpRequest()获取AJAX对象。因此，在实际的开发过程中，从浏览器兼容的角度出发，经常使用如下方法实现兼容，如图5-2所示。通过前面对不同浏览器实现兼容处理之后
6、，就可以进一步地使用AJAX对象的成员实现数据的发送和接收了。1.发送请求的数据（1）定义一个Javascript 函数sendRequest，并将需要请求的URL作为参数传入。（2）调用之前实现了兼容处理的createXMLHttpRequest函数创建一个AJAX对象并赋值给变量XMLHttpReq。（3）使用XMLHttpReq对象的open方法打开指定的URL。其中。”GET”表示使用的请求方式，url表示需要发送请求的位置，true表示使用异步的方式实现。（4）使用XMLHttpReq对象的属性onreadystatechange设置指定响应的回调函数。回调函数:当 服 务 器 将
7、数 据 返 回 给 浏 览 器 后，自 动 调 用 该 方 法。这 里 可 以 只 使 用 函 数 名，例 如processResponse。（5）使用XMLHttpReq对象的send方法发送请求即可。上述发送请求的过程如图5-3所示。图5-3 AJAX发送请求2.接收响应的数据（1）定义一个Javascript 函数processResponse。该函数作为回调函数。（2）使用if条件判断XMLHttpReq的属性readyState的值是否为4，该值表示服务器已经将数据完整返回，并且浏览器全部接收完毕。readyState属性为只读，状态用长度为4的整型表示，定义如下：0(未初始化)：对
8、象已建立，但是尚未初始化(尚未调用open方法)。1(初始化)：已调用send方法，正在发送请求。2(发送数据)：send方法调用完成，但是当前的状态及http头未知。3(数据传送中)：已接收部分数据，因为还没有完全接收的响应数据，这时通过responseBody和responseText获取部分数据会出现错误。4(完成)：数据接收完毕，此时可以通过通过responseBody和responseText获取完整的回应数据。（3）使用if条件判断XMLHttpReq的属性status的值是否为200，该值表示响应状态成功。其中，status表示http statusCode(状态码)。常见的HT
9、TP状态码包括：200 OK：一切正常，对GET和POST请求的应答文档跟在后面。302 Found：类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。400 Bad Request：请求出现语法错误。401 Unauthorized：客户试图未经授权访问受密码保护的页面。403 Forbidden：资源不可用。404 Not Found：无法找到指定位置的资源。500 Internal Server Error：服务器遇到了意料不到的情况，不能完成客户的请求。501 Not Implemented：服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求
10、。100 Continue：初始的请求已经接受，客户应当继续发送请求的其余部分。（4）如果响应状态码为200，则使用XMLHttpReq的属性responseTex获得服务器响应的数据文本。否则，输出“您所请求的页面有异常。”上述处理响应数据的过程如图5-4所示。图5-4 AJAX处理响应数据5.2.4 静态数据 静态数据是指在运行过程中主要作为控制或参考用的数据,它们在很长的一段时间内不会变化，一般不随运行而变。在web系统的体系架构中，为了提高性能，一般将图片，视频，文字等数据单独存储在静态服务器中，目的就是为了能够在第一时间响应客户端的需求。在操作系统的内存管理中，静态数据存放在静态区和全局变量一个区，它的生存期是整个程序。5.2.5 动态数据 动态数据包括所有在运行中发生变化的数据以及在运行中需要输入、输出的数据及在连机操作中要改变的数据。动态数据的准备和系统切换的时间有直接关系。在web系统的体系架构中，动态数据是常常变化，直接反映事务过程的数据，比如，网站访问量、在线人数、日销售额等等。在操作系统的内存管理中，动态数据存放在堆区或栈区。
