一種將互聯(lián)網(wǎng)站轉換為適合手機用戶瀏覽的風格的技術 ,更改歷史一、前言移動互聯(lián)網(wǎng)的興起，使手機用戶逐漸形成用手機訪問互聯(lián)網(wǎng)的習慣。但由于傳統(tǒng)互聯(lián)WEB 網(wǎng)站的界面和風格，是為

一種將互聯(lián)網(wǎng)站轉換為適合手機用戶瀏覽的風格的技術

更改歷史

一、前言

移動互聯(lián)網(wǎng)的興起，使手機用戶逐漸形成用手機訪問互聯(lián)網(wǎng)的習慣。但由于傳統(tǒng)互聯(lián)WEB 網(wǎng)站的界面和風格，是為PC 屏幕而設計的，即使手機上安裝了可閱讀HTML 格式網(wǎng)頁的瀏覽器，但網(wǎng)頁在手機屏幕上顯示的效果仍然很難看，用戶體驗很差，因此，傳統(tǒng)互聯(lián)網(wǎng)站的所有者不得不專門為手機用戶開發(fā)專門的手機網(wǎng)站。但開發(fā)新的手機網(wǎng)站需投入較高的開發(fā)成本，并需要專門的服務器和網(wǎng)絡條件，因此，手機網(wǎng)站建設難以得到推廣，普通手機用戶只能面臨豐富的互聯(lián)網(wǎng)資源而無法訪問。

本文提出了一種新型的網(wǎng)頁轉換技術，可以較低的成本將互聯(lián)網(wǎng)WEB 網(wǎng)站轉換成適合手機屏幕瀏覽的界面風格，而且無需互聯(lián)網(wǎng)站投入新的服務器設施和租用網(wǎng)絡。

二、基本原理

本技術采用了HTTP 反向代理服務器的類似技術。在互聯(lián)網(wǎng)上需部署一臺服務器，稱為W2M 代理服務器，傳統(tǒng)互聯(lián)網(wǎng)站（稱為源WEB 網(wǎng)站如www.sina.com ），需將其手機網(wǎng)站域名（稱為手機網(wǎng)站，如sina.cn ）解析到該服務器的IP 地址上。當手機用戶訪問手機網(wǎng)站域名時，W2M 代理服務器將Http 請求轉發(fā)到源WEB 網(wǎng)站，源WEB 網(wǎng)站返回WEB 網(wǎng)頁內(nèi)容給W2M 代理服務器，由于該網(wǎng)頁只適合PC 屏幕瀏覽，因此，W2M 代理服務器按事先設置的規(guī)則，將該網(wǎng)頁重新組織成適合手機屏幕瀏覽的內(nèi)容，發(fā)回給手機瀏覽器，手機瀏覽器將網(wǎng)頁展現(xiàn)給用戶。如下圖所示：

三、技術架構

W2M 代理服務器的架構如下所示：

手機瀏覽器

上圖展現(xiàn)了手機瀏覽器發(fā)出對手機網(wǎng)站的請求，到接收到手機網(wǎng)站內(nèi)容的整個過程中，W2M 代理服務器內(nèi)各模塊的工作流程。主要的流程如下：

1. 手機瀏覽器提交對手機網(wǎng)站的網(wǎng)頁的HTTP 請求，由于手機網(wǎng)站的域名被映射到

W2M 代理服務器，因此請求發(fā)送到W2M 服務器的HTTP 請求接入模塊；

2. HTTP 請求接入模塊獲取到HTTP 請求，，該請求的HTTP 頭信息中包含了手機

網(wǎng)站域名和請求的網(wǎng)頁URL ，以及其他信息，比如Cookie ，會話信息等，并將該請求提交給HTTP 請求解析模塊處理。

3. HTTP 請求解析模塊通過分析手機網(wǎng)站域名和請求的網(wǎng)頁URL ，從系統(tǒng)內(nèi)部的源

網(wǎng)站網(wǎng)址映射表中得到源網(wǎng)站的域名；將HTTP 請求消息頭的Host 改成源網(wǎng)站域名，Accept 改成標準PC 瀏覽器的HTTP 請求的對應Accept 數(shù)值。轉交給源網(wǎng)站請求模塊；

4. 源網(wǎng)站請求模塊與源網(wǎng)站建立起HTTP 連接，將請求轉發(fā)給源網(wǎng)站，源網(wǎng)站對該

請求視作標準PC 瀏覽器的HTTP 請求，返回網(wǎng)頁或圖片等資源的HTTP 響應消息。

