基于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-），女，硕士，副教授.研究领域：计算机网络，计算机应用.
摘 要：摘 要：针对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-），女，硕士，副教授.研究领域：计算机网络，计算机应用.
