基于Ajax的移動(dòng)端異步交互新聞系統(tǒng)開(kāi)發(fā)

李 穎唐 冶李松林

（1 安徽工程大學(xué)，安徽 蕪湖 241000）

（2 哈爾濱工業(yè)大學(xué)，黑龍江 哈爾濱 150001）

基于Ajax的移動(dòng)端異步交互新聞系統(tǒng)開(kāi)發(fā)

李 穎1唐 冶1李松林2

（1 安徽工程大學(xué)，安徽 蕪湖 241000）

（2 哈爾濱工業(yè)大學(xué)，黑龍江 哈爾濱 150001）

基于Ajax異步加載與交互技術(shù)構(gòu)建的多媒體新聞系統(tǒng)以及響應(yīng)式界面設(shè)計(jì)方法創(chuàng)建的新聞界面以實(shí)現(xiàn)網(wǎng)絡(luò)新聞的異步交互以及移動(dòng)端跨平臺(tái)應(yīng)用。提出了多媒體新聞資源庫(kù)XML的異步加載方法，以及響應(yīng)用戶需求動(dòng)態(tài)調(diào)取新聞多媒體資源的方法，并在此基礎(chǔ)之上進(jìn)行了實(shí)例開(kāi)發(fā)與測(cè)試，實(shí)現(xiàn)了新聞數(shù)據(jù)的動(dòng)態(tài)調(diào)用與異步更新，解決了實(shí)時(shí)調(diào)用大量新聞資源的難題。同時(shí)，基于新聞系統(tǒng)界面的響應(yīng)式設(shè)計(jì)解決了設(shè)備屏幕自適應(yīng)和瀏覽器兼容性問(wèn)題,大大方便了網(wǎng)絡(luò)新聞在移動(dòng)端設(shè)備上廣泛傳播與互動(dòng)。

Ajax；異步加載；響應(yīng)式設(shè)計(jì)；網(wǎng)絡(luò)新聞；移動(dòng)端

1 引言

傳統(tǒng)網(wǎng)頁(yè)新聞是將新聞內(nèi)容以文字、圖片、視頻等媒體形式上傳到網(wǎng)頁(yè)上，用戶以頁(yè)面瀏覽的方式查看新聞，當(dāng)用戶發(fā)出一個(gè)HTTP請(qǐng)求時(shí)，服務(wù)器端對(duì)其進(jìn)行處理后返回一個(gè)全新的HTML頁(yè)面。每一次小小的交互都要浪費(fèi)時(shí)間和帶寬去重新讀取整個(gè)頁(yè)面。如此方法創(chuàng)建的網(wǎng)頁(yè)新聞報(bào)道形式單調(diào)、交互方法單一且在用戶交互時(shí)給服務(wù)器端造成了巨大的負(fù)擔(dān)和浪費(fèi)，同時(shí)隨著媒介設(shè)備的發(fā)展，新聞內(nèi)容的傳播面臨設(shè)備與瀏覽器的兼容性等問(wèn)題。

與傳統(tǒng)的Web應(yīng)用不同，Ajax技術(shù)的核心在于異步通信，不必整體刷新頁(yè)面，從而減少了數(shù)據(jù)傳輸量，提高了Web應(yīng)用的響應(yīng)速度，給用戶帶來(lái)了良好的體驗(yàn)[1]?；贏jax技術(shù)中的異步交互技術(shù)構(gòu)建的網(wǎng)頁(yè)新聞系統(tǒng)以異步方式與服務(wù)器交換數(shù)據(jù)，克服了傳統(tǒng)的Web應(yīng)用程序存在的界面整體頻繁刷新給服務(wù)器端帶來(lái)的負(fù)擔(dān)以及狀態(tài)維持困難的問(wèn)題[2]。能夠及時(shí)響應(yīng)用戶需求動(dòng)態(tài)調(diào)取新聞媒體資源，加載到新聞界面上并實(shí)現(xiàn)小范圍的數(shù)據(jù)更新，從而實(shí)現(xiàn)新聞信息內(nèi)容的異步交互。同時(shí)結(jié)合響應(yīng)式界面設(shè)計(jì)的新聞前端能夠順利運(yùn)行于不同設(shè)備終端及移動(dòng)設(shè)備平臺(tái)之上，實(shí)現(xiàn)了網(wǎng)絡(luò)新聞系統(tǒng)的跨平臺(tái)應(yīng)用。

