李 穎唐 冶李松林

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

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

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

李 穎1唐 冶1李松林2

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

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

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

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

1 引言

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

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

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

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

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

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

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

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

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

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

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

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

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

3 多媒體新聞資源庫的異步加載

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

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

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

圖2 多媒體新聞資源庫的異步加載

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

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

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

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

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

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

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

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

加載失敗處理：當(dāng)加載一個XML文檔失敗時，在IE下會將錯誤寫入到XML DOM對象的parseError屬性中顯示出來：

var oError=xmlDoc.parseError；

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

而在非IE核心瀏覽器中是將錯誤信息作為節(jié)點寫入到XML DOM對象中顯示出來:alert（parseXML（xmlDoc））。

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

var oSerializer=new XMLSerializer（）；

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

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

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

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

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

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

4.1.1 XML文檔新聞資源存儲

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

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

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

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

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

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

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

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

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

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

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

加載完成后獲取xml文檔對象：

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

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

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

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

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

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

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

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

4.3 系統(tǒng)測試

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

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

5 結(jié)論

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

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

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

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

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

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

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

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

[8]呂國勇，史祥龍.基于嵌入式Linux和Ajax技術(shù)的Web異步交互設(shè)計[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].計算機工程與科學(xué)，2014，（2）:331-339.

[11]蔣文斌，余林琛，廖光賢，等.移動對等直播流媒體系統(tǒng)的服務(wù)質(zhì)量保證機制研究[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é)任編輯：楊松水 校對：陳 侃

2016-06-28

國家自然科學(xué)基金（項目編號：11202140）；安徽工程大學(xué)引進人才科研啟動基金（項目編號：2015YQQ003）；安徽工程大學(xué)青年科研基金（項目編號：2016YQ06）

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