第6章動(dòng)態(tài)網(wǎng)頁(yè)爬取

數(shù)6.1JavaScript與AJAX技術(shù)6.2抓取AJAX數(shù)據(jù)6.3抓取動(dòng)態(tài)內(nèi)容JavaScript是一種具有函數(shù)優(yōu)先的輕量級(jí)、解釋型的高級(jí)編程語言，已經(jīng)被廣泛用于互聯(lián)網(wǎng)上Web應(yīng)用開發(fā)。JavaScript腳本是通過嵌入在HTML中來增加交互行為。其中JavaScript基礎(chǔ)又分為三個(gè)部分：

ECMAScript：JavaScript的核心，定義了JavaScript的基本語法和數(shù)據(jù)類型。包括變量、表達(dá)式、運(yùn)算符、函數(shù)、if語句、for語句等。

DOM：documentodjectmodel，文檔對(duì)象模型，操作網(wǎng)頁(yè)上的頁(yè)面元素的API。比如可以控制相關(guān)元素的增刪改查。

BOM：browserobjectmodel，瀏覽器對(duì)象模型，操作瀏覽器部分功能的API。比如彈出框，控制頁(yè)面滑動(dòng)等。1JavaScript語言JavaScript是一種弱類型語言，其語法通?？梢耘cC++和Java做對(duì)比。雖然語法中的一些元素，比如操作符、循環(huán)條件和數(shù)組，都與C++、Java語法很接近。1.基本語法JavaScript對(duì)換行、縮進(jìn)、空格不敏感。每一行語句末尾要加上分號(hào)，如果不加分號(hào)，壓縮后將不能運(yùn)行。所有符號(hào)都是英文1JavaScript語言（1）JavaScrip語句在<script>和</script>之間的代碼行包含了JavaScript。每個(gè)語句以分號(hào)“;”結(jié)束。例如：1JavaScript語言<script>alert("HelloWorld");</script>（2）注釋單行注釋以//開頭1JavaScript語言<script>//這是一行注釋alert('HelloWorld');</script>多行注釋以/*開始，以*/結(jié)尾。<script>/*這是一行注釋這也是注釋*/alert('HelloWorld');</script>2.數(shù)據(jù)類型和變量JavaScript的數(shù)據(jù)類型分兩種，一個(gè)為簡(jiǎn)單數(shù)據(jù)類型，另一個(gè)為復(fù)雜數(shù)據(jù)類型。簡(jiǎn)單數(shù)據(jù)類型有數(shù)字(Number)、字符串（String）、布爾(Boolean)、未定義（Undefined）和對(duì)空（null）。復(fù)雜數(shù)據(jù)有類型對(duì)象(Object)、數(shù)組(Array)、函數(shù)(Function)。1JavaScript語言（1）Number:JavaScript不區(qū)分整數(shù)和浮點(diǎn)數(shù)，統(tǒng)一用Number表示，以下都是合法的Number類型。1JavaScript語言<script>vara=123;//整數(shù)123varb=0.456;//浮點(diǎn)數(shù)0.456varc=1.2345e3;//科學(xué)計(jì)數(shù)法表示1.2345x1000，等同于1234.5vard=-99;//負(fù)數(shù)vare=NaN;//NaN表示NotaNumber，當(dāng)無法計(jì)算結(jié)果時(shí)用NaN表示varf=Infinity;//Infinity表示無限大，當(dāng)數(shù)值超過了JavaScript的Number所能表示的最大值時(shí)，就表示為Infinity</script>（2）字符串：字符串是以單引號(hào)'或雙引號(hào)"括起來的任何字符。1JavaScript語言vara="abcd";varb='哈哈哈';字符串的屬性及描述屬性描述constructor返回創(chuàng)建字符串屬性的函數(shù)length返回字符串的長(zhǎng)度prototype使用prototype屬性就可以給對(duì)象的構(gòu)造函數(shù)添加新的屬性字符串的方法及描述方法描述charAt()返回指定索引位置的字符charCodeAt()返回指定索引位置字符的Unicode值concat()連接兩個(gè)或多個(gè)字符串，返回連接后的字符串fromCharCode()將Unicode轉(zhuǎn)換為字符串indexOf()返回字符串中檢索指定字符第一次出現(xiàn)的位置lastIndexOf()返回字符串中檢索指定字符最后一次出現(xiàn)的位置trim()移除字符串首尾空白trimLeft()移除左邊的空白trimRight()移除右邊的空白substring()返回指定索引區(qū)間的子串slice()提取字符串的片斷，并在新的字符串中返回被提取的部分toLowerCase()把字符串轉(zhuǎn)換為全小寫toUpperCase()把字符串轉(zhuǎn)換為全大寫split()把字符串分割為子字符串?dāng)?shù)組valueOf()返回某個(gè)字符串對(duì)象的原始值（3）布爾值：一個(gè)布爾值只能有兩個(gè)值：true或false。1JavaScript語言<script>varx=true;vary=false;</script>（4）null和undefinednull是一個(gè)表示”無”的對(duì)象，轉(zhuǎn)為數(shù)值時(shí)為0；undefined是一個(gè)表示”無”的原始值，轉(zhuǎn)為數(shù)值時(shí)為NaN。1JavaScript語言（5）數(shù)組：數(shù)組是一組按順序排列的集合，集合的每個(gè)值稱為元素。JavaScript的數(shù)組可以包括任意數(shù)據(jù)類型。通過[]或者Array()函數(shù)創(chuàng)建1JavaScript語言<script>vararr=[1,2,3.14,'Hello',null,true];vararr=newArray(1,2,3);</script>數(shù)組的方法及描述方法描述.length數(shù)組的大小push()返回指定索引位置字符的Unicode值pop()從數(shù)組中刪除最后一個(gè)元素,返回“被彈出”的值push()（在數(shù)組結(jié)尾處）向數(shù)組添加一個(gè)新的元素，返回新數(shù)組的長(zhǎng)度shift()頭部移除元素unshift()頭部插入元素indexOf()返回檢索一個(gè)指定的元素的位置toString()將數(shù)組轉(zhuǎn)換成字符串slice()切片reverse()反轉(zhuǎn)數(shù)組的方法及描述方法描述sort()排序splice()從指定的索引開始刪除若干元素，然后再?gòu)脑撐恢锰砑尤舾稍豤oncat()多個(gè)數(shù)組合并,得到一個(gè)新數(shù)組，原數(shù)組不變join()將數(shù)組元組連接成字符串forEach()將數(shù)組的每個(gè)元素傳遞給回調(diào)函數(shù)map()提取字符串的片斷，并在新的字符串中返回被提取的部分（6）對(duì)象JavaScript的對(duì)象是一種無序的集合數(shù)據(jù)類型，它由若干鍵值對(duì)組成，以名稱:值對(duì)的方式來書寫（名稱和值由冒號(hào)分隔）。1JavaScript語言<script>varperson={firstName:"Bill",lastName:"Gates",age:62,eyeColor:"blue"};person.lastName;//用['xxx']來訪問對(duì)象屬性person["lastName"];//通過.操作符來訪問對(duì)象屬性</script>JavaScript關(guān)鍵字abstractargumentsbooleanbreakbytecasecatchcharclassconstcontinuedebuggerdefaultdeletedodoubleelseenumevalexportforfunctiongotoifimplementsimportininstanceofintinterfaceletlongnativenewnullpackageprivateprotectedpublicreturnshortstaticsuperswitchsynchronizedthisthrowthrowstransienttruetrytypeofvarvoidvolatiewhilewithyield