2 多媒體新聞系統(tǒng)的跨平臺(tái)應(yīng)用

網(wǎng)絡(luò)新聞廣泛應(yīng)用于PC端及移動(dòng)端設(shè)備需要解決設(shè)備與瀏覽器的兼容性問(wèn)題。在實(shí)現(xiàn)跨平臺(tái)應(yīng)用的前提下，還需要將新聞界面以更協(xié)調(diào)自然的方式呈現(xiàn)于各種設(shè)備屏幕和瀏覽器端，涉及到新聞界面的響應(yīng)式設(shè)計(jì)。

2.1 跨平臺(tái)應(yīng)用技術(shù)

HTML5是HTML[3]語(yǔ)言的升級(jí)版。基于HTML5和CSS 3.0創(chuàng)建的網(wǎng)頁(yè)新聞界面能夠?qū)崿F(xiàn)跨設(shè)備跨平臺(tái)應(yīng)用，且能夠很好的兼容主流網(wǎng)頁(yè)瀏覽器，如谷歌chrome、火狐firefox、opera、Safari、IE等。HTML5提供的大量標(biāo)簽對(duì)象能夠創(chuàng)建豐富的網(wǎng)頁(yè)新聞元素，涵蓋文本、圖片、視頻、音頻、交互程序等多種媒體形式。CSS 3.0樣式列表又能夠賦予網(wǎng)頁(yè)元素豐富美觀的外形和交互功能。例如CSS 3.0新增的動(dòng)畫(huà)樣式就能夠制作出變形、過(guò)渡、動(dòng)畫(huà)等一系列動(dòng)態(tài)樣式效果。并通過(guò)賦予對(duì)象hover樣式來(lái)達(dá)到動(dòng)態(tài)交互的效果。且CSS 3.0提供的三維效果可以將網(wǎng)頁(yè)新聞拓展至立體空間，使得網(wǎng)頁(yè)新聞不再拘泥于單調(diào)的頁(yè)面瀏覽模式及單一的點(diǎn)擊交互方式。圖1展示的幾種趣味新聞空間就可以通過(guò)拖拽、擰轉(zhuǎn)等手機(jī)屏幕交互方式與新聞空間進(jìn)行互動(dòng)。

圖1 HTML5+css3.0創(chuàng)建的趣味交互新聞空間

2.2 響應(yīng)式界面設(shè)計(jì)

響應(yīng)式頁(yè)面設(shè)計(jì)[4]應(yīng)用于網(wǎng)絡(luò)新聞界面的創(chuàng)建能夠解決交互和設(shè)備瀏覽器的兼容性等問(wèn)題。Marcotte早在2010年提出了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的概念[5]。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)要求網(wǎng)頁(yè)的布局和內(nèi)容能夠根據(jù)設(shè)備與用戶使用行為的變化而變化，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)解決了網(wǎng)頁(yè)新聞系統(tǒng)在不同設(shè)備平臺(tái)和網(wǎng)頁(yè)瀏覽器中的兼容性問(wèn)題。

響應(yīng)式界面設(shè)計(jì)提供了針對(duì)不同設(shè)備和瀏覽器的響應(yīng)式布局方案。通過(guò)浮動(dòng)網(wǎng)頁(yè)布局方法和彈性盒布局方法實(shí)現(xiàn)網(wǎng)頁(yè)、菜單、按鈕的響應(yīng)式布局；Web設(shè)計(jì)過(guò)程中，網(wǎng)頁(yè)尺寸（尤其是寬度）與網(wǎng)頁(yè)元素尺寸的寬度和位置盡量使用百分比而非具體數(shù)值，以適應(yīng)不同設(shè)備屏幕分辨率；通過(guò)添加不同前綴以兼容主流瀏覽器內(nèi)核。

首先是屏幕寬度和屏幕分辨率的問(wèn)題。新媒體網(wǎng)頁(yè)設(shè)計(jì)中提出了“屏幕自適應(yīng)”的概念。在Html5網(wǎng)頁(yè)的頭文件中加入設(shè)備屏幕寬度自適應(yīng)的內(nèi)容，如下：

