基于Ajax技術(shù)的智能家居網(wǎng)頁控制

王 統(tǒng)，秦會斌，胡永才

（杭州電子科技大學，杭州 310018）

1 引言

目前，將Web網(wǎng)頁與無線AP相結(jié)合，對室內(nèi)家居設(shè)備進行實時控制是智能家居最為流行的控制方式之一。Ajax異步交互技術(shù)恰恰是實現(xiàn)網(wǎng)頁快速無刷新的關(guān)鍵技術(shù)，它會大大縮短文件和數(shù)據(jù)傳送的耗時，從而提高整個Web程序的執(zhí)行效率。因此，Ajax技術(shù)是當前網(wǎng)頁開發(fā)中最為重要的技術(shù)，也是各大電商的動態(tài)網(wǎng)站中最常用到的技術(shù)。

2 智能家居與Web網(wǎng)頁的發(fā)展

“智能家居”這個名詞最先是由美國提出的，它的核心思想是將室內(nèi)的家居設(shè)備通過一個微型處理器進行統(tǒng)一的管理。這個處理器相當于PC機中的CPU，將它與主板、電源、存儲器等整合到一起形成一個小型的控制系統(tǒng)。智能家居所要實現(xiàn)的是將整個家居的電器設(shè)備進行統(tǒng)一化和便捷化的管理與監(jiān)控。隨著互聯(lián)網(wǎng)的普及和物聯(lián)網(wǎng)的興起，通過Internet將住戶的家居設(shè)備與筆記本電腦、手機、平板電腦等手持設(shè)備進行互聯(lián)，來遠程對它們進行管理和監(jiān)控已經(jīng)是當前智能家居發(fā)展的主要方向[1]。

網(wǎng)頁是網(wǎng)絡(luò)頁面的簡稱，它是構(gòu)成一個網(wǎng)站的基本要素。最早的網(wǎng)站都是由靜態(tài)網(wǎng)頁組成的，其中沒有像彈窗、滾動、輪播等動態(tài)效果。后來JavaScript腳本語言和Flash技術(shù)的使用，讓網(wǎng)頁中的內(nèi)容和效果豐富了起來，也就成為了當前主流的動態(tài)網(wǎng)頁[2]。網(wǎng)頁具有跨平臺的特性，在任何一個操作平臺上，像Windows、Linux操作系統(tǒng)中只要安裝了瀏覽器并連入了Internet，那么就可以使用開發(fā)人員設(shè)計和編寫出來的網(wǎng)頁了。雖然網(wǎng)頁的開發(fā)依賴于瀏覽器的內(nèi)核，像目前主流的Webkit、Gecko、Trident等，但是這些主流的內(nèi)核對于JavaScript語言的解析都是相同的，只是在網(wǎng)頁的樣式設(shè)定上有一些區(qū)別。現(xiàn)在，Ajax技術(shù)的流行大大提高了網(wǎng)頁的加載速度和用戶體驗。

考慮到不同平臺的兼容性問題，選擇以Web網(wǎng)頁程序作為智能家居的用戶App。 之所以如此，是因為如果用Java、Swift等語言編寫出來的App必須要考慮平臺兼容性問題，像手機中的Android操作系統(tǒng)是用Java來進行開發(fā)的，它里面的App在iOS和Symbian系統(tǒng)中則無法使用。而用蘋果公司最近開發(fā)出的Swift語言來編寫iOS和OS X操作系統(tǒng)上的應(yīng)用程序，同樣無法在Android和Symbian系統(tǒng)設(shè)備上使用。要想開發(fā)出一款絕大多數(shù)平臺都支持的App，Web網(wǎng)頁程序可以做到這一點。

3 Web應(yīng)用模型

如圖1所示，在Ajax使用之前，Web應(yīng)用的模式是客戶端通過瀏覽器遵循Http協(xié)議向遠程的Web服務(wù)器發(fā)送文件請求，請求的內(nèi)容可能是Html網(wǎng)頁文件、Css樣式文件或者一些圖片等。當服務(wù)器接收到請求后進行解析，解析完畢后會去調(diào)用數(shù)據(jù)庫中的數(shù)據(jù)或者Web服務(wù)器中的資源。當資源收集好后，Web服務(wù)器會通過Http協(xié)議返回到瀏覽器中。瀏覽器接收到數(shù)據(jù)后重新將Html文件進行加載和解析，整個頁面相應(yīng)地被重新加載一遍[3]。即使用戶只是想要在頁面中點擊選中“男”或“女”這種在填寫身份認證時會經(jīng)常出現(xiàn)的單選框，也會使得整個網(wǎng)頁被重新刷新。這將會大大地消耗時間、占用額外的帶寬并且降低用戶的體驗性。

