基于PC端網站的移動閱讀解決方案

薛艷鋒 高志娥 高文蓮

摘 要：摘 要：針對PC端設計的網站在移動設備端直接顯示時界面極不友好，而且有許多內容閱讀者根本不感興趣。針對這種情況，本文實現了一種基于PC端網站的移動閱讀解決方案。首先通過cURL函數獲取HTTP和HTTPS頁面的HTML內容，然后從中提取讀者感興趣的數據并在移動端進行內容重構。在普通話水平測試成績查詢系統上所做的實驗表明：內容重構之后移動端的顯示效果遠勝于移動端瀏覽器直接打開網站的顯示效果，而且顯示內容更精準。

關鍵詞：移動閱讀；cURL；ajax；jQuery；jQuery Mobile

中圖分類號：TP391.9 文獻標識碼：A

Abstract：When the websites designed for PC are displayed directly on the mobile devices，the interfaces are very unfriendly and a lot of contents are uninteresting for readers at all.In view of this problem，the paper proposes a mobile reading solution based on the PC website.The data，which readers are interested in，are extracted from the HTTP or HTTPS HTML contents of the page fetched by the cURL function and reconstructed in the mobile terminal.The experimental results from the PUTONGHUA SHUIPING CESHI （PSC） score query system show that the display effect after the reconstruction of the contents is far better than that directly through browsers on mobile devices，and the display contents are more accurate.

Keywords：mobile reading；cURL；ajax；jQuery；jQuery mobile

1 引言（Introduction）

隨著移動互聯網[1]時代的到來，以平板電腦和智能手機為代表的移動終端的普及，以及通過移動終端連接網絡的成本越來越低，人們越來越多地開始從移動終端獲取信息[2]。人們可以通過移動終端配備的瀏覽器隨時隨地打開任意的網站查詢自己想要的信息，比如旅游信息[3，4]、圖書信息[5，6]等，但由于受到移動終端屏幕尺寸的限制，閱讀體驗較差。雖然移動終端的屏幕變得越來越大，但是跟傳統電腦相比，呈現信息的界面仍然不及其一半，而且終端設備固有的便攜性也會大打折扣。所以使移動終端在有限的空間里呈現用戶在網站中最感興趣的內容顯得尤為重要[7]。

本文實現了基于PC端網站的移動閱讀[8，9]解決方案。具體做法是點擊微信公眾平臺的自定義菜單進，入普通話水平測試成績查詢系統，輸入必填姓名、身份證號信息，即可得到PC端所顯示的查詢用戶關心的全部信息。

2 功能實現（Function realization）

該功能實現的具體流程為：首先通過自定義表單獲取必填信息，即身份證號和姓名；然后與普通話水平測試成績查詢系統的官方網站的網址進行拼接；其次通過cURL函數抓取對應的HTML內容，利用PHP字符串函數提取讀者感興趣的內容；最后把提取出來的內容重構，并通過ajax技術、jQuery Mobile框架在查詢頁面進行局部更新。具體流程如圖1所示。

2.1 獲取必填信息

通過在IE瀏覽器地址欄中鍵入山西省普通話水平測試成績查詢系統官方網址“http：//shanxi.cltt.org/Web/Login/PSCP01001.aspx”，然后在表單的“您的姓名”與“證書編號”相對應的文本框中填入自己的相關信息，點擊“查詢”按鈕，可得到對應的查詢信息，部分信息顯示見表1。

在表單提交的過程中，點擊httpwatch的Stream選項卡，從HTTP請求消息的請求行“POST /Web/Login/PSCP01001.aspx HTTP/1.1”可以得到，表單提交方式為POST方式；并從本次請求消息可以得到，請求體內容為“__VIEWSTATE=%2FwEPDwUKMjExOTU2MjkwOQ9kFgICAw9kFgJmDw8WAh4EVGV4dAUo5LiK5Y2I5aW977yB5LuK5aSp5pivNeaciDMw5pelIOaYn%2Bacn%2BS4gGRkZA%3D%3D&txtStuID;=&txtName;=%E8%96%9B%E8%89%B3%E9%94%8B&txtIDCard;=1423021984********&btnLogin;=%E6%9F%A5++%E8%AF%A2&txtCertificateNO;=&txtCardNO;=”。點擊httpwatch的POST Data選項卡，可以看到請求參數為7個（其中有效參數為4個），見表2。通過與請求體內容比較，發現請求體內容為7個參數經過編碼之后通過連字符號“&”連接而成的文本序列。而參數txtName的值為考生姓名經過編碼之后的序列值；txtIDCard的值為考生證件號碼（此處為身份證號）的值。通過同時修改姓名txtName、證件號碼txtIDCard的值，可得到對應的普通話成績信息。

2.2 關鍵內容提取