＜meta name=‘viewport’content=‘width=device-width’＞

在新聞網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中，網(wǎng)頁(yè)寬度與網(wǎng)頁(yè)元素的寬度均使用百分比以適應(yīng)不同設(shè)備屏幕的寬度?；赾ss3.0的響應(yīng)式網(wǎng)頁(yè)布局方法和彈性盒布局方法解決了網(wǎng)頁(yè)、菜單、按鈕的自適應(yīng)布局問(wèn)題。在瀏覽器兼容方面，css3.0通過(guò)添加前綴以兼容主流瀏覽器。如-webkit-前綴用以兼容谷歌瀏覽器；-moz-前綴用以兼容火狐瀏覽器；-ms-前綴用以兼容IE瀏覽器；-o-前綴用以兼容opera瀏覽器等。在視頻和音頻格式方面，html5通過(guò)在＜video＞或＜audio＞對(duì)象中使用＜source＞＜/source＞標(biāo)簽來(lái)引用多種格式的視音頻文件以適應(yīng)蘋(píng)果、安卓等主流設(shè)備視音頻播放控件。

3 多媒體新聞資源庫(kù)的異步加載

Ajax的概念最早由Jesse James Garrett提出并將其定義為Asynchronous JavaScript and XML[6]，是一種網(wǎng)頁(yè)信息的異步交互技術(shù)。異步交互技術(shù)簡(jiǎn)化并改進(jìn)了Web應(yīng)用程序的用戶交互，提供更豐富、更具有交互性和響應(yīng)性的用戶體驗(yàn)。Ajax[7]程序架構(gòu)能夠動(dòng)態(tài)加載XML數(shù)據(jù)，生成交互程序界面接口。異步數(shù)據(jù)更新指的是通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。在不重新加載頁(yè)面的情況下更新網(wǎng)頁(yè)，在頁(yè)面加載后在客戶端向服務(wù)器請(qǐng)求數(shù)據(jù)，在頁(yè)面加載后在服務(wù)器端接收數(shù)據(jù)，在后臺(tái)向客戶端發(fā)送數(shù)據(jù)[8]。這大大減小了用戶交互時(shí)服務(wù)器端的負(fù)擔(dān)，提高了交互效率。而傳統(tǒng)網(wǎng)頁(yè)如果需要更新內(nèi)容，必須重新加載整個(gè)頁(yè)面。在寸流量寸金的手機(jī)網(wǎng)絡(luò)時(shí)代，異步數(shù)據(jù)更新技術(shù)顯然有著很大優(yōu)勢(shì)，已經(jīng)廣泛應(yīng)用于手機(jī)開(kāi)發(fā)領(lǐng)域。在該新聞系統(tǒng)的構(gòu)建過(guò)程中，可以采用Ajax技術(shù)主要用以創(chuàng)建與用戶產(chǎn)生交互的前端新聞界面程序接口。

3.1 新聞資源存儲(chǔ)XML文檔異步加載模塊

新聞資源存儲(chǔ)XML文檔異步加載模塊包括Ajax技術(shù)構(gòu)建的異步交互方法以及基于XML文檔的資源存儲(chǔ)。當(dāng)用戶訪問(wèn)新聞界面并提出請(qǐng)求時(shí)，JavaScript在不刷新頁(yè)面的前提下，通過(guò)Ajax引擎向服務(wù)器提交數(shù)據(jù)，進(jìn)而通過(guò)XML DOM文檔對(duì)象調(diào)用后臺(tái)新聞資源。整個(gè)新聞系統(tǒng)的交互過(guò)程如圖2所示。

圖2 多媒體新聞資源庫(kù)的異步加載

基于移動(dòng)端新聞系統(tǒng)的異步交互方法的移動(dòng)端新聞系統(tǒng)構(gòu)建過(guò)程中重點(diǎn)實(shí)現(xiàn)新聞界面的響應(yīng)式設(shè)計(jì)和新聞資源的動(dòng)態(tài)調(diào)用及異步更新。

3.2 基于xml文檔的新聞資源存儲(chǔ)結(jié)構(gòu)