邏輯運(yùn)算符及描述運(yùn)算符描述&&邏輯與===等同于（值和類型均相等）!=不等于比較運(yùn)算符及描述運(yùn)算符描述==等于===等同于（值和類型均相等）!=不等于!==不等同于（值和類型至少有一個(gè)不相等）>

大于<

小于>=大于等于<=小于等于算法運(yùn)算符及描述運(yùn)算符描述+加法-減法*乘法/除法%取模（余數(shù)）++自增--自減位運(yùn)算符及描述運(yùn)算符描述&與|或~非^異或<<

零填充左位移>>

有符號(hào)右位移>>>

零填充右位移控制語句（1）分支語句分支語句用于基于不同的條件來執(zhí)行不同的動(dòng)作。在JavaScript中，我們可使用以下條件語句：if語句-只有當(dāng)指定條件為true時(shí)，使用該語句來執(zhí)行代碼if...else語句-當(dāng)條件為true時(shí)執(zhí)行代碼，當(dāng)條件為false時(shí)執(zhí)行其他代碼if...elseifelse語句-使用該語句來選擇多個(gè)代碼塊之一來執(zhí)行switch語句-使用該語句來選擇多個(gè)代碼塊之一來執(zhí)行控制語句（2）循環(huán)語句JavaScript支持不同類型的循環(huán)：for-循環(huán)代碼塊特定次數(shù)for/in-循環(huán)遍歷對(duì)象的屬性while-在每次循環(huán)開始的時(shí)候判斷條件，當(dāng)指定的條件為true時(shí)循環(huán)指定的代碼塊do/while-在每次循環(huán)完成的時(shí)候判斷條件，當(dāng)指定的條件為true時(shí)循環(huán)指定的代碼塊函數(shù)

