基于PC端網(wǎng)站的移動(dòng)閱讀解決方案

薛艷鋒 高志娥 高文蓮

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

關(guān)鍵詞：移動(dòng)閱讀；cURL；ajax；jQuery；jQuery Mobile

中圖分類號(hào)：TP391.9 文獻(xiàn)標(biāo)識(shí)碼：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）

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

本文實(shí)現(xiàn)了基于PC端網(wǎng)站的移動(dòng)閱讀[8，9]解決方案。具體做法是點(diǎn)擊微信公眾平臺(tái)的自定義菜單進(jìn)，入普通話水平測(cè)試成績(jī)查詢系統(tǒng)，輸入必填姓名、身份證號(hào)信息，即可得到PC端所顯示的查詢用戶關(guān)心的全部信息。

2 功能實(shí)現(xiàn)（Function realization）

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

2.1 獲取必填信息

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

在表單提交的過程中，點(diǎn)擊httpwatch的Stream選項(xiàng)卡，從HTTP請(qǐng)求消息的請(qǐng)求行“POST /Web/Login/PSCP01001.aspx HTTP/1.1”可以得到，表單提交方式為POST方式；并從本次請(qǐng)求消息可以得到，請(qǐng)求體內(nèi)容為“__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;=”。點(diǎn)擊httpwatch的POST Data選項(xiàng)卡，可以看到請(qǐng)求參數(shù)為7個(gè)（其中有效參數(shù)為4個(gè)），見表2。通過與請(qǐng)求體內(nèi)容比較，發(fā)現(xiàn)請(qǐng)求體內(nèi)容為7個(gè)參數(shù)經(jīng)過編碼之后通過連字符號(hào)“&”連接而成的文本序列。而參數(shù)txtName的值為考生姓名經(jīng)過編碼之后的序列值；txtIDCard的值為考生證件號(hào)碼（此處為身份證號(hào)）的值。通過同時(shí)修改姓名txtName、證件號(hào)碼txtIDCard的值，可得到對(duì)應(yīng)的普通話成績(jī)信息。

2.2 關(guān)鍵內(nèi)容提取

設(shè)置PHP變量$url為山西省普通話水平測(cè)試成績(jī)查詢系統(tǒng)官方網(wǎng)址，$post_data為POST請(qǐng)求體內(nèi)容，然后通過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）；

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

2.3 內(nèi)容重構(gòu)

首先分別導(dǎo)入jQuery Mobile的CSS文件、jQuery的JS文件、jQuery Mobile的JS文件，目的是使內(nèi)容在移動(dòng)端的呈現(xiàn)方式更加人性化；其次通過ajax技術(shù)獲取考生成績(jī)信息，獲取成功之后局部更新頁(yè)面內(nèi)容。代碼如下：

獲取考生信息的表單代碼如下，其中顯示考生成績(jī)的區(qū)域暫時(shí)顯示內(nèi)容為空，id為“notification”。當(dāng)點(diǎn)擊按鈕獲取考生信息成功時(shí)，它的內(nèi)容會(huì)更新。

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

3 效果演示（Demonstration effect）

通過上述過程，查詢頁(yè)面與考生成績(jī)信息頁(yè)面在手機(jī)端的顯示形式更加人性化，內(nèi)容更加精準(zhǔn)化，并且屏蔽了一些用戶不關(guān)心的內(nèi)容。結(jié)果顯示頁(yè)面重構(gòu)前后的效果顯示對(duì)比如圖2和圖3所示。

4 結(jié)論（Conclusion）

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

參考文獻(xiàn)（References）

[1] 吳吉義，李文娟，黃劍平，等.移動(dòng)互聯(lián)網(wǎng)研究綜述[J].中國(guó)科學(xué)：信息科學(xué)，2015，45（1）：45-69.

[2] 羅軍舟，吳文甲，楊明.移動(dòng)互聯(lián)網(wǎng)：終端、網(wǎng)絡(luò)與服務(wù)[J].計(jì)算機(jī)學(xué)報(bào)，2011，34（11）：2029-2051.

[3] 李建州，張運(yùn)來，李惠璠.移動(dòng)互聯(lián)網(wǎng)在旅游業(yè)中的應(yīng)用研究[J].旅游學(xué)刊，2011，26（10）：89-94.

[4] 鄧維.移動(dòng)互聯(lián)網(wǎng)對(duì)智慧旅游的影響分析[D].成都：電子科技大學(xué)，2014.

[5] 陳麗冰.移動(dòng)互聯(lián)網(wǎng)時(shí)代的圖書館服務(wù)[J].圖書館，2013 （10）：126-129.

[6] 董穎，孔悅凡，張宇飛，等.移動(dòng)互聯(lián)網(wǎng)微技術(shù)及其對(duì)圖書館信息服務(wù)的影響[J].情報(bào)探索，2015（3）：114-117.

[7] 王瑞雪.Web3.0時(shí)代移動(dòng)互聯(lián)網(wǎng)商務(wù)評(píng)價(jià)信息聚合[J].電子制作，2013（6）：161-162.

[8] 何希.移動(dòng)閱讀及其用戶行為研究[D].重慶：重慶大學(xué)，2014.

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

作者簡(jiǎn)介：

薛艷鋒（1984-），男，碩士，講師.研究領(lǐng)域：數(shù)據(jù)挖掘.

高志娥（1984-），女，碩士，助教.研究領(lǐng)域：算法設(shè)計(jì)與分析.

高文蓮（1968-），女，碩士，副教授.研究領(lǐng)域：計(jì)算機(jī)網(wǎng)絡(luò)，計(jì)算機(jī)應(yīng)用.