構(gòu)建內(nèi)容豐富、信息量大的新聞系統(tǒng)需要有豐富的多媒體資源庫(kù)。如何組織、存儲(chǔ)和調(diào)用多媒體資源庫(kù)？本文采用的是xml文檔存儲(chǔ)技術(shù)。XML[9]是eXtensible Markup Language的縮寫(xiě)，可擴(kuò)展標(biāo)記語(yǔ)言，它可以用來(lái)標(biāo)記數(shù)據(jù)、定義數(shù)據(jù)類型，是一種允許用戶對(duì)自己的標(biāo)記語(yǔ)言進(jìn)行定義的源語(yǔ)言。與HTML相比，XML具有更大的靈活性。使用XML可擴(kuò)展標(biāo)記語(yǔ)言編寫(xiě)的用于存儲(chǔ)數(shù)據(jù)的文檔即XML文檔。網(wǎng)頁(yè)多媒體資源以字符串的形式將路徑存儲(chǔ)于XML文檔標(biāo)簽的url屬性下加以調(diào)用。在XML文檔中，用戶可以自己定義標(biāo)記，標(biāo)記擴(kuò)充容易、靈活性大。XML文檔容易創(chuàng)建，可讀性強(qiáng)，非常簡(jiǎn)潔。XML文檔采用樹(shù)狀組織結(jié)構(gòu)，XML樹(shù)中每一元素節(jié)點(diǎn)都可以包含其他孩子節(jié)點(diǎn)[10]。每個(gè)標(biāo)記為一個(gè)節(jié)點(diǎn)，有且只有一個(gè)根節(jié)點(diǎn)。

3.3 新聞資源存儲(chǔ)XML文檔異步加載方法

新聞資源的動(dòng)態(tài)調(diào)用過(guò)程即為：根據(jù)用戶請(qǐng)求從存儲(chǔ)新聞多媒體資源的xml異步加載新聞內(nèi)容且實(shí)現(xiàn)新聞界面的小范圍更新。存儲(chǔ)新聞多媒體資源的xml文檔內(nèi)容的異步加載過(guò)程分為以下幾個(gè)步驟實(shí)現(xiàn)，且在IE核心和非IE核心瀏覽器環(huán)境下的實(shí)現(xiàn)方法有所不同。

圖3 基于xml文檔的新聞資源存儲(chǔ)模型

創(chuàng)建XML DOM對(duì)象。使用JavaScript創(chuàng)建XML DOM對(duì)象，在IE瀏覽器環(huán)境中通過(guò)ActiveXObject對(duì)象創(chuàng)建，如:var xmlDoc=new ActiveXObject（“Microsoft.XMLDOM”）；而在非IE核心瀏覽器環(huán)境下使用implementation對(duì)象創(chuàng)建，如：var xmlDoc=document.implementation.creatDocument（“，”，null）。

加載XML文檔：創(chuàng)建好XML DOM對(duì)象后，使用load方法來(lái)加載一個(gè)已經(jīng)存在的文檔，如：xmlDoc.load（“news.xml”）;加載XML DOM對(duì)象的過(guò)程有同步加載和異步加載，本文異步交互新聞系統(tǒng)的構(gòu)建主要采取的是異步加載和傳輸方法。其加載過(guò)程在IE核心和非IE核心的瀏覽器下的具體實(shí)現(xiàn)方式有所不同。在IE下，XML DOM對(duì)象提供了readyState事件和onreadystetechange屬性來(lái)控制完成狀態(tài): xmlDoc.onreadystatechange=function（）{if（xmlDoc.readyState==4）{xmlDoc.load（‘news.xml’）}}；但是在非IE核心瀏覽器下使用onload事件，在文檔被加載完成時(shí)觸發(fā)：window.onload=function（）{xmlDoc.load（‘news.xml’）}。

加載失敗處理：當(dāng)加載一個(gè)XML文檔失敗時(shí)，在IE下會(huì)將錯(cuò)誤寫(xiě)入到XML DOM對(duì)象的parseError屬性中顯示出來(lái)：

var oError=xmlDoc.parseError；

