使用nodejs怎么抓取頁(yè)面的始末，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)公司是一家以網(wǎng)絡(luò)技術(shù)公司，為中小企業(yè)提供網(wǎng)站維護(hù)、成都網(wǎng)站制作、做網(wǎng)站、網(wǎng)站備案、服務(wù)器租用、申請(qǐng)域名、軟件開發(fā)、成都微信小程序等企業(yè)互聯(lián)網(wǎng)相關(guān)業(yè)務(wù)，是一家有著豐富的互聯(lián)網(wǎng)運(yùn)營(yíng)推廣經(jīng)驗(yàn)的科技公司，有著多年的網(wǎng)站建站經(jīng)驗(yàn)，致力于幫助中小企業(yè)在互聯(lián)網(wǎng)讓打出自已的品牌和口碑，讓企業(yè)在互聯(lián)網(wǎng)上打開一個(gè)面向全國(guó)乃至全球的業(yè)務(wù)窗口：建站歡迎聯(lián)系：18980820575

事由以及動(dòng)機(jī)

2015年9月份全國(guó)研究生數(shù)學(xué)建模競(jìng)賽的F題，旅游線路規(guī)劃問(wèn)題。其中需要自己去查很多數(shù)據(jù)。例如所給201個(gè)***級(jí)景區(qū)的位置，以及景區(qū)距離所 在省會(huì)距離等等～開始隊(duì)友小伙伴準(zhǔn)備從百度手動(dòng)去一個(gè)一個(gè)查詢，但是效率極低，在這么短的時(shí)間內(nèi)，需要收集這么多數(shù)據(jù)是多么的耗時(shí)，并且也不能把大把時(shí)間 花費(fèi)在查資料上，雖然說(shuō)查資料是必須的，題目也鼓勵(lì)我們從網(wǎng)上查詢相關(guān)數(shù)據(jù)，因此在團(tuán)隊(duì)中的我就想到了讓計(jì)算機(jī)幫我們?nèi)プ鲞@件事。

***步，確定想要抓取的信息，獲取數(shù)據(jù)服務(wù)api

以查詢個(gè)兩地的行車時(shí)間為例，我們以百度地圖為例，見下圖

先打開需要去請(qǐng)求數(shù)據(jù)的網(wǎng)頁(yè)，打開開發(fā)人員工具（我用的是chrome），選擇Network選項(xiàng)卡，輸入需要查詢的內(nèi)容（tips：先清除掉之前的網(wǎng)絡(luò)獲取紀(jì)錄，以方便接下來(lái)的借接口分析）。

點(diǎn)擊“查詢”，并監(jiān)控網(wǎng)絡(luò)數(shù)據(jù)流，會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)發(fā)起了很多的http請(qǐng)求，并返回了結(jié)果。

通過(guò)分析所有請(qǐng)求，拿到想要的請(qǐng)求接口（一般情況下，都不會(huì)是Type為圖片類型的，并且耗時(shí)較長(zhǎng)的）。

點(diǎn)擊某個(gè)請(qǐng)求時(shí)能看到該請(qǐng)求的詳細(xì)信息

查看請(qǐng)求的頭部信息Headers

拿到請(qǐng)求的地 址：requestURL，例如：http://map.baidu.com/?newmap=1&reqflag=pcmap& biz=1&pcevaname=pc2&da_par=direct&from=webmap&qt=nav&da_src=pcmappg.searchBox.button&c=289&sn=2$$$$$$%E4%B8%8A%E6%B5%B7%E5%B8%82$$0$$$$&en=2$$$$$$%E5%8C%97%E4%BA%AC%E5%B8%82$$0$$$$&sc=289&ec=289&rn=5&extinfo=63&tn=B_NORMAL_MAP&nn=0&ie=utf-8&l=12&b=(13503777.31,3639994.64;13542753.31,3642234.64)&t=1443022534161

并分析，一般我們要看的是URL中的querey部分，也就是？后面的內(nèi)容，一般來(lái)說(shuō)由很多（字母＋百分號(hào)）構(gòu)成的為中文字符，是漢字被url轉(zhuǎn)碼獲得?？梢园言摰刂纺玫降刂窓诓樵円幌?，漢字的內(nèi)容

那我們的數(shù)據(jù)服務(wù)API就拿到了

編寫數(shù)據(jù)訪問(wèn)頁(yè)面

接下來(lái)就是利用XMLHTTPRequerst來(lái)調(diào)取他人的服務(wù)了

                            html

運(yùn)行察看結(jié)果：

跨域提示錯(cuò)誤，跨域（見為什么瀏覽器不能跨域http://www.cnblogs.com/alvinwei1024/p/4626054.html）是瀏覽器的行為。

方法1: 通過(guò)jsonp的方法

                            html

運(yùn)行結(jié)果：獲取到想要的數(shù)據(jù)

可以拿到，北京到上海的距離1208548，時(shí)間48617以及距離等。

1. dis: 1208548

2. kps: Array[38]

3. rss: Array[38]

4. taxi: Object

5. time: 48617

6. toll: 580

方法二：CORS

除了方法以利用jsonp跨域外，還可以通過(guò)

其中，本文用到了request（用于發(fā)起http請(qǐng)求）模塊和urlencode2（主要用于URLEncode）模塊

request安裝：

npm install request

詳見：https://github.com/request/request

urlencode2安裝：

詳見：https://github.com/node-modules/urlencode

1 var http = require('http');
2 http.createServer(function (request, response) {
3 //...
4 response.end('welcome baby');
5 }).listen(8888);

這幾句簡(jiǎn)單的代碼就搭建了一個(gè)web服務(wù)，端口號(hào)是8888

$ node 文件名.js

在終端輸入以上指令即可允許該服務(wù)。

1 var arg1 = url.parse(request.url, true).query;
2     var sn=arg1.sn;
3     var en=arg1.en;
4     var req_url="http://api.map.baidu.com/?qt=nav&c=131&sn=2%24%24%24%24%24%24%20"+ 5           urlencode2(sn,'gbk')+"%24%240%24%24%24%24&en=2%24%24%24%24%24%24"+ 6           urlencode2(en,'gbk')+"%24%240%24%24%24%24&sy=0&ie=utf-8&oue=1&fromproduct=jsapi&res=api&callback=BMap._rd._cbk54249";

以上是獲取查詢參數(shù)并拼接請(qǐng)求字符串

然后利用request向目標(biāo)服務(wù)器發(fā)送請(qǐng)求，并解析出需要的信息

最重要的是以下代碼：

1  response.writeHead(200, {
2       "Content-Type": "text/html; charset=UTF-8", 3       'Access-Control-Allow-Origin':request.headers.origin 4 }); 5 response.end(res+'\n');

允許所有用戶跨域訪問(wèn)，因此我們就能訪問(wèn)自己搭建的web服務(wù)了。

我在前端頁(yè)面只需，請(qǐng)求我們的地址http://localhost:8888

并且指定sn（start node）與 en（end node）一并發(fā)送到服務(wù)器即可。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。