5.函數(shù)（1）定義函數(shù)在JavaScript中，定義函數(shù)的方式如下：functionfunctionname(){//執(zhí)行代碼}（2）調(diào)用函數(shù)調(diào)用函數(shù)時(shí)，按順序傳入?yún)?shù)即可。函數(shù)<script>functionfibonacci(a,b){varnextNum=a+b;console.log(nextNum+"isintheFibonaccisequence");if(nextNum<100){fibonacci(b,nextNum);}}fibonacci(1,1);</script>函數(shù)<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），網(wǎng)站不需要使用單獨(dú)的頁(yè)面請(qǐng)求就可以和網(wǎng)絡(luò)服務(wù)器進(jìn)行交互（收發(fā)信息）。Ajax技術(shù)的核心是XMLHttpRequest對(duì)象（簡(jiǎn)稱XHR），可以通過使用XHR對(duì)象獲取到服務(wù)器的數(shù)據(jù)，然后再通過DOM將數(shù)據(jù)插入到頁(yè)面中呈現(xiàn)。AJAX發(fā)送AJAX請(qǐng)求到網(wǎng)頁(yè)更新的這個(gè)過程可以簡(jiǎn)單分為以下3步：（1）發(fā)送請(qǐng)求；（2）解析內(nèi)容；（3）渲染網(wǎng)頁(yè)。6.1JavaScript與AJAX技術(shù)6.2抓取AJAX數(shù)據(jù)6.3抓取動(dòng)態(tài)內(nèi)容分析數(shù)據(jù)右鍵【檢查】>【Network】向下滾動(dòng)頁(yè)面可以看到請(qǐng)求在不斷不更新，點(diǎn)擊一個(gè)請(qǐng)求，就可以看到請(qǐng)求的信息單擊XHR選項(xiàng) 分析數(shù)據(jù)以豆瓣為例查看這些AJAX請(qǐng)求右鍵【檢查】>【Network】向下滾動(dòng)頁(yè)面可以看到請(qǐng)求在不斷不更新，點(diǎn)擊一個(gè)請(qǐng)求，就可以看到請(qǐng)求的信息單擊XHR選項(xiàng)找到真實(shí)地址為：/j/chart/top_list?type=5&interval_id=100%3A90&action=&start=40&limit=20

提取數(shù)據(jù)既然找到了真實(shí)的地址，接下來就可以直接用requests請(qǐng)求這個(gè)地址獲取數(shù)據(jù)了。

fromurllibimportrequestimportjson

#url信息：interval_id表示排名段（可自行修改），limit限制20個(gè)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)

#遍歷輸出每個(gè)'k'和'v'的值foritemindata:print("排名：",item['rank'],"\n","名稱：",item['title'],"\n","類型：",item['types'],"\n","主演：",item['actors'],"\n","分?jǐn)?shù)：",item['score'],"\n",)6.1JavaScript與AJAX技術(shù)6.2抓取AJAX數(shù)據(jù)6.3抓取動(dòng)態(tài)內(nèi)容Selenium的安裝官方網(wǎng)站：

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

推薦直接使用pip安裝，執(zhí)行如下命令即可：pip3installseleniumChromeDriver的安裝1.下載安裝Chrome瀏覽器2.查看Chrome的版本號(hào)，下載ChromeDriver。3.環(huán)境變量配置使用Selenium查看網(wǎng)頁(yè)代碼1、使用Selenium查看網(wǎng)頁(yè)代碼按下列步驟編寫客戶端程序：(1)程序先從selenium引入webdriver：fromseleniumimportwebdriver(2)創(chuàng)建chome瀏覽器:driver=webdriver.Chrome()創(chuàng)建chrome瀏覽器，那么在程序執(zhí)行時(shí)會(huì)彈出一個(gè)chrome瀏覽器。使用Selenium查看網(wǎng)頁(yè)代碼(3)使用driver.get(url)方法訪問網(wǎng)頁(yè)：driver.get('/')這類似于requests庫(kù)的get()方法，同樣是請(qǐng)求網(wǎng)址，不同的是driver.get()方法請(qǐng)求過后的網(wǎng)頁(yè)源代碼中有異步加載的信息，這樣便可以輕松獲取JavaScript數(shù)據(jù)。(4)通過driver.page_source獲取網(wǎng)頁(yè)HTML代碼：html=driver.page_sourceprint(html)(5)使用driver.close()關(guān)閉瀏覽器：driver.close()2用Selenium查找HTML元素（1）使用XPath查找元素函數(shù)find_element_by_xpath(xpath)函數(shù)find_elements_by_xpath(xpath)（2）查找元素的文本與屬性通過WebElement對(duì)象可以查找到它的文本與屬性。（3）使用id查找元素driver.find_element_by_id(id)（4）使用name查找元素函數(shù)find_element_by_css_selector(css)函數(shù)find_elements_by_css_selector(css)2用Selenium查找HTML元素（6）使用tagname查找元素函數(shù)find_elements_by_tag_name()（7）使用文本查找超級(jí)鏈接函數(shù)find_element_by_link_text(text)函數(shù)find_element_by_partial_link_text(text)函