alert（“錯(cuò)誤代碼：”+oError.errorCode+“ ”+“行數(shù)：”+oError.line+“ ”+“列數(shù)：”+oError.linepos+“ ”+“原因：”+oError.reason）；

而在非IE核心瀏覽器中是將錯(cuò)誤信息作為節(jié)點(diǎn)寫(xiě)入到XML DOM對(duì)象中顯示出來(lái):alert（parseXML（xmlDoc））。

獲取XML內(nèi)容：IE核心瀏覽器下，使用根節(jié)點(diǎn)的xml屬性輸出字符串：return doc.documentElement.xml;非IE核心瀏覽器下，則使用XMLSerializer對(duì)象的serializeToString方法輸出字符串：

var oSerializer=new XMLSerializer（）；

return oSerializer.serializeToString（doc，‘text/xml’）；

4 移動(dòng)端異步交互新聞系統(tǒng)開(kāi)發(fā)

多媒體網(wǎng)頁(yè)新聞系統(tǒng)的開(kāi)發(fā)包括新聞圖片、文本、超鏈接、流媒體等多種媒體資源的異步加載與更新，在創(chuàng)建XML DOC對(duì)象并加載完成XML文檔以后，需要根據(jù)用戶及系統(tǒng)要求分別調(diào)取相應(yīng)的圖文多媒體資源。而不同類型的媒體資源的加載和更新方式又有所不同，下面針對(duì)移動(dòng)端異步交互新聞系統(tǒng)的實(shí)際開(kāi)發(fā)過(guò)程逐個(gè)實(shí)現(xiàn)不同媒體資源的動(dòng)態(tài)調(diào)用。

4.1 圖片、文字、超鏈接等多媒體資源的動(dòng)態(tài)調(diào)用

圖片能更快的抓住用戶的注意，源于它的直觀性。在新媒體時(shí)代，新聞圖片的閱讀方式也不再是單調(diào)的被動(dòng)瀏覽，而是新聞?dòng)脩艨梢灾鲃?dòng)的選擇新聞圖片的閱讀方式。手機(jī)客戶端新聞圖片的瀏覽方式更是多種多樣，點(diǎn)觸、互動(dòng)、翻轉(zhuǎn)、縮放等，新聞圖片的靈活調(diào)取與瀏覽，大大豐富了移動(dòng)端新聞?dòng)脩舻拈喿x體驗(yàn)。文本是新聞內(nèi)容最主要的信息來(lái)源，新聞文本信息主要包括新聞標(biāo)題和正文。網(wǎng)絡(luò)新聞報(bào)道中，新聞標(biāo)題與正文經(jīng)常不在同一頁(yè)面內(nèi)，所以新聞標(biāo)題所起的作用更加強(qiáng)烈一些。網(wǎng)頁(yè)新聞界面空間的形成是由超鏈接＜a＞＜/a＞連接起來(lái)的。先來(lái)看一下以上三種重要的新聞媒體資源的動(dòng)態(tài)調(diào)用過(guò)程。

圖4 存儲(chǔ)新聞多媒體資源的xml文檔的異步加載過(guò)程（IE與非IE瀏覽器下）

4.1.1 XML文檔新聞資源存儲(chǔ)

XML文檔的一個(gè)節(jié)點(diǎn)存放一條新聞內(nèi)容，每一條新聞內(nèi)容下又包含圖像、標(biāo)題、正文、超鏈接等子節(jié)點(diǎn)。一個(gè)＜item＞代表一條新聞，＜item＞中的子元素節(jié)點(diǎn)為自定義的語(yǔ)義標(biāo)簽。存儲(chǔ)內(nèi)容的個(gè)數(shù)不限，引用時(shí)分別用索引值加以區(qū)分。XML文檔子對(duì)象的默認(rèn)索引值從0開(kāi)始，每遞增一個(gè)對(duì)象索引值增加1，如該XML文檔的子對(duì)象在被引用時(shí)分別以item[0]、item[1]、item[2]……來(lái)引用。

以下是新聞多媒體資源存儲(chǔ)的XML文檔片段：

其中圖像節(jié)點(diǎn)中存放的是圖像地址，標(biāo)題和文本節(jié)點(diǎn)中可以存放具體文字內(nèi)容，超鏈接節(jié)點(diǎn)中存放鏈接地址等。

