Python 爬虫基础与实战 课件 第6章 动态网页爬取

第6章动态网页爬取

数6.1JavaScript与AJAX技术6.2抓取AJAX数据6.3抓取动态内容JavaScript是一种具有函数优先的轻量级、解释型的高级编程语言，已经被广泛用于互联网上Web应用开发。JavaScript脚本是通过嵌入在HTML中来增加交互行为。其中JavaScript基础又分为三个部分：

ECMAScript：JavaScript的核心，定义了JavaScript的基本语法和数据类型。包括变量、表达式、运算符、函数、if语句、for语句等。

DOM：documentodjectmodel，文档对象模型，操作网页上的页面元素的API。比如可以控制相关元素的增删改查。

BOM：browserobjectmodel，浏览器对象模型，操作浏览器部分功能的API。比如弹出框，控制页面滑动等。1JavaScript语言JavaScript是一种弱类型语言，其语法通常可以与C++和Java做对比。虽然语法中的一些元素，比如操作符、循环条件和数组，都与C++、Java语法很接近。1.基本语法JavaScript对换行、缩进、空格不敏感。每一行语句末尾要加上分号，如果不加分号，压缩后将不能运行。所有符号都是英文1JavaScript语言（1）JavaScrip语句在<script>和</script>之间的代码行包含了JavaScript。每个语句以分号“;”结束。例如：1JavaScript语言<script>alert("HelloWorld");</script>（2）注释单行注释以//开头1JavaScript语言<script>//这是一行注释alert('HelloWorld');</script>多行注释以/*开始，以*/结尾。<script>/*这是一行注释这也是注释*/alert('HelloWorld');</script>2.数据类型和变量JavaScript的数据类型分两种，一个为简单数据类型，另一个为复杂数据类型。简单数据类型有数字(Number)、字符串（String）、布尔(Boolean)、未定义（Undefined）和对空（null）。复杂数据有类型对象(Object)、数组(Array)、函数(Function)。1JavaScript语言（1）Number:JavaScript不区分整数和浮点数，统一用Number表示，以下都是合法的Number类型。1JavaScript语言<script>vara=123;//整数123varb=0.456;//浮点数0.456varc=1.2345e3;//科学计数法表示1.2345x1000，等同于1234.5vard=-99;//负数vare=NaN;//NaN表示NotaNumber，当无法计算结果时用NaN表示varf=Infinity;//Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity</script>（2）字符串：字符串是以单引号'或双引号"括起来的任何字符。1JavaScript语言vara="abcd";varb='哈哈哈';字符串的属性及描述属性描述constructor返回创建字符串属性的函数length返回字符串的长度prototype使用prototype属性就可以给对象的构造函数添加新的属性字符串的方法及描述方法描述charAt()返回指定索引位置的字符charCodeAt()返回指定索引位置字符的Unicode值concat()连接两个或多个字符串，返回连接后的字符串fromCharCode()将Unicode转换为字符串indexOf()返回字符串中检索指定字符第一次出现的位置lastIndexOf()返回字符串中检索指定字符最后一次出现的位置trim()移除字符串首尾空白trimLeft()移除左边的空白trimRight()移除右边的空白substring()返回指定索引区间的子串slice()提取字符串的片断，并在新的字符串中返回被提取的部分toLowerCase()把字符串转换为全小写toUpperCase()把字符串转换为全大写split()把字符串分割为子字符串数组valueOf()返回某个字符串对象的原始值（3）布尔值：一个布尔值只能有两个值：true或false。1JavaScript语言<script>varx=true;vary=false;</script>（4）null和undefinednull是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。1JavaScript语言（5）数组：数组是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。通过[]或者Array()函数创建1JavaScript语言<script>vararr=[1,2,3.14,'Hello',null,true];vararr=newArray(1,2,3);</script>数组的方法及描述方法描述.length数组的大小push()返回指定索引位置字符的Unicode值pop()从数组中删除最后一个元素,返回“被弹出”的值push()（在数组结尾处）向数组添加一个新的元素，返回新数组的长度shift()头部移除元素unshift()头部插入元素indexOf()返回检索一个指定的元素的位置toString()将数组转换成字符串slice()切片reverse()反转数组的方法及描述方法描述sort()排序splice()从指定的索引开始删除若干元素，然后再从该位置添加若干元素concat()多个数组合并,得到一个新数组，原数组不变join()将数组元组连接成字符串forEach()将数组的每个元素传递给回调函数map()提取字符串的片断，并在新的字符串中返回被提取的部分（6）对象JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成，以名称:值对的方式来书写（名称和值由冒号分隔）。1JavaScript语言<script>varperson={firstName:"Bill",lastName:"Gates",age:62,eyeColor:"blue"};person.lastName;//用['xxx']来访问对象属性person["lastName"];//通过.操作符来访问对象属性</script>JavaScript关键字abstractargumentsbooleanbreakbytecasecatchcharclassconstcontinuedebuggerdefaultdeletedodoubleelseenumevalexportforfunctiongotoifimplementsimportininstanceofintinterfaceletlongnativenewnullpackageprivateprotectedpublicreturnshortstaticsuperswitchsynchronizedthisthrowthrowstransienttruetrytypeofvarvoidvolatiewhilewithyield

逻辑运算符及描述运算符描述&&逻辑与===等同于（值和类型均相等）!=不等于比较运算符及描述运算符描述==等于===等同于（值和类型均相等）!=不等于!==不等同于（值和类型至少有一个不相等）>

大于<