圖1 傳統(tǒng)的Web應(yīng)用模型

Ajax技術(shù)的出現(xiàn)，無疑為開發(fā)類桌面Web應(yīng)用程序提供了解決方案。它與傳統(tǒng)的Web應(yīng)用模型的區(qū)別在于網(wǎng)頁與服務(wù)器之間加入了Ajax處理機制。這種機制可以用當前比較流行的Dojo或jQuery基礎(chǔ)類庫來實現(xiàn)，通過在Html文件中引入相關(guān)的js文件即可。當然，也可以通過原生的JavaScript來自行封裝“Ajax”，通過XML Http Request這個對象下面的一系列屬性、方法和事件來與Web服務(wù)器之間進行數(shù)據(jù)的交互。當Web服務(wù)器將數(shù)據(jù)返回后，再利用回調(diào)機制來執(zhí)行后續(xù)的處理代碼。最后通過異步的方式來動態(tài)改變頁面中的內(nèi)容或者樣式等，進行頁面的局部刷新和解析而不是重新再從頭對整個頁面進行加載與解析。

相對于傳統(tǒng)的Web應(yīng)用模型，基于Ajax的Web應(yīng)用模型具有以下優(yōu)點：

（1）通過異步的方式來改變網(wǎng)頁中的相關(guān)內(nèi)容，不會阻塞網(wǎng)頁的加載，提高了網(wǎng)頁加載的速度；

（2）優(yōu)化了瀏覽器與服務(wù)器之間的傳輸，減少了不必要的數(shù)據(jù)往返，減少了帶寬占用[4]；

（3）以頁面的局部刷新代替了傳統(tǒng)的整個頁面的刷新，大大提高了用戶的體驗性；

（4）通用性強，因為當前主流的瀏覽器都支持XML Http Request對象。

4 Ajax技術(shù)

2005年，Jesse James Garrett發(fā)表了一篇在線文章，他在文章中介紹了一種技術(shù)，叫Ajax，是對Asynchronous JavaScript + XML的縮寫。這一技術(shù)可以向服務(wù)器請求額外的數(shù)據(jù)而無須重新加載頁面，從而帶來更好的用戶體驗。從此，Ajax也就改變了Web誕生以來就一直沿用的“單擊，等待”的交互模式[5]。

4.1 Ajax與Form表單的區(qū)別

在Ajax技術(shù)流行之前，網(wǎng)頁中的內(nèi)容要想和服務(wù)器里面的后臺程序進行數(shù)據(jù)交互，大多都是采用Form表單提交的方式進行實現(xiàn)的。Form表單主要的作用是用于數(shù)據(jù)的交互。如果用戶在網(wǎng)頁中點擊了一個按鈕，這個按鈕是要將客廳的一盞吊燈打開，通過Form表單的形式是可以實現(xiàn)這個功能的。但是當瀏覽器接受到服務(wù)器反饋回來的信息后，它會重新加載當前的頁面。每次用戶點擊開燈這個按鈕后，網(wǎng)頁都會重新解析一遍，會導致閃屏現(xiàn)象的出現(xiàn)，并且會大大降低使用的效率，增加了不必要的加載與解析的時間。Form提交實際上是新建了一個頁面，即使提交的URL是頁面自己本身，也是需要刷新和等待的。Ajax技術(shù)是一種異步交互技術(shù)，它可以使網(wǎng)頁進行局部的刷新而無須讓整個頁面進行重新的加載。避免頁面重載的效果使Web應(yīng)用感覺更像傳統(tǒng)的桌面應(yīng)用[6]。Web應(yīng)用可以使用Ajax技術(shù)把用戶的交互數(shù)據(jù)記錄到服務(wù)器中，也可以開始只顯示簡單的頁面，之后按需加載額外的數(shù)據(jù)和頁面組件來提升應(yīng)用的啟動時間。