4.1.2 瀏覽器端新聞界面的創(chuàng)建

首先直接將圖片資源寫(xiě)入網(wǎng)頁(yè)瀏覽器端,其HTML5標(biāo)簽對(duì)創(chuàng)建相應(yīng)的界面元素，如圖像對(duì)象的創(chuàng)建：＜img src="images/newsPicture3.jpg"/＞，其他界面內(nèi)容的創(chuàng)建都由相應(yīng)的HTML5標(biāo)簽對(duì)象來(lái)完成，h1-h6分別創(chuàng)建標(biāo)題元素，＜textArea＞＜/textArea＞創(chuàng)建正文，＜a＞＜/a＞創(chuàng)建超鏈接等。各種網(wǎng)頁(yè)元素的編輯與組合構(gòu)成瀏覽器新聞界面前端。

4.1.3 新聞前端與服務(wù)器端的通訊

用戶通過(guò)瀏覽器端與服務(wù)器進(jìn)行交互的過(guò)程是不斷向服務(wù)器發(fā)送請(qǐng)求，再由服務(wù)器端返回消息。當(dāng)用戶想要獲取新聞資源時(shí)，向服務(wù)器端發(fā)送相應(yīng)的XMLHttpRequest請(qǐng)求，并使用open方法來(lái)初始化一個(gè)請(qǐng)求：

其中varBody是通過(guò)請(qǐng)求發(fā)送的數(shù)據(jù)，可以是字符串、DOM樹(shù)，或者其他數(shù)據(jù)流。如果是同步請(qǐng)求，此方法將會(huì)請(qǐng)求完成或超時(shí)后才會(huì)返回，而如果是異步請(qǐng)求，則立即返回，頁(yè)面程序不會(huì)中斷。異步請(qǐng)求的方法如下：

4.1.4 新聞多媒體資源的動(dòng)態(tài)調(diào)用

用戶發(fā)送請(qǐng)求并與完成通信后，即可獲取XML文檔中的新聞多媒體資源，創(chuàng)建XML

DOC對(duì)象并使用異步加載方法獲取xml文檔對(duì)象，進(jìn)而獲取節(jié)點(diǎn)內(nèi)容。

加載完成后獲取xml文檔對(duì)象：

遍歷并獲取節(jié)點(diǎn)內(nèi)容：

獲取節(jié)點(diǎn)中的圖像資源:

獲取節(jié)點(diǎn)中的文本資源:

獲取節(jié)點(diǎn)中的超鏈接資源:

4.2 新聞流媒體資源的調(diào)用與更新

視頻和音頻豐富了新聞報(bào)道的內(nèi)容和形式。移動(dòng)網(wǎng)絡(luò)時(shí)代，流媒體想要在網(wǎng)絡(luò)上廣泛傳播需要被分割成若干小片段加以加載和播放的，也就是流媒體。流媒體的出現(xiàn)，給互聯(lián)網(wǎng)新聞報(bào)道帶來(lái)了不小的變化。新聞視頻為現(xiàn)場(chǎng)事件，需要支持實(shí)時(shí)傳送和隨機(jī)訪問(wèn)，需要進(jìn)行實(shí)時(shí)流式傳輸。流媒體在網(wǎng)絡(luò)上傳播，還需要解決網(wǎng)絡(luò)服務(wù)上的一些技術(shù)問(wèn)題。移動(dòng)對(duì)等（P2P）網(wǎng)絡(luò)流媒體成為當(dāng)前的熱點(diǎn)。一般采用自適應(yīng)多碼率流媒體傳輸技術(shù)將P2P流媒體服務(wù)由傳統(tǒng)網(wǎng)絡(luò)推向移動(dòng)網(wǎng)絡(luò)[11]。

視音頻資源的調(diào)用需要在HTML頁(yè)面中創(chuàng)建＜video＞和＜audio＞對(duì)象，再由＜video＞對(duì)象獲取XML節(jié)點(diǎn)中的視頻資源；＜audio＞對(duì)象獲取XML節(jié)點(diǎn)中的音頻資源，其獲取方法與過(guò)程與圖片、文本、超鏈接相同。

