1. 程式人生 > >使用javascript抓取網站資料

使用javascript抓取網站資料

最近接到一個小專案,從一個網站抓取資料以另一種格式在另一個網站顯示,其中遇到了不少的問題,主要用了javascript和jquery。現在總結一下遇到的一些問題和解決辦法。

思路:使用ajax請求網站資料,返回的資料主要有html型別和json型別的結果。如果是坑爹的html資料則只能根據html的元素,如id值、css、標籤值等去擷取資料。如果是json格式的返回值就好辦多了,直接拿來用。將資料儲存成陣列或者json格式,將資料重新組裝成使用者需要的頁面。

遇到的主要問題:

1、坑爹的瀏覽器問題。

2、javascript正則表示式使用。

3、jquery的ajax使用。

一、瀏覽器問題

由於本機開發時使用的是win8.1,不能裝使用者指定使用的ie8,只能用ie11,為啥不用chrome呢?因為使用chrome時報了以下錯誤:

XMLHttpRequest cannot load http://xxx.com/xxx!selectZoneOfTown.ajax. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 

原因:

這是一個跨域問題,當協議,域名,埠都與服務端相同時是同一個域。而我使用ajax請求‘http://xxx.com/xxx!selectZoneOfTown.ajax’時,至少域是不一樣的,這個問題是瀏覽器的安全機制所產生的,要

 

解決瀏覽器跨域問題:

1、可以在服務端的響應header上設定Access-Control-Allow-Origin,由於我沒有服務端程式碼,只能換ie11了

2、在chrome右擊圖示->快捷方式->目標:新增紅色部分"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"--allow-file-access-from-files(我這裡不起作用尷尬),網上查了下已失效……

3、還有一個方法:JSONP,具體看:http://stackoverflow.com/questions/19085965/jquery-ajax-access-control-allow-origin

4、使用IE11沒有出現跨域問題,所以只能用IE11,但是當使用IE8時出現:No Transport,原來是IE6-IE9都不支援跨域訪問,可以在ajax請求前新增:jQuery.support.cors = true;

二、javascript正則表示式的使用

在ajax獲取到html字串後,為了擷取網頁上的資料,需要先檢視資料的格式,一般都是<tr><td>資料</td></tr>這樣的格式,javascript提供了幾個方法:

1、html.match(/<tr><td>.*<\/td><\/tr>/g)獲取所有“<tr><td>資料</td></tr>”格式的資料,後面的g指符合正則表示式的所有資料將儲存為陣列,沒g則取第一個符合的資料。

2、html.replace(/<tr><td>/g,"").replace(/</td></tr>/g,"")將<tr><td>和</td></tr>替換為空,則獲取到資料。

3、html.split.(/<table>/)以<table>擷取,獲得陣列結果集。

更多的正則表示式使用參考:http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

總結:正則表示式功能強大,使用時要注意每一個空格,每一個值都要匹配。

三、jquery的ajax使用

		$.ajax({
			url: encodeURI(durl),	
			type:'get',
			async:false,
                        cache:false,
                        dataType:'json',
			success: function (data) {
				//
			}, error: function (a, b, c) {
				alert(b);
			}
		});

encodeURI()方法主要對url的中文字元進行編碼。

aysnc:預設為true,即非同步,所謂非同步即使用者進行ajax請求時,使用者還可以操作頁面。使用時注意變數賦值或返回值因非同步請求沒執行完導致變數沒有值或沒返回值問題。

cache:預設為true,快取ajax請求的資料。

dataType:設定服務端響應的資料型別,注意當設定的型別與返回的型別不一致時,會出現:parsererror,對返回的資料無法解析。返回的結果如是hmtl這data型別為html格式的字串,如是設定dataType:json,這返回json格式。

       error:function(a,b,c){}:要善於利用error,輸出這個值可以幫我們查詢到問題的原因。

       ajax的使用主要是要注意ajax的格式和理解同步非同步問題,更多參考:http://www.php100.com/manual/jquery/

總結:

這個小專案真搓,利用強大的正則表達可以截取出資料,但是一旦獲取的html頁面的DOM結構或者其中一個id等發生變化,那麼這個使用javascript寫的抓取頁面就無法使用,需要修改……

希望有高手提供更好的意見和建議可憐學習下。