nodejs抓取別人家的頁面的始末
內(nèi)容：分析并獲取頁面調(diào)取數(shù)據(jù)的API(接口)，并跨域獲取數(shù)據(jù)保存在文檔中(nodejs做代理－CORS)
事由以及動(dòng)機(jī)
2015年9月份全國(guó)研究生數(shù)學(xué)建模競(jìng)賽的F題，旅游線路規(guī)劃問題。其中需要自己去查很多數(shù)據(jù)。例如所給201個(gè)***級(jí)景區(qū)的位置，以及景區(qū)距離所 在省會(huì)距離等等～開始隊(duì)友小伙伴準(zhǔn)備從百度手動(dòng)去一個(gè)一個(gè)查詢，但是效率極低，在這么短的時(shí)間內(nèi)，需要收集這么多數(shù)據(jù)是多么的耗時(shí)，并且也不能把大把時(shí)間 花費(fèi)在查資料上，雖然說查資料是必須的，題目也鼓勵(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)頁，打開開發(fā)人員工具（我用的是chrome），選擇Network選項(xiàng)卡，輸入需要查詢的內(nèi)容（tips：先清除掉之前的網(wǎng)絡(luò)獲取紀(jì)錄，以方便接下來的借接口分析）。
點(diǎn)擊“查詢”，并監(jiān)控網(wǎng)絡(luò)數(shù)據(jù)流，會(huì)發(fā)現(xiàn)網(wǎng)頁發(fā)起了很多的http請(qǐng)求，并返回了結(jié)果。
通過分析所有請(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)容，一般來說由很多（字母＋百分號(hào)）構(gòu)成的為中文字符，是漢字被url轉(zhuǎn)碼獲得。可以把該地址拿到地址欄查詢一下，漢字的內(nèi)容
那我們的數(shù)據(jù)服務(wù)API就拿到了
編寫數(shù)據(jù)訪問頁面
接下來就是利用XMLHTTPRequerst來調(diào)取他人的服務(wù)了
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>getData</title>
- </head>
- <body>
- <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
- <script>
- var sn="北京市";
- var en="上海市";
- var url="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$$$$$$"+
- sn+"$$0$$$$&en=2$$$$$$"+
- en+"$$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";
- $.ajax({
- url:url,
- type:"get",
- success:function(res){
- console.log(res)
- },
- error:function(e){
- console.log(e)
- }
- })
- </script>
- </body>
- </html>
- html
運(yùn)行察看結(jié)果：
跨域提示錯(cuò)誤，跨域（見為什么瀏覽器不能跨域http://www.cnblogs.com/alvinwei1024/p/4626054.html）是瀏覽器的行為。
方法1: 通過jsonp的方法
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>getData</title>
- </head>
- <body>
- <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
- <script>
- var sn="北京市";
- var en="上海市";
- var url="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$$$$$$"+
- sn+"$$0$$$$&en=2$$$$$$"+
- en+"$$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";
- $.ajax({
- url:url,
- type:"get",
- dataType:"jsonp",
- jsonp:"callback",
- success:function(res){
- console.log(res)
- },
- error:function(e){
- console.log(e)
- }
- })
- </script>
- </body>
- </html>
- html
運(yùn)行結(jié)果：獲取到想要的數(shù)據(jù)
可以拿到，北京到上海的距離1208548，時(shí)間48617以及距離等。
#p#
方法二：CORS
除了方法以利用jsonp跨域外，還可以通過服務(wù)器做一個(gè)代理，通過cors繞過原來資源不允許跨域的限制。
本文利用node來做服務(wù)器，原因很簡(jiǎn)單，最方便，幾句代碼就能搞定，方便又快捷。
- var http = require('http');
- var request_ = require('request');
- var urlencode2=require("urlencode2");
- var url=require('url')
- http.createServer(function (request, response) {
- var arg1 = url.parse(request.url, true).query;
- var sn=arg1.sn;
- var en=arg1.en;
- var req_url="http://api.map.baidu.com/?qt=nav&c=131&sn=2%24%24%24%24%24%24%20"+
- urlencode2(sn,'gbk')+"%24%240%24%24%24%24&en=2%24%24%24%24%24%24"+
- urlencode2(en,'gbk')+"%24%240%24%24%24%24&sy=0&ie=utf-8&oue=1&fromproduct=jsapi&res=api&callback=BMap._rd._cbk54249";
- request_.get({
- url:req_url,
- json:true
- },
- function(error, response_, body) {
- if (!error && response_.statusCode == 200) {
- var res=-1;
- if(body){
- res=body.split(',"toll":')[0];//time s
- res=res.split('"time":')[2];
- console.log(res)
- if(!res){
- res=-1;
- }
- else{
- res=res/60;
- }
- }
- response.writeHead(200, {
- "Content-Type": "text/html; charset=UTF-8",
- 'Access-Control-Allow-Origin':request.headers.origin
- });
- response.end(res+'\n');
- }
- else{
- // console.log(error)
- }
- }
- )
- }).listen(8888);
- // 終端打印如下信息
- console.log('Server running at http://127.0.0.1:8888/');
- nodejs
其中，本文用到了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');
允許所有用戶跨域訪問，因此我們就能訪問自己搭建的web服務(wù)了。
我在前端頁面只需，請(qǐng)求我們的地址http://localhost:8888
并且指定sn（start node）與 en（end node）一并發(fā)送到服務(wù)器即可。
相關(guān)代碼：https://github.com/AlvinWei1024/blog-resources/tree/master/20150923
作者：AlvinWei 文章出處：韋躐晟的博客 http://www.cnblogs.com/alvinwei1024/p/4834045.html
