跨域獲取數據的方法和系統的製作方法
2023-05-29 20:55:31 1
專利名稱：跨域獲取數據的方法和系統的製作方法
技術領域：
本發明涉及網頁間獲取數據的技術，尤其涉及跨域獲取數據的方法和系統。
背景技術：
目前，網絡上的數據內容和結構大多採用可擴展標識語言(XML)加以描述並保存在網絡(web)伺服器中，用XML描述的數據內容和結構通過web伺服器的頁面處理邏輯以網頁的形式通過客戶端瀏覽器呈現出來。
對於數據的加載和頁面的呈現，傳統的web應用允許用戶向web伺服器發送請求，web伺服器接受並處理請求，應用頁面處理邏輯返回新的網頁。參見圖1，圖1是傳統web模式下數據加載和頁面呈現的結構示意圖。如圖1所示，客戶端用戶打開瀏覽器瀏覽網頁，欲瀏覽新的網頁時，向web伺服器端發送超文本傳輸協議(Http)請求，web伺服器收到Http請求後，調用所存儲的數據並對數據進行頁面呈現的邏輯處理，然後將經過處理得到的超文本連結標示語言(HTML)代碼和頁面呈現的相關需要在同一個響應中發送給客戶端，客戶端瀏覽器根據web伺服器發送的響應顯示新的頁面。
然而，由於前後兩個頁面中的大部分HTML代碼是相同的，發送這些沒有改變的信息將佔用帶寬；另外，web伺服器處理數據的時候，用戶處於等待狀態，處理完後返回新的頁面時，用戶仍然需要等待，所以這種數據加載和頁面呈現的方式響應時間長，速度慢，浪費帶寬資源。
於是，業界提出一種採用異步Java腳本(JavaScript)和XML(AJAX)的方式來實現web應用。AJAX是一種創建交互式網頁應用的網頁開發技術，使用XMLHttpRequest對象進行異步數據查詢、檢索，通過XMLHttpRequest對象直接向web伺服器發送請求並取回所需要的數據，並在客戶端採用JavaScript處理來自web伺服器的響應。其中，XMLHttpRequest對象是目前大多數瀏覽器都支持並提供的用來直接發送Http請求並接受遠程伺服器響應數據的對象，是AJAX獲取遠程數據的核心。
參見圖2，圖2是AJAX模式下數據加載和頁面呈現的結構示意圖。如圖2所示，在客戶端瀏覽器中增加了AJAX引擎，由它實現頁面呈現的任務，使得web伺服器可以專注於處理數據。客戶端用戶利用XMLHttpRequest對象發起Http請求，web伺服器收到Http請求後只返回所請求的XML數據，客戶端界面調用JavaScript處理web伺服器所返回的XML數據，呈現新的網頁。可見，web伺服器更為迅速地響應用戶的請求，並避免了在網絡上發送那些沒有改變的信息。
以上描述了同域情況下數據加載和頁面呈現的過程，同域是指數據都保存在同一web伺服器上，例如前後頁面所使用的數據都保存在163.com伺服器上，而對於一些集成的web應用來說，往往有很多個域，例如bbs.163.com，mail.163.com等，對於這些不同域的數據常常需要進行統一的處理和呈現，於是就出現數據跨域應用的問題。目前，通常採用web伺服器代理的解決方案解決跨域應用的問題。
參見圖3，圖3是現有技術跨域獲取數據的示意圖。如圖3所示，客戶端用戶正在利用瀏覽器瀏覽的頁面A為http://a1.b.com/a.html，其屬於a1.b.com域，數據B為http://a2.b.com/b.xml，屬於a2.b.com域，保存在a2.b.com的web伺服器上，正在瀏覽頁面A的用戶希望獲取數據B，並在本域上以頁面A所需的頁面呈現邏輯將數據B呈現出來，於是用戶向頁面A所屬域的web伺服器上發送一個Http請求，即向a1.b.com的web伺服器發送Http請求，a1.b.com的web伺服器收到Http請求後，向a2.b.com的web伺服器索取數據B，並發給客戶端，客戶端界面調用JavaScript處理web伺服器所返回的數據B，並呈現出來。
這種跨域獲取數據的方法具有以下缺點第一，頁面A與自身web伺服器需要有一定的約定，以便在瀏覽頁面A的用戶發送請求時，web伺服器可以了解頁面A所請求的數據在哪個域上，對於該約定需要嚴格遵守和維護，成本高；第二，頁面A所屬域的web伺服器上需要配置數據B所屬域的web伺服器相關內容，以實現web伺服器之間的跨域訪問，這無疑也增加了配置維護成本；第三，對於數據B實際上傳輸了兩次，即從a2.b.com的web伺服器到a1.b.com的web伺服器，又從a1.b.com的web伺服器到呈現頁面A的瀏覽器，所以浪費了帶寬，並且由於兩次傳輸中的任何一次出錯都會導致該數據的獲取失敗，所以出錯的可能性也增大。
發明內容
有鑑於此，本發明提出一種跨域獲取數據的方法，可以低成本地解決跨域獲取數據的問題，具體地，該方法包括在第一頁面中嵌入與第一頁面所屬域的後綴相同且與第一頁面所需獲取的數據的所屬域相同的代理頁面，所述第一頁面通過所述代理頁面獲取所需數據。
優選地，在所述嵌入代理頁面之前，該方法進一步包括判斷第一頁面中是否嵌入了代理頁面，如果是，則直接通過代理頁面獲取數據；否則，執行所述嵌入步驟。在所述判斷之前，該方法進一步包括向第一頁面所需獲取數據所屬的網絡伺服器發送獲取數據的請求。
優選地，所述通過代理頁面獲取數據具體包括第一頁面和代理頁面分別將自身所屬的域設置成域的後綴，第一頁面調用代理頁面的數據請求對象獲取數據。
優選地，所述在第一頁面中嵌入代理頁面具體包括動態創建內嵌式頁面，將內嵌式頁面的地址指向代理頁面的地址，拉取代理頁面嵌入當前頁面中。
優選地，所述在第一頁面中嵌入代理頁面與通過代理頁面獲取數據之間，該方法進一步包括創建回調隊列，將在代理頁面嵌入第一頁面過程中第一頁面獲取與數據同域的其它數據的請求以及獲取數據後需要進行的邏輯處理存放到回調隊列中。在所述獲取數據之後，該方法進一步包括依次處理所述回調隊列中的邏輯處理和請求。
另外，本發明還提出一種跨域獲取數據的系統，包括欲獲取與自身所屬域後綴相同的數據的第一頁面，該系統進一步包括與數據所屬域相同且嵌入第一頁面中的代理頁面，所述代理頁面用於根據第一頁面的請求獲取數據並將數據發送給第一頁面。
優選地，該系統進一步包括回調隊列，用於保存第一頁面發送的同域數據請求和邏輯處理。
優選地，所述數據為一個以上保存在後綴與第一頁面所屬域相同的伺服器上的數據，且每個代理頁面與具有相同所屬域的一個或一個以上的數據相對應。
從以上技術方案可以看到，本發明提供的跨域獲取數據的方法和系統具有以下有益效果相比於通過web伺服器作為代理進行數據獲取的方法，由於本發明提供的方案直接在欲獲取數據的頁面中嵌入與數據同域且與頁面所屬域後綴相同的代理頁面，利用代理頁面獲取數據，所以成本低、實現容易且簡單，只需要在被獲取數據的web伺服器上配置一個代理頁面即可，不需要額外的約定和維護，因此配置和維護的成本也較低。
圖1是傳統web模式下數據加載和頁面呈現的結構示意圖；圖2是AJAX模式下數據加載和頁面呈現的結構示意圖；圖3是現有技術跨域獲取數據的示意圖；圖4是本發明實施例跨域獲取數據的流程圖。
具體實施例方式
為了使本發明的特徵和優點更加清楚明白，下面參照附圖結合具體實施例對本發明作進一步的描述。
在AJAX模式下，根據同域原則，XMLHttpRequest對象要受到瀏覽器跨域的限制，也就是說，屬於a1.b.com域的客戶端瀏覽器不能利用XMLHttpRequest對象請求屬於a2.b.com域上的數據，雖然數據不能跨域訪問，但是對於頁面A訪問頁面B，同域原則提供了一種特例頁面可以調用腳本將自己的域**.b.com設置成b.com，即調用腳本將自己的域設置成自己域的後綴，於是，對於頁面Ahttp://a1.b.com/a.html和頁面Bhttp://a2.b.com/b.html，可以分別調用腳本將域設置成b.com，這樣頁面A和頁面B就可以互相訪問，屬於a1.b.com域的客戶端瀏覽器也就可以通過調用屬於a2.b.com域的XMLHttpRequest對象獲取屬於a2.b.com域的數據。
本發明利用同域原則的這一特例，在a2.b.com的web伺服器上保存一個a2.b.com域下的代理頁面，該代理頁面的作用僅是獲取a2.b.com域上的數據，並不對數據執行頁面呈現的處理邏輯。當頁面A需要獲取a2.b.com域上的數據B時，首先根據同域原則的特例拉取代理頁面，然後由代理頁面獲取同域下的數據B，頁面A再通過訪問代理頁面獲取數據B，從而實現頁面A跨域獲取數據。具體參見圖4，圖4是本發明實施例跨域獲取數據的流程圖。
首先，在數據B所屬的a2.b.com的web伺服器上預先保存代理頁面C，代理頁面C為http://a2.b.com/proxy.html，該代理頁面可以獲取到a2.b.com的web伺服器上所保存的數據，但不對數據執行頁面呈現的處理邏輯。
進一步地，頁面A所需獲取的數據可以為一個以上，所需獲取數據的所屬域與頁面A的所屬域的後綴相同。對應的代理頁面也為一個以上，每個代理頁面都可以與自身所屬域相同的一個或一個以上的數據相對應，並且保存在對應數據所屬域的web伺服器上。接下來，跨域獲取數據的步驟具體如下步驟401、用戶在頁面A上向數據B所屬的web伺服器發送獲取數據B的請求；在一些集成的web應用中，通常包含多個域，客戶端在瀏覽其中一個域名下的頁面時，可能還希望訪問其它域名下的數據，但是不必要連結到其它域名下的頁面上，也就是說，只需要獲得其它域名下的數據即可，這時，客戶端向數據所屬的web伺服器發送獲取數據的請求。在本實施例中，客戶端用戶在瀏覽頁面Ahttp://a1.b.com/a.html時，欲訪問非本域名下的但域名後綴相同的數據B，則向數據B所屬的web伺服器即a2.b.com的web伺服器發送獲取請求。這裡，頁面A也可以稱為第一頁面。
步驟402、判斷頁面A中是否已經嵌入了代理頁面C，如果是，執行步驟404-405；否則，執行步驟403；步驟403、動態創建iframe，拉取代理頁面C嵌入頁面A中，並將頁面A獲取數據B後需要進行的邏輯處理以及所發起的獲取數據B所在域下的其它數據的請求存放到一個預設的回調隊列中；iframe是一種內嵌式頁面技術，可以在一個頁面中嵌入另一個頁面，這一步驟即是動態創建iframe，將iframe的地址指向代理頁面C的地址，拉取a2.b.com的web伺服器上保存的代理頁面C，嵌入頁面A中，代理頁面拉取成功後，可以進一步通知頁面A已經拉取完成，這時可以通過設置變量或者調用回調函數來通知頁面A。在將代理頁面C嵌入頁面A的過程中，頁面A可能發起對a2.b.com域下的其它數據的請求，而且頁面A還將對所獲取的數據B進行邏輯處理，這時可以將這些請求和邏輯處理一併放到一個預先設置的回調隊列中，便於頁面A在拉取代理頁面C成功後，依次對回調隊列中的內容進行處理。回調隊列可以至少包括以下信息所需要獲取的數據、獲取數據成功後需要進行的邏輯處理。
可見，創建回調隊列是為了避免在嵌入代理頁面時遺漏了對該域其它數據的請求，這是一種較佳的實施方式，實際應用中也可以不用創建回調隊列。
另外，採用iframe嵌入代理頁面也僅是嵌入代理頁面的一種方式，其它嵌入代理頁面的方式同樣適用於本發明。
步驟404、代理頁面C和頁面A調用腳本，分別將自己的域設置成域的後綴。
代理頁面C為http://a2.b.com/proxy.html，頁面A為http://a1.b.com/a.html它們調用腳本執行document.domain＝「b.com」後，代理頁面C和頁面A就將自己的域都設置成了b.com。經過這一步驟後，代理頁面C和頁面A就可以互相訪問了。
步驟405、頁面A調用代理頁面C所屬的a2.b.com域的XMLHttpRequest對象，獲取數據B。
步驟406、依次處理回調隊列中的邏輯處理和請求。
以上結合圖4描述了頁面A在請求獲取數據B時動態創建iframe拉取代理頁面並通過代理頁面獲取數據B的過程，事實上，如果頁面A可以預先知道需要獲取哪些域上的數據，那麼還可以直接把這些域的代理頁面嵌入頁面A中，這樣就不用在請求數據時才動態創建iframe拉取代理頁面，也不用創建回調隊列保存拉取代理頁面過程中進行的處理。
從以上步驟可以看到，本發明實施例提供的方法是在數據B所屬的web伺服器上預先保存一個代理頁面，頁面A通過iframe將代理頁面嵌入頁面A中，然後利用同域原則的特例實現頁面A與代理頁面C的互相訪問，通過代理頁面C獲取數據B。可見，本發明的方案實現簡單、成本低。
以上所述，僅為本發明的較佳實施例而已，並非用於限定本發明的保護範圍。
權利要求
1.一種跨域獲取數據的方法，其特徵在於，該方法包括在第一頁面中嵌入與第一頁面所屬域的後綴相同且與第一頁面所需獲取的數據的所屬域相同的代理頁面，所述第一頁面通過所述代理頁面獲取所需數據。
2.根據權利要求1所述的方法，其特徵在於，在所述嵌入代理頁面之前，該方法進一步包括判斷第一頁面中是否嵌入了代理頁面，如果是，則直接通過代理頁面獲取數據；否則，執行所述嵌入步驟。
3.根據權利要求2所述的方法，其特徵在於，在所述判斷之前，該方法進一步包括向第一頁面所需獲取數據所屬的網絡伺服器發送獲取數據的請求。
4.根據權利要求1、2或3所述的方法，其特徵在於，所述通過代理頁面獲取數據具體包括第一頁面和代理頁面分別將自身所屬的域設置成域的後綴，第一頁面調用代理頁面的數據請求對象獲取數據。
5.根據權利要求1所述的方法，其特徵在於，所述在第一頁面中嵌入代理頁面具體包括動態創建內嵌式頁面，將內嵌式頁面的地址指向代理頁面的地址，拉取代理頁面嵌入當前頁面中。
6.根據權利要求1、2或3所述的方法，其特徵在於，所述在第一頁面中嵌入代理頁面與通過代理頁面獲取數據之間，該方法進一步包括創建回調隊列，將在代理頁面嵌入第一頁面過程中第一頁面獲取與數據同域的其它數據的請求以及獲取數據後需要進行的邏輯處理存放到回調隊列中。
7.根據權利要求6所述的方法，其特徵在於，在所述獲取數據之後，該方法進一步包括依次處理所述回調隊列中的邏輯處理和請求。
8.一種跨域獲取數據的系統，其特徵在於，包括欲獲取與自身所屬域後綴相同的數據的第一頁面，該系統進一步包括與數據所屬域相同且嵌入第一頁面中的代理頁面，所述代理頁面用於根據第一頁面的請求獲取數據並將數據發送給第一頁面。
9.根據權利要求8所述的系統，其特徵在於，該系統進一步包括回調隊列，用於保存第一頁面發送的同域數據請求和邏輯處理。
10.根據權利要求8所述的系統，其特徵在於，所述數據為一個以上保存在後綴與第一頁面所屬域相同的伺服器上的數據，且每個代理頁面與具有相同所屬域的一個或一個以上的數據相對應。
全文摘要
本發明公開了一種跨域獲取數據的方法，該方法包括在第一頁面中嵌入與第一頁面所屬域的後綴相同且與第一頁面所需獲取數據的所屬域相同的代理頁面，所述第一頁面通過所述代理頁面獲取數據。本發明還同時公開了一種跨域獲取數據的系統，該系統包括欲獲取與自身所屬域後綴相同的數據的第一頁面，以及與數據所屬域相同且嵌入第一頁面中的代理頁面，該代理頁面用於根據第一頁面的請求獲取數據並將數據發送給第一頁面。本發明提供的方案可以低成本地實現跨域獲取數據，並且方案簡單，實現容易。
文檔編號H04L29/02GK101075240SQ20061011184
公開日2007年11月21日 申請日期2006年8月25日 優先權日2006年8月25日
發明者胡振勇, 張禹, 姜傑, 黃希彤, 陳子舜 申請人:騰訊科技(深圳)有限公司