Video和audio對(duì)象作為視音頻窗口呈現(xiàn)在網(wǎng)頁(yè)瀏覽器上，具有大小和位置等外觀屬性，同時(shí)具有播放、暫停等行為，在網(wǎng)頁(yè)上創(chuàng)建video或audio元素，設(shè)計(jì)視頻播放控制界面，可以通過(guò)video或audio對(duì)象自帶的播放控件controls來(lái)控制視頻的播放，也可以通過(guò)javascript進(jìn)一步控制視頻播放細(xì)節(jié)（如播放節(jié)點(diǎn)等）。

4.3 系統(tǒng)測(cè)試

基于異步交互方法加載圖像、文本、超鏈接、視頻、音頻等多媒體元素的新聞系統(tǒng)發(fā)布于網(wǎng)頁(yè)瀏覽器的移動(dòng)端設(shè)備模擬器，如圖5所示，能夠?qū)崿F(xiàn)新聞媒體資源的異步加載與更新，能夠根據(jù)用戶需求動(dòng)態(tài)調(diào)用新聞媒體資源，且通過(guò)更新后臺(tái)存儲(chǔ)資源的XML文檔實(shí)現(xiàn)新聞內(nèi)容的更新與維護(hù)，且由HTML5+CSS3創(chuàng)建的新聞系統(tǒng)界面與移動(dòng)端主流瀏覽器如谷歌chrome、火狐firfox、IE、Safari（蘋(píng)果系統(tǒng)）、Opera等具有良好的兼容性，成功發(fā)布于PC端及移動(dòng)端設(shè)備平臺(tái)。

圖5 網(wǎng)頁(yè)瀏覽器移動(dòng)設(shè)備模擬器中的測(cè)試結(jié)果

5 結(jié)論

移動(dòng)端異步交互新聞系統(tǒng)的開(kāi)發(fā)過(guò)程主要包括基于響應(yīng)式設(shè)計(jì)原理創(chuàng)建的新聞前端界面以及基于異步加載技術(shù)構(gòu)建的新聞多媒體資源的動(dòng)態(tài)調(diào)用系統(tǒng)。該方法創(chuàng)建的新聞系統(tǒng)廣泛適用于各種移動(dòng)設(shè)備終端，且內(nèi)容豐富、形式多樣、交互體驗(yàn)良好、更新便捷等特點(diǎn)符合新媒體網(wǎng)絡(luò)新聞的報(bào)道形式。綜合運(yùn)用HTML5、CSS3、javascript、XML等多種語(yǔ)言創(chuàng)建的新聞交互系統(tǒng)實(shí)現(xiàn)了用戶與新聞系統(tǒng)的實(shí)時(shí)異步交互，且能夠發(fā)布于不同的設(shè)備與瀏覽器終端。XML資源存儲(chǔ)文檔以樹(shù)狀存儲(chǔ)結(jié)構(gòu)和節(jié)點(diǎn)存儲(chǔ)的方式儲(chǔ)備了豐富大量的新聞多媒體資源以備調(diào)用；基于Ajax異步交互技術(shù)創(chuàng)建的新聞資源加載方法能夠響應(yīng)用戶需求動(dòng)態(tài)調(diào)用新聞資源并進(jìn)行小范圍數(shù)據(jù)更新，減輕了服務(wù)器端的負(fù)擔(dān)；基于HTML5+ CSS3.0創(chuàng)建的響應(yīng)式新聞系統(tǒng)界面能夠自動(dòng)適應(yīng)各種新媒體設(shè)備及網(wǎng)頁(yè)瀏覽器?；诖朔椒ㄅc流程開(kāi)發(fā)異步交互新聞系統(tǒng)不僅內(nèi)容豐富、交互性強(qiáng)，且能夠根據(jù)用戶需求更新特定新聞內(nèi)容而不是刷新整個(gè)新聞頁(yè)面，大大提高了新聞更新的效率。運(yùn)用XML DOC對(duì)象加載和操作的新聞資源大大方便了后臺(tái)的更新與維護(hù)（只需要更新XML文檔中相關(guān)信息）。移動(dòng)端異步交互新聞系統(tǒng)的開(kāi)發(fā)不將絡(luò)新聞的報(bào)道形式拓展至以用戶為中心的網(wǎng)絡(luò)新聞互動(dòng)模式，提升了移動(dòng)端新聞?dòng)脩舻拈喿x體驗(yàn)。