5. 源網(wǎng)站請求模塊將HTTP 響應消息提交給WEB 數(shù)據(jù)提取模塊處理，如果該HTTP

響應消息是網(wǎng)頁文本內(nèi)容，則該網(wǎng)頁中大量用于PC 瀏覽器布局處理和樣式展現(xiàn)的HTML 文本應該過濾掉，只需要保留對用戶有用的信息內(nèi)容數(shù)據(jù)（比如新聞頁面中真正有價值的是新聞標題、內(nèi)容和相關鏈接等信息內(nèi)容數(shù)據(jù)）。因此WEB 數(shù)據(jù)提取模塊根據(jù)HTTP 響應消息對應的請求URL ，從WEB 資源數(shù)據(jù)提取規(guī)則庫里獲得對該URL 的網(wǎng)頁解析規(guī)則，按規(guī)則的要求，對HTTP 響應消息體進行信息內(nèi)容數(shù)據(jù)提取。如果該HTTP 響應消息是非文本信息，比如圖片，那么圖片數(shù)據(jù)就是信息內(nèi)容數(shù)據(jù)。

6. 提取出來的信息內(nèi)容數(shù)據(jù)被轉交給手機展現(xiàn)內(nèi)容生成模塊，手機網(wǎng)頁展現(xiàn)模塊對

網(wǎng)頁的信息內(nèi)容，用對應的手機網(wǎng)頁模板進行裝載處理，形成適合手機瀏覽器閱讀的手機網(wǎng)頁。如果該信息內(nèi)容數(shù)據(jù)時圖片，就將圖片進行尺寸縮略和體積壓縮，以免超出手機屏幕顯示范圍。

7. 該手機展現(xiàn)數(shù)據(jù)要提交給HTTP 響應生成模塊，組成手機瀏覽器可識別的HTTP

消息頭和消息體，這就是手機瀏覽器請求的URL 對應的HTTP 回應消息；

8. HTTP 回應消息被轉交給HTTP 請求接入模塊，準備返回給手機瀏覽器；

9. 該HTTP 回應消息被保存在HTTP 響應消息緩存模塊中，被設定緩存一定時間，

以備后用；

10. HTTP 請求接入模塊將HTTP 響應消息返回給手機瀏覽器，該響應消息內(nèi)容是專

門為手機瀏覽器進行定制適配的網(wǎng)頁內(nèi)容，所以，展現(xiàn)效果更適合用戶體驗，整

個流程至此完成。

11. 為了提高手機用戶訪問網(wǎng)站的速度，如果手機用戶訪問的是之前曾訪問過的同一

個網(wǎng)頁（或圖片），那么HTTP 請求解析模塊會從HTTP 響應緩存中拿到緩存的

網(wǎng)頁響應消息。

12. 該網(wǎng)頁響應消息被送往HTTP 請求接入模塊，立即返回給手機瀏覽器，大大提高

響應速度。

四、關鍵技術

4.1 HTTP請求接入模塊

HTTP 請求接入模塊是連接手機用戶和W2M 代理服務器直接網(wǎng)絡通訊的模塊，要具備同時維持成千上萬個手機網(wǎng)絡客戶端的能力。該模塊性能的好壞，直接影響著可同時服務的用戶數(shù)的多少以及用戶對響應速度的感受。

因此，可利用為成熟的WEB 服務器掛接Proxy 模塊的思路來實現(xiàn)HTTP 請求接入模塊，由于WEB 服務器，例如IIS,Apache ，本身就擁有穩(wěn)定的大規(guī)模用戶訪問接入能力，只要WEB 服務器將HTTP 請求轉交給Proxy 模塊，Proxy 模塊就可以處理后續(xù)的HTTP 請求處理操作。所有與手機瀏覽器之間的連接維護工作都交由WEB 服務器來處理。

4.2 WEB資源數(shù)據(jù)提取規(guī)則模型

WEB 資源是指URL 所指向的網(wǎng)站對象，一般包括網(wǎng)頁、圖片、Flash 、ActiveX 控件、音像文件、Javascript 腳本、樣式表、各種可下載的文件等等。WEB 資源數(shù)據(jù)提取規(guī)則是根據(jù)資源的數(shù)據(jù)特點定義出的規(guī)則，便于WEB 數(shù)據(jù)提取模塊，將必要的信息內(nèi)容數(shù)據(jù)抽取出來，用于手機展示。

由于本技術主要是為了解決傳統(tǒng)資訊網(wǎng)頁在手機屏幕的適配展示，所以，對于網(wǎng)頁、圖片