4.2 Ajax技術(shù)的核心

XML Http Request對象，簡稱XHR。它是實現(xiàn)Ajax的核心對象，可以實現(xiàn)以下功能：

（1）在不重新加載頁面的情況下更新網(wǎng)頁；（2）在頁面已加載后從服務(wù)器請求數(shù)據(jù)；（3）在頁面已加載后從服務(wù)器接收數(shù)據(jù)；（4）在后臺向服務(wù)器發(fā)送數(shù)據(jù)。

現(xiàn)在高版本的主流瀏覽器都是支持XHR對象的。低版本的IE瀏覽器則要通過ActiveXObject插件來實現(xiàn)。XHR對象自帶有豐富的屬性和方法來保證異步交互的可靠性。當XHR對象把一個Http請求發(fā)送到服務(wù)器后會一直等待直到請求被處理，然后它才會接收一個響應(yīng)。通過readyState屬性的值可以獲取響應(yīng)的各種狀態(tài)，如表1所示。

表1 readyState的值所對應(yīng)的狀態(tài)

當readyState的值為4的時候，說明瀏覽器已經(jīng)獲取到了服務(wù)器發(fā)送回來的響應(yīng)內(nèi)容。通過XHR的status屬性來獲取Http的狀態(tài)碼，判斷響應(yīng)是否成功。表2所示是一些主要的Http狀態(tài)碼。當status的值是200的時候，表明服務(wù)器已經(jīng)處理了請求。通過XHR對象下的responseText屬性獲取到服務(wù)器所傳回來的數(shù)據(jù)，后續(xù)通過代碼來對這些數(shù)據(jù)進行處理，對頁面進行局部的刷新。

4.3 Ajax工作流程

Ajax技術(shù)是通過JavaScript語言來實現(xiàn)的，根據(jù)實際的項目需要可以自行用JavaScript封裝好適合于具體項目的Ajax。將Ajax相關(guān)的程序放到ajax.js文件下，然后在demo.html文件中用script標簽引入ajax.js文件。當頁面進行加載的時候，會對ajax.js中的JavaScript代碼進行解析。通過Ajax進行無刷新地改變頁面中的內(nèi)容，大致可以簡化為4個步驟。

首先，要創(chuàng)建XML Http Request對象（簡稱XHR對象），相當于“打開瀏覽器”。在IE7以上的版本，可以直接用var xhr = new XMLHttpRequest()的方式來創(chuàng)建XHR對象。但更早的低版本IE瀏覽器并不支持直接創(chuàng)建XHR對象，而是要通過插件的形式來創(chuàng)建，即xhr=new ActiveXObject（'Microsoft.XMLHTTP'）。然后，執(zhí)行XHR對象下的open方法配置請求項，相當于“在地址欄中輸入地址”。向服務(wù)器請求有兩種方式：post和get，通常情況下選擇的是post方式，例如xhr.open（‘post’, url, true）；其中第二個參數(shù)是向服務(wù)請求的資源路徑，true表示以非阻塞的方式進行。當open執(zhí)行完畢后，第三步就是要提交，執(zhí)行xhr.send(data)，里面的data參數(shù)是我們要傳入的關(guān)鍵字。最后，通過XHR對象下面的onreadystatechange事件來等待服務(wù)器返回的結(jié)果。當readyState的值為4并且status的值為200的時候，說明請求的資源獲取成功，執(zhí)行回調(diào)函數(shù)fnSucc來對獲取到的資源進行后續(xù)的處理。當readyState或status這兩個條件有一個不滿足時，說明請求的資源失敗，執(zhí)行回調(diào)函數(shù)fnFail來查看失敗的原因，以便不影響后面的代碼執(zhí)行。

表2 主要的Http狀態(tài)碼

5 智能家居網(wǎng)頁控制的實現(xiàn)

