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系统的体系架构中,动态数据是常常变化,直接反映事务过程的数据,比如,网站访问量、在线人数、日销售额等等。在操作系统的内存管理中,动态数据存放在堆区或栈区。
侵权处理QQ:3464097650--上传资料QQ:3464097650
【声明】本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是网络空间服务平台,本站所有原创文档下载所得归上传人所有,如您发现上传作品侵犯了您的版权,请立刻联系我们并提供证据,我们将在3个工作日内予以改正。