等網(wǎng)站資源要進行比較復雜的轉換規(guī)則設計，對于其他資源類型，不必做轉換處理，原樣返回給手機瀏覽器自行處理即可。

4.2.1 網(wǎng)頁數(shù)據(jù)提取規(guī)則

每一個要適配的源網(wǎng)站網(wǎng)頁都要定義一套提取規(guī)則，一般而言，網(wǎng)頁的規(guī)則用網(wǎng)頁的網(wǎng)站Id 站內(nèi)URL 地址作為關鍵字來標示，但對于動態(tài)網(wǎng)頁而言，雖然參數(shù)不同，但實際上網(wǎng)頁的數(shù)據(jù)展現(xiàn)方式是一樣的，所以，網(wǎng)頁的規(guī)則可以用URL 的正則表達式來區(qū)別。

網(wǎng)頁內(nèi)有眾多信息內(nèi)容塊，比如一段文字，一組類似于新聞列表那樣的文章標題，這些信息內(nèi)容在網(wǎng)頁的HTML 代碼中，都以特定的代碼開頭，以特定的代碼結尾，所以，通過分析HTML 代碼，可以提取出這些信息內(nèi)容塊。因此一個網(wǎng)頁的數(shù)據(jù)提取規(guī)則是由多個信息內(nèi)容塊定義組成的。信息內(nèi)容塊類型分為單塊圖文，標題列表。

單塊圖文內(nèi)容塊定義

單塊圖文如上圖所示，要提取單塊圖文的信息，要有以下定義信息：

1. 內(nèi)容塊說明：用于標示某個內(nèi)容塊的說明，比如：首頁活動預告

2. 內(nèi)容塊前置特征HTML 代碼：即從頁面中的HTML 中，自從該段HTML 之后，就

是內(nèi)容塊的HTML 代碼內(nèi)容的開始。

3. 內(nèi)容塊后置特征HTML 代碼：即內(nèi)容塊的HTML 代碼內(nèi)容至該段HTML 就結束了。

4. 替換目標特征HTML 代碼（零或多項）：即內(nèi)容塊中要使用替換為HTML 來替換掉

的HTML 代碼；

5. 替換為HTML 代碼（與替換目標特征HTML 代碼數(shù)量一樣）：即替換目標HTML

代碼的內(nèi)容。留空值意味著只過濾掉替換目標HTML 代碼；

6. 保留內(nèi)容中a 標簽超鏈接：是或否，如果否，則內(nèi)容中的a 標簽被過濾掉；

單塊內(nèi)容塊的img 圖片標簽一般保留，手機瀏覽器看到該標簽時，會再次向W2M 代理服務器發(fā)出圖片請求，再下載圖片。關于圖片資源的數(shù)據(jù)提取規(guī)則后面章節(jié)解釋。

標題列表內(nèi)容塊定義

標題列表內(nèi)容塊例

1

標題列表內(nèi)容塊例2

標題列表內(nèi)容塊例3

從以上例子可看出，標題列表內(nèi)容塊的特點是，列表中只顯示信息的部分內(nèi)容，要看更詳細的內(nèi)容，要點擊進入另外一個詳細內(nèi)容頁面，才能看到。而該詳細內(nèi)容頁面一般由單塊圖文內(nèi)容塊組成，如下圖所示：

標題列表內(nèi)容塊的詳細內(nèi)容頁面示例

因此，標題列表內(nèi)容塊的信息要提取出來，要有以下定義：

1. 內(nèi)容塊說明：用于標示某個內(nèi)容塊的說明，比如：首頁活動預告

2. 內(nèi)容塊前置特征HTML 代碼：即從頁面中的HTML 中，自從該段HTML 之后，就

是內(nèi)容塊的HTML 代碼內(nèi)容的開始。

3. 內(nèi)容塊后置特征HTML 代碼：即內(nèi)容塊的HTML 代碼內(nèi)容至該段HTML 就結束了。

4. 替換目標特征HTML 代碼（零或多項）：即內(nèi)容塊中要使用替換為HTML 來替換掉

的HTML 代碼；

5. 替換為HTML 代碼（與替換目標特征HTML 代碼數(shù)量一樣）：即替換目標HTML

代碼的內(nèi)容。留空值意味著只過濾掉替換目標HTML 代碼；

6. 標題圖片標簽特征HTML 代碼：如果列表中有圖片，則通過該特征HTML 代碼可

以提取img 標簽的內(nèi)容；

7. 詳細內(nèi)容頁面鏈接a 標簽特征HTML 代碼：通過該特征代碼提取鏈接到詳細內(nèi)容頁