小于>=大于等于<=小于等于算法运算符及描述运算符描述+加法-减法*乘法/除法%取模（余数）++自增--自减位运算符及描述运算符描述&与|或~非^异或<<

零填充左位移>>

有符号右位移>>>

零填充右位移控制语句（1）分支语句分支语句用于基于不同的条件来执行不同的动作。在JavaScript中，我们可使用以下条件语句：if语句-只有当指定条件为true时，使用该语句来执行代码if...else语句-当条件为true时执行代码，当条件为false时执行其他代码if...elseifelse语句-使用该语句来选择多个代码块之一来执行switch语句-使用该语句来选择多个代码块之一来执行控制语句（2）循环语句JavaScript支持不同类型的循环：for-循环代码块特定次数for/in-循环遍历对象的属性while-在每次循环开始的时候判断条件，当指定的条件为true时循环指定的代码块do/while-在每次循环完成的时候判断条件，当指定的条件为true时循环指定的代码块函数

5.函数（1）定义函数在JavaScript中，定义函数的方式如下：functionfunctionname(){//执行代码}（2）调用函数调用函数时，按顺序传入参数即可。函数<script>functionfibonacci(a,b){varnextNum=a+b;console.log(nextNum+"isintheFibonaccisequence");if(nextNum<100){fibonacci(b,nextNum);}}fibonacci(1,1);</script>函数<script>varfibonacci=function(){vara=1;varb=1;returnfunction(){vartemp=b;b=a+b;a=temp;returnb;}}varfibInstance=fibonacci();console.log(fibInstance()+"isintheFibonaccisequence");console.log(fibInstance()+"isintheFibonaccisequence");console.log(fibInstance()+"isintheFibonaccisequence");</script>AJAXAJAX全称是AsynchronousJavaScriptandXML（异步JavaScript和XML），网站不需要使用单独的页面请求就可以和网络服务器进行交互（收发信息）。Ajax技术的核心是XMLHttpRequest对象（简称XHR），可以通过使用XHR对象获取到服务器的数据，然后再通过DOM将数据插入到页面中呈现。AJAX发送AJAX请求到网页更新的这个过程可以简单分为以下3步：（1）发送请求；（2）解析内容；（3）渲染网页。6.1JavaScript与AJAX技术6.2抓取AJAX数据6.3抓取动态内容分析数据右键【检查】>【Network】向下滚动页面可以看到请求在不断不更新，点击一个请求，就可以看到请求的信息单击XHR选项 分析数据以豆瓣为例查看这些AJAX请求右键【检查】>【Network】向下滚动页面可以看到请求在不断不更新，点击一个请求，就可以看到请求的信息单击XHR选项找到真实地址为：/j/chart/top_list?type=5&interval_id=100%3A90&action=&start=40&limit=20

提取数据既然找到了真实的地址，接下来就可以直接用requests请求这个地址获取数据了。

fromurllibimportrequestimportjson

#url信息：interval_id表示排名段（可自行修改），limit限制20个url="/j/chart/top_list?type=5&interval_id=100%3A90&action=&start=20&limit=20"herders={'User-Agent':'Mozilla/5.0(WindowsNT6.1;WOW64)AppleWebKit/537.36(KHTML,likeGeCKO)Chrome/45.0.2454.85Safari/537.36115Broswer/6.0.3','Referer':'/','Connection':'keep-alive'}req=request.Request(url,headers=herders)response=request.urlopen(req)data=response.read().decode('utf8')

data=json.loads(data)

#遍历输出每个'k'和'v'的值foritemindata:print("排名：",item['rank'],"\n","名称：",item['title'],"\n","类型：",item['types'],"\n","主演：",item['actors'],"\n","分数：",item['score'],"\n",)6.1JavaScript与AJAX技术6.2抓取AJAX数据6.3抓取动态内容Selenium的安装官方网站：

GitHub:/SeleniumHQ/selenium/tree/trunk/pyPyPI:/project/selenium/官方文档：https://selenium-python.readthedocs.io/

推荐直接使用pip安装，执行如下命令即可：pip3installseleniumChromeDriver的安装1.下载安装Chrome浏览器2.查看Chrome的版本号，下载ChromeDriver。3.环境变量配置使用Selenium查看网页代码1、使用Selenium查看网页代码按下列步骤编写客户端程序：(1)程序先从selenium引入webdriver：fromseleniumimportwebdriver(2)创建chome浏览器:driver=webdriver.Chrome()创建chrome浏览器，那么在程序执行时会弹出一个chrome浏览器。使用Selenium查看网页代码(3)使用driver.get(url)方法访问网页：driver.get('/')这类似于requests库的get()方法，同样是请求网址，不同的是driver.get()方法请求过后的网页源代码中有异步加载的信息，这样便可以轻松获取JavaScript数据。(4)通过driver.page_source获取网页HTML代码：html=driver.page_sourceprint(html)(5)使用driver.close()关闭浏览器：driver.close()2用Selenium查找HTML元素（1）使用XPath查找元素函数find_element_by_xpath(xpath)函数find_elements_by_xpath(xpath)（2）查找元素的文本与属性通过WebElement对象可以查找到它的文本与属性。（3）使用id查找元素driver.find_element_by_id(id)（4）使用name查找元素函数find_element_by_css_selector(css)函数find_elements_by_css_selector(css)2用Selenium查找HTML元素（6）使用tagname查找元素函数find_elements_by_tag_name()（7）使用文本查找超级链接函数find_element_by_link_text(text)函数find_element_by_partial_link_text(text)函