目錄?
AJAX 簡介
任務(wù)目標(biāo)
創(chuàng)建Ajax網(wǎng)站
創(chuàng)建服務(wù)器程序
編寫爬蟲程序
AJAX 簡介
????????AJAX（Asynchronous JavaScript And XML，異步 JavaScript 及 XML）
- Asynchronous 一種創(chuàng)建交互式、快速動(dòng)態(tài)網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)
- 通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，無需重新加載整個(gè)網(wǎng)頁的情況下，能夠異步更新部分網(wǎng)頁的技術(shù)。
- AJAX是一種新的技術(shù)組合，即基于因特網(wǎng)標(biāo)準(zhǔn)，組合以下技術(shù)：
- XMLHttpRequest 對(duì)象（與服務(wù)器異步交互數(shù)據(jù)）
- JavaScript/DOM（顯示/取回信息）
- CSS（設(shè)置數(shù)據(jù)的樣式）
- XML（常用作數(shù)據(jù)傳輸?shù)母袷剑?/li>
任務(wù)目標(biāo)
- 現(xiàn)在的網(wǎng)頁中大量使用了Ajax技術(shù)，通過JavaScript在客戶端向服務(wù)器發(fā)出請(qǐng)求，服務(wù)器返回?cái)?shù)據(jù)給客戶端，客戶端再把數(shù)據(jù)展現(xiàn)出來，這樣做可以減少網(wǎng)頁的閃動(dòng)， 讓用戶有更好的體驗(yàn)。
- 我們先設(shè)計(jì)一個(gè)這樣的網(wǎng)頁，然后使用 Selenium 編寫爬蟲程序爬取網(wǎng)頁的數(shù)據(jù)。
創(chuàng)建Ajax網(wǎng)站
phone.html 如下：
注：phone.html 文件要位于?templates?這個(gè)目錄下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="init()">
<div>選擇品牌<select id="marks" onchange="display()"></select></div>
<div id="phones"></div>
</body>
<script>
function init() {
var marks = new Array("華為", "蘋果", "三星");
var selm = document.getElementById("marks");
for (var i = 0; i < marks.length; i++) {
selm.options.add(new Option(marks[i], marks[i]));
}
selm.selectedIndex = 0;
display();
}
function display() {
try {
var http = new XMLHttpRequest();
var selm = document.getElementById("marks");
var m = selm.options[selm.selectedIndex].text;
http.open("get", "/phones?mark=" + m, false);
http.send(null);
msg = http.responseText; //傳遞參數(shù)，一般post方法使用，get不傳參數(shù)
obj = eval("(" + msg + ")"); //eval（”(執(zhí)行的內(nèi)容)”);加上圓括號(hào)的目的是迫使eval函數(shù)在運(yùn)行JavaScript代碼的時(shí)候強(qiáng)制將括號(hào)內(nèi)的表達(dá)式轉(zhuǎn)化為JavaScript對(duì)象。
// JS中將JSON的字符串解析成JSON數(shù)據(jù)格式
s = "<table width='200' border='1'><tr><td>型號(hào)</td><td>價(jià)格</td></tr>"
for (var i = 0; i < obj.phones.length; i++) {
s = s + "<tr><td>" + obj.phones[i].model + "</td><td>" + obj.phones[i].price + "</td></tr>";
}
s = s + "</table>";
document.getElementById("phones").innerHTML = s;
} catch (e) {
alert(e);
}
}
</script>
</html>創(chuàng)建服務(wù)器程序
服務(wù)器server.py程序如下：
import flask
import json
app = flask.Flask(__name__)
@app.route("/")
def index():
return flask.render_template("phone.html")
@app.route("/phones")
def getPhones():
mark = flask.request.values.get("mark")
phones = []
if mark == "華為":
phones.append({"model": "P9", "mark": "華為", "price": 3800})
phones.append({"model": "P10", "mark": "華為", "price": 4000})
elif mark == "蘋果":
phones.append({"model": "iPhone5", "mark": "蘋果", "price": 5800})
phones.append({"model": "iPhone6", "mark": "蘋果", "price": 6800})
elif mark == "三星":
phones.append({"model": "Galaxy A9", "price": 2800})
s = json.dumps({"phones": phones}) # python對(duì)象轉(zhuǎn)化為json字符串
return s
app.run()
網(wǎng)站結(jié)果如下：
?
編寫爬蟲程序
(1) 創(chuàng)建一個(gè)瀏覽器對(duì)象driver，使用這個(gè)driver對(duì)象模擬瀏覽器。
(2) 訪問http://127.0.0.1:5000網(wǎng)站，爬取第一個(gè)頁面的手機(jī)數(shù)據(jù)。
(3) 從第一個(gè)頁面中獲取<select>中所有的選擇項(xiàng)目options。
(4) 循環(huán)options中的每個(gè)option,并模擬這個(gè)option的click點(diǎn)擊動(dòng)作，觸發(fā) onchange
爬蟲程序 WebScraper.py 如下：
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
import time
def spider(index):
trs = driver.find_elements(By.TAG_NAME, "tr")
for i in range(1, len(trs)): # 從第二行開始查找和提取
# print(i)
tds = trs[i].find_elements(By.TAG_NAME, "td")
model = tds[0].text
price = tds[1].text
print("%-16s%-16s" % (model, price))
select = driver.find_element(By.ID, "marks")
options = select.find_elements(By.TAG_NAME, "option")
if index < len(options) - 1:
index += 1
options[index].click()
time.sleep(3)
spider(index)
chrome_options = Options()
chrome_options.add_argument('--headless')
driver = webdriver.Chrome()
driver.get("http://127.0.0.1:5000")
spider(0) # 從option=0開始
driver.close()
運(yùn)行結(jié)果：
文章來源：http://www.zghlxwxcb.cn/news/detail-683052.html
下一篇文章：5.6 Selenium等待HTML元素文章來源地址http://www.zghlxwxcb.cn/news/detail-683052.html
到了這里，關(guān)于【爬蟲】5.5 Selenium 爬取Ajax網(wǎng)頁數(shù)據(jù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