如圖3所示，整個框架由客戶端、Web服務(wù)器和無線Wifi組網(wǎng)3部分構(gòu)成。用戶使用平板電腦、筆記本電腦或者手機中的瀏覽器，通過Internet網(wǎng)絡(luò)打開編寫好的Web網(wǎng)頁程序，Web服務(wù)器通過Wifi無線組網(wǎng)技術(shù)與住戶家中的家用設(shè)備進行數(shù)據(jù)的通信和交互。住戶在網(wǎng)頁中的操作會通過Ajax技術(shù)與Web服務(wù)器進行通信，然后Web服務(wù)器解析來自瀏覽器的請求并調(diào)用相關(guān)的后臺程序，后臺程序在通過無線網(wǎng)絡(luò)向下位機（如熱水器、空調(diào)、燈具等）發(fā)送相關(guān)的指令并接受下位機所返回上來的數(shù)據(jù)。最后進行整合將數(shù)據(jù)返送回Ajax中的回調(diào)函數(shù)，由回調(diào)函數(shù)進行相關(guān)的處理，最后將處理完的結(jié)果在網(wǎng)頁中呈現(xiàn)給住戶。

圖3 智能家居網(wǎng)頁控制框架

在demo.html文件中引入ajax.js處理文件，具體操作如下：

〈link rel='stylesheet' type='text/css' href='demo.css' /〉

〈script type='text/javascript' src='base.js'〉〈/script〉

〈script type='text/javascript' src='demo.js'〉〈/script〉

〈script type='text/javascript' src='ajax.js'〉〈/script〉

在ajax.js文件中對Ajax進行封裝，其主要的核心代碼如圖4所示。在主文件domo.js中調(diào)用ajax.js中封裝好的Ajax方法并且定義了回調(diào)函數(shù)fnSucc，如圖5所示。

圖4 對Ajax進行封裝

6 結(jié)束語

課題以控制室內(nèi)家居設(shè)備為目的，采用Web網(wǎng)頁App的方式來實現(xiàn)。研究和對比了傳統(tǒng)的Web應(yīng)用模式和基于Ajax的Web應(yīng)用模式的優(yōu)劣，選擇后者作為核心技術(shù)來完成智能家居控制的Web應(yīng)用程序，實現(xiàn)了對室內(nèi)家用設(shè)備的控制。雖然Ajax本身也存在一些缺點，但是它的應(yīng)用前景是光明的，并且還可以對它的實現(xiàn)功能進行“深挖掘”。隨著Web應(yīng)用程序的不斷發(fā)展和互聯(lián)網(wǎng)的普及，相信Ajax這門技術(shù)必將會得到更深層次和更廣泛的開發(fā)和應(yīng)用。

圖5 回調(diào)函數(shù)FnSucc

[1] 鄭迪文，沈立煒，彭鑫，等. 基于AJAX的Web應(yīng)用構(gòu)件組裝技術(shù)及工具[J]. 計算機科學，2014，(41):151-156.

[2] 鐘少君. 面向Ajax的搜索引擎技術(shù)研究[D]. 杭州：浙江大學，2012.

[3] Wang H, Yang J. Research and application of web development based on ASP.NET 2.0+Ajax[J]. Industrial Electronics and Applications, IEEE, 2008, 3: 857-860.

[4] 陳必峰. 基于AJAX的富客戶端技術(shù)及應(yīng)用[J]. 計算機科學，2010，(38): 419-420.

[5] Nicholas C Zakas. JavaScript高級程序設(shè)計[M]. 北京：人民郵電出版社，2012. 66-67.

[6] Wang Tao. Development direction of smart home system[C].Industrial Mechatronics and Automation, 2010: 265-287.

[7] Han Weiguo, Zhao Peisheng. Using Ajax for desktop-like geospatial web application development[J]. Geoinformatics,IEEE, 2009, 17: 857-860.

[8] 呂林濤，萬經(jīng)華，周紅芳. 基于AJAX的Web無刷新頁面快速更新數(shù)據(jù)方法[J].計算機應(yīng)用研究，2006，(11):199-200.

[9] Mark O'Neill. Mapping Ajax's weaknesses[J]. Info security,2007, 9: 38-403.

[10] Hanakawa N, Ikemiya N. Web Intelligence[C]. IEEE/WIC/ACM International Conference on 2006. 808-814.

[11] 劉凡凡.支持AJAX的定址網(wǎng)絡(luò)爬蟲系統(tǒng)的研究與實現(xiàn)[D]. 北京：北京郵電大學，2013.