基于Ajax的移動端異步交互新聞系統開發

李 穎唐 冶李松林

（1 安徽工程大學，安徽 蕪湖 241000）

（2 哈爾濱工業大學，黑龍江 哈爾濱 150001）

基于Ajax的移動端異步交互新聞系統開發

李 穎1唐 冶1李松林2

（1 安徽工程大學，安徽 蕪湖 241000）

（2 哈爾濱工業大學，黑龍江 哈爾濱 150001）

基于Ajax異步加載與交互技術構建的多媒體新聞系統以及響應式界面設計方法創建的新聞界面以實現網絡新聞的異步交互以及移動端跨平臺應用。提出了多媒體新聞資源庫XML的異步加載方法，以及響應用戶需求動態調取新聞多媒體資源的方法，并在此基礎之上進行了實例開發與測試，實現了新聞數據的動態調用與異步更新，解決了實時調用大量新聞資源的難題。同時，基于新聞系統界面的響應式設計解決了設備屏幕自適應和瀏覽器兼容性問題,大大方便了網絡新聞在移動端設備上廣泛傳播與互動。

Ajax；異步加載；響應式設計；網絡新聞；移動端

1 引言

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

與傳統的Web應用不同，Ajax技術的核心在于異步通信，不必整體刷新頁面，從而減少了數據傳輸量，提高了Web應用的響應速度，給用戶帶來了良好的體驗[1]。基于Ajax技術中的異步交互技術構建的網頁新聞系統以異步方式與服務器交換數據，克服了傳統的Web應用程序存在的界面整體頻繁刷新給服務器端帶來的負擔以及狀態維持困難的問題[2]。能夠及時響應用戶需求動態調取新聞媒體資源，加載到新聞界面上并實現小范圍的數據更新，從而實現新聞信息內容的異步交互。同時結合響應式界面設計的新聞前端能夠順利運行于不同設備終端及移動設備平臺之上，實現了網絡新聞系統的跨平臺應用。

2 多媒體新聞系統的跨平臺應用

網絡新聞廣泛應用于PC端及移動端設備需要解決設備與瀏覽器的兼容性問題。在實現跨平臺應用的前提下，還需要將新聞界面以更協調自然的方式呈現于各種設備屏幕和瀏覽器端，涉及到新聞界面的響應式設計。

2.1 跨平臺應用技術

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

圖1 HTML5+css3.0創建的趣味交互新聞空間

2.2 響應式界面設計

響應式頁面設計[4]應用于網絡新聞界面的創建能夠解決交互和設備瀏覽器的兼容性等問題。Marcotte早在2010年提出了響應式網頁設計的概念[5]。響應式網頁設計要求網頁的布局和內容能夠根據設備與用戶使用行為的變化而變化，響應式網頁設計解決了網頁新聞系統在不同設備平臺和網頁瀏覽器中的兼容性問題。

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

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

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

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

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

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

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

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

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

基于移動端新聞系統的異步交互方法的移動端新聞系統構建過程中重點實現新聞界面的響應式設計和新聞資源的動態調用及異步更新。

3.2 基于xml文檔的新聞資源存儲結構

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

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

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

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

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

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

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

var oError=xmlDoc.parseError；

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

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

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

var oSerializer=new XMLSerializer（）；

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

4 移動端異步交互新聞系統開發

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

4.1 圖片、文字、超鏈接等多媒體資源的動態調用

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

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

4.1.1 XML文檔新聞資源存儲

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

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

其中圖像節點中存放的是圖像地址，標題和文本節點中可以存放具體文字內容，超鏈接節點中存放鏈接地址等。

4.1.2 瀏覽器端新聞界面的創建

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

4.1.3 新聞前端與服務器端的通訊

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

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

4.1.4 新聞多媒體資源的動態調用

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

DOC對象并使用異步加載方法獲取xml文檔對象，進而獲取節點內容。

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

遍歷并獲取節點內容：

獲取節點中的圖像資源:

獲取節點中的文本資源:

獲取節點中的超鏈接資源:

4.2 新聞流媒體資源的調用與更新

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

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

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

4.3 系統測試

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

圖5 網頁瀏覽器移動設備模擬器中的測試結果

5 結論

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

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

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

[3]張翔.網頁制作與網站建設技術大全[M].北京:科學出版社，2012:27-29.

[4]劉智惠，薛晶晶，盧倩蕓.面向不同設備的響應式網頁設計——Web移動圖書館[J].現代圖書情報技術，2014，（11）:95－101.

[5]馮春英.基于響應式Web設計的新型圖書館門戶網站構建[J].圖書館學研究，2015，（15）:34-40.

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

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

[8]呂國勇，史祥龍.基于嵌入式Linux和Ajax技術的Web異步交互設計[J].計算機應用，2013，（S1）:247-251.

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

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

[11]蔣文斌，余林琛，廖光賢，等.移動對等直播流媒體系統的服務質量保證機制研究[J].計算機工程與科學，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

責任編輯：楊松水 校對：陳 侃

2016-06-28

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

李穎（1987-），女，安徽滁州人。安徽工程大學藝術學院，講師。研究方向：Web前端產品的設計與開發。