設置PHP變量$url為山西省普通話水平測試成績查詢系統官方網址，$post_data為POST請求體內容，然后通過cURL模擬登錄，具體代碼如下：

$ch=curl_init（）；

curl_setopt（$ch，CURLOPT_URL，$url）；

curl_setopt（$ch，CURLOPT_RETURNTRANSFER，1）；

curl_setopt（$ch，CURLOPT_POST，1）；

curl_setopt（$ch，CURLOPT_POSTFIELDS，$post_data）；

$output=curl_exec（$ch）；

curl_close（$ch）；

通過上述函數運行，相應消息的HTML內容以字符串的形式賦值給PHP變量$output。依據PHP自帶的強大字符串處理函數，可獲得考生最感興趣部分對應的HTML內容，在本文中選取的10個最感興趣內容分別為：姓名、證件號、準考證號、考試時間、最終分、等級、證書編號、省份、測試站點和考生照片。同時，選中考生照片，右擊選中復制圖像地址，可得到圖像地址為“http：//shanxi.cltt.org/Web/common/GeneratePhotoByStuID.ashx？stuID=1403513100016”。

2.3 內容重構

首先分別導入jQuery Mobile的CSS文件、jQuery的JS文件、jQuery Mobile的JS文件，目的是使內容在移動端的呈現方式更加人性化；其次通過ajax技術獲取考生成績信息，獲取成功之后局部更新頁面內容。代碼如下：

獲取考生信息的表單代碼如下，其中顯示考生成績的區域暫時顯示內容為空，id為“notification”。當點擊按鈕獲取考生信息成功時，它的內容會更新。

生成考生成績信息的過程為：首先通過表單獲取考生姓名與考生證件號碼，即$txtName=$_POST[Name]；$txtIDCard=$_POST[ID]；然后重構請求體內容，即$post_data="__VIEWSTATE=%2FwEPDwUKMjExOTU2MjkwOQ9kFgICAw9kFgJmDw8WAh4EVGV4dAUn5pma5LiK5aW977yB5LuK5aSp5pivMuaciDLml6Ug5pif5pyf5LqMZGRk&txtStuID;=&txtName;=" . $txtName . "&txtIDCard;=" . $txtIDCard . "&btnLogin;=%E6%9F%A5++%E8%AF%A2&txtCertificateNO;=&txtCardNO;="；最后重構照片地址，從照片地址“http：//shanxi.cltt.org/Web/common/GeneratePhotoByStuID.ashx？stuID=1403513100016”可以看到，它是以GET方式請求照片的，請求參數為stuID，對應值為準考證號。假設獲取的準考證號賦值給$stuID，即照片地址可重構為src="http：//shanxi.cltt.org/Web/common/GeneratePhotoByStuID.ashx？stuID=".$stuID。

3 效果演示（Demonstration effect）

通過上述過程，查詢頁面與考生成績信息頁面在手機端的顯示形式更加人性化，內容更加精準化，并且屏蔽了一些用戶不關心的內容。結果顯示頁面重構前后的效果顯示對比如圖2和圖3所示。

4 結論（Conclusion）

通過本文的算法，基于PC端網站的移動閱讀解決方案不僅可以擴展到其他省份的普通話成績查詢網站，而且也可以擴展到讀者感興趣的任何網站。

參考文獻（References）

[1] 吳吉義，李文娟，黃劍平，等.移動互聯網研究綜述[J].中國科學：信息科學，2015，45（1）：45-69.

[2] 羅軍舟，吳文甲，楊明.移動互聯網：終端、網絡與服務[J].計算機學報，2011，34（11）：2029-2051.

[3] 李建州，張運來，李惠璠.移動互聯網在旅游業中的應用研究[J].旅游學刊，2011，26（10）：89-94.

[4] 鄧維.移動互聯網對智慧旅游的影響分析[D].成都：電子科技大學，2014.

[5] 陳麗冰.移動互聯網時代的圖書館服務[J].圖書館，2013 （10）：126-129.

[6] 董穎，孔悅凡，張宇飛，等.移動互聯網微技術及其對圖書館信息服務的影響[J].情報探索，2015（3）：114-117.

[7] 王瑞雪.Web3.0時代移動互聯網商務評價信息聚合[J].電子制作，2013（6）：161-162.

[8] 何希.移動閱讀及其用戶行為研究[D].重慶：重慶大學，2014.

[9] 馬科，張秀蘭.我國移動閱讀研究綜述[J].圖書館，2013（4）：68-71.

作者簡介：

薛艷鋒（1984-），男，碩士，講師.研究領域：數據挖掘.

高志娥（1984-），女，碩士，助教.研究領域：算法設計與分析.

高文蓮（1968-），女，碩士，副教授.研究領域：計算機網絡，計算機應用.