[1]靖?jìng)?Ajax技術(shù)的研究與應(yīng)用[J].中國(guó)傳媒大學(xué)學(xué)報(bào)（自然科學(xué)版），2015，（6）:50-55.

[2]程國(guó)雄，胡世清.基于Silverlight互動(dòng)學(xué)習(xí)RIA平臺(tái)的研究與實(shí)現(xiàn)[J].計(jì)算機(jī)工程與科學(xué)，2010，（7）:23-26.

[3]張翔.網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)技術(shù)大全[M].北京:科學(xué)出版社，2012:27-29.

[4]劉智惠，薛晶晶，盧倩蕓.面向不同設(shè)備的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)——Web移動(dòng)圖書(shū)館[J].現(xiàn)代圖書(shū)情報(bào)技術(shù)，2014，（11）:95－101.

[5]馮春英.基于響應(yīng)式Web設(shè)計(jì)的新型圖書(shū)館門(mén)戶網(wǎng)站構(gòu)建[J].圖書(shū)館學(xué)研究，2015，（15）:34-40.

[6]陳華.Ajax從入門(mén)到精通[M].北京：清華大學(xué)出版社，2008:3-4.

[7]劉斌.基于Ajax實(shí)現(xiàn)科技信息資源可視化研究[J].煤炭技術(shù)，2012，（5）:168-169.

[8]呂國(guó)勇，史祥龍.基于嵌入式Linux和Ajax技術(shù)的Web異步交互設(shè)計(jì)[J].計(jì)算機(jī)應(yīng)用，2013，（S1）:247-251.

[9]A Technical Introduction to XML.[EB/OL].http://www.w3.org/standards/xml/core.1998-10-03.

[10]劉嘉，廖湖聲.XML函數(shù)依賴研究綜述[J].計(jì)算機(jī)工程與科學(xué)，2014，（2）:331-339.

[11]蔣文斌，余林琛，廖光賢，等.移動(dòng)對(duì)等直播流媒體系統(tǒng)的服務(wù)質(zhì)量保證機(jī)制研究[J].計(jì)算機(jī)工程與科學(xué)，2012，（10）: 11-16.

THE DEVELOPMENT OF MOBILE TERMINAL ASYNCHRONOUS INTERACTION NEWS SYSTEM BASED ON AJAX

LI Ying1TANG Ye1LI Song-lin2
（1 Anhui Polytechnic University,Wuhu Anhui,241000）
（2 Harbin Institute of Technology,Harbin Heilongjiang 150001）

The asynchronous interaction of internet news and cross-platform application on mobile terminal can be realized by constructing a multimedia news system based on the Ajax asynchronous loading and interactive technology and creating a news interface through the method of responsive interface design.The asynchronous loading method of multimedia news resource database of XML and the method of getting news resource according to users’needs are proposed.The real system is developed and tested based on this,which realized the function of dynamic calling and asynchronous data update,also resolved the problem of real-time calling of a lot of news resources.At the same time,the responsive design based on the news interface can resolve the self-adaption of screen of the device and the compatibility problems of web browsers,which make it convenient to widely spread and interact the network news on mobile terminal devices.

Ajax；Asynchronous loading；Responsive design；Network news；Mobile terminal

TP391.9

A

1672－2868（2016）06－0028－08

責(zé)任編輯：楊松水 校對(duì)：陳 侃

2016-06-28

國(guó)家自然科學(xué)基金（項(xiàng)目編號(hào)：11202140）；安徽工程大學(xué)引進(jìn)人才科研啟動(dòng)基金（項(xiàng)目編號(hào)：2015YQQ003）；安徽工程大學(xué)青年科研基金（項(xiàng)目編號(hào)：2016YQ06）

李穎（1987-），女，安徽滁州人。安徽工程大學(xué)藝術(shù)學(xué)院，講師。研究方向：Web前端產(chǎn)品的設(shè)計(jì)與開(kāi)發(fā)。