基于Ajax技术的智能家居网页控制

王 统，秦会斌，胡永才

（杭州电子科技大学，杭州 310018）

1 引言

目前，将Web网页与无线AP相结合，对室内家居设备进行实时控制是智能家居最为流行的控制方式之一。Ajax异步交互技术恰恰是实现网页快速无刷新的关键技术，它会大大缩短文件和数据传送的耗时，从而提高整个Web程序的执行效率。因此，Ajax技术是当前网页开发中最为重要的技术，也是各大电商的动态网站中最常用到的技术。

2 智能家居与Web网页的发展

“智能家居”这个名词最先是由美国提出的，它的核心思想是将室内的家居设备通过一个微型处理器进行统一的管理。这个处理器相当于PC机中的CPU，将它与主板、电源、存储器等整合到一起形成一个小型的控制系统。智能家居所要实现的是将整个家居的电器设备进行统一化和便捷化的管理与监控。随着互联网的普及和物联网的兴起，通过Internet将住户的家居设备与笔记本电脑、手机、平板电脑等手持设备进行互联，来远程对它们进行管理和监控已经是当前智能家居发展的主要方向[1]。

网页是网络页面的简称，它是构成一个网站的基本要素。最早的网站都是由静态网页组成的，其中没有像弹窗、滚动、轮播等动态效果。后来JavaScript脚本语言和Flash技术的使用，让网页中的内容和效果丰富了起来，也就成为了当前主流的动态网页[2]。网页具有跨平台的特性，在任何一个操作平台上，像Windows、Linux操作系统中只要安装了浏览器并连入了Internet，那么就可以使用开发人员设计和编写出来的网页了。虽然网页的开发依赖于浏览器的内核，像目前主流的Webkit、Gecko、Trident等，但是这些主流的内核对于JavaScript语言的解析都是相同的，只是在网页的样式设定上有一些区别。现在，Ajax技术的流行大大提高了网页的加载速度和用户体验。

考虑到不同平台的兼容性问题，选择以Web网页程序作为智能家居的用户App。 之所以如此，是因为如果用Java、Swift等语言编写出来的App必须要考虑平台兼容性问题，像手机中的Android操作系统是用Java来进行开发的，它里面的App在iOS和Symbian系统中则无法使用。而用苹果公司最近开发出的Swift语言来编写iOS和OS X操作系统上的应用程序，同样无法在Android和Symbian系统设备上使用。要想开发出一款绝大多数平台都支持的App，Web网页程序可以做到这一点。

3 Web应用模型

如图1所示，在Ajax使用之前，Web应用的模式是客户端通过浏览器遵循Http协议向远程的Web服务器发送文件请求，请求的内容可能是Html网页文件、Css样式文件或者一些图片等。当服务器接收到请求后进行解析，解析完毕后会去调用数据库中的数据或者Web服务器中的资源。当资源收集好后，Web服务器会通过Http协议返回到浏览器中。浏览器接收到数据后重新将Html文件进行加载和解析，整个页面相应地被重新加载一遍[3]。即使用户只是想要在页面中点击选中“男”或“女”这种在填写身份认证时会经常出现的单选框，也会使得整个网页被重新刷新。这将会大大地消耗时间、占用额外的带宽并且降低用户的体验性。

图1 传统的Web应用模型

Ajax技术的出现，无疑为开发类桌面Web应用程序提供了解决方案。它与传统的Web应用模型的区别在于网页与服务器之间加入了Ajax处理机制。这种机制可以用当前比较流行的Dojo或jQuery基础类库来实现，通过在Html文件中引入相关的js文件即可。当然，也可以通过原生的JavaScript来自行封装“Ajax”，通过XML Http Request这个对象下面的一系列属性、方法和事件来与Web服务器之间进行数据的交互。当Web服务器将数据返回后，再利用回调机制来执行后续的处理代码。最后通过异步的方式来动态改变页面中的内容或者样式等，进行页面的局部刷新和解析而不是重新再从头对整个页面进行加载与解析。

相对于传统的Web应用模型，基于Ajax的Web应用模型具有以下优点：

（1）通过异步的方式来改变网页中的相关内容，不会阻塞网页的加载，提高了网页加载的速度；

（2）优化了浏览器与服务器之间的传输，减少了不必要的数据往返，减少了带宽占用[4]；

（3）以页面的局部刷新代替了传统的整个页面的刷新，大大提高了用户的体验性；

（4）通用性强，因为当前主流的浏览器都支持XML Http Request对象。

4 Ajax技术

2005年，Jesse James Garrett发表了一篇在线文章，他在文章中介绍了一种技术，叫Ajax，是对Asynchronous JavaScript + XML的缩写。这一技术可以向服务器请求额外的数据而无须重新加载页面，从而带来更好的用户体验。从此，Ajax也就改变了Web诞生以来就一直沿用的“单击，等待”的交互模式[5]。

4.1 Ajax与Form表单的区别

在Ajax技术流行之前，网页中的内容要想和服务器里面的后台程序进行数据交互，大多都是采用Form表单提交的方式进行实现的。Form表单主要的作用是用于数据的交互。如果用户在网页中点击了一个按钮，这个按钮是要将客厅的一盏吊灯打开，通过Form表单的形式是可以实现这个功能的。但是当浏览器接受到服务器反馈回来的信息后，它会重新加载当前的页面。每次用户点击开灯这个按钮后，网页都会重新解析一遍，会导致闪屏现象的出现，并且会大大降低使用的效率，增加了不必要的加载与解析的时间。Form提交实际上是新建了一个页面，即使提交的URL是页面自己本身，也是需要刷新和等待的。Ajax技术是一种异步交互技术，它可以使网页进行局部的刷新而无须让整个页面进行重新的加载。避免页面重载的效果使Web应用感觉更像传统的桌面应用[6]。Web应用可以使用Ajax技术把用户的交互数据记录到服务器中，也可以开始只显示简单的页面，之后按需加载额外的数据和页面组件来提升应用的启动时间。

4.2 Ajax技术的核心

XML Http Request对象，简称XHR。它是实现Ajax的核心对象，可以实现以下功能：

（1）在不重新加载页面的情况下更新网页；（2）在页面已加载后从服务器请求数据；（3）在页面已加载后从服务器接收数据；（4）在后台向服务器发送数据。

现在高版本的主流浏览器都是支持XHR对象的。低版本的IE浏览器则要通过ActiveXObject插件来实现。XHR对象自带有丰富的属性和方法来保证异步交互的可靠性。当XHR对象把一个Http请求发送到服务器后会一直等待直到请求被处理，然后它才会接收一个响应。通过readyState属性的值可以获取响应的各种状态，如表1所示。

表1 readyState的值所对应的状态

当readyState的值为4的时候，说明浏览器已经获取到了服务器发送回来的响应内容。通过XHR的status属性来获取Http的状态码，判断响应是否成功。表2所示是一些主要的Http状态码。当status的值是200的时候，表明服务器已经处理了请求。通过XHR对象下的responseText属性获取到服务器所传回来的数据，后续通过代码来对这些数据进行处理，对页面进行局部的刷新。

4.3 Ajax工作流程

Ajax技术是通过JavaScript语言来实现的，根据实际的项目需要可以自行用JavaScript封装好适合于具体项目的Ajax。将Ajax相关的程序放到ajax.js文件下，然后在demo.html文件中用script标签引入ajax.js文件。当页面进行加载的时候，会对ajax.js中的JavaScript代码进行解析。通过Ajax进行无刷新地改变页面中的内容，大致可以简化为4个步骤。

首先，要创建XML Http Request对象（简称XHR对象），相当于“打开浏览器”。在IE7以上的版本，可以直接用var xhr = new XMLHttpRequest()的方式来创建XHR对象。但更早的低版本IE浏览器并不支持直接创建XHR对象，而是要通过插件的形式来创建，即xhr=new ActiveXObject（'Microsoft.XMLHTTP'）。然后，执行XHR对象下的open方法配置请求项，相当于“在地址栏中输入地址”。向服务器请求有两种方式：post和get，通常情况下选择的是post方式，例如xhr.open（‘post’, url, true）；其中第二个参数是向服务请求的资源路径，true表示以非阻塞的方式进行。当open执行完毕后，第三步就是要提交，执行xhr.send(data)，里面的data参数是我们要传入的关键字。最后，通过XHR对象下面的onreadystatechange事件来等待服务器返回的结果。当readyState的值为4并且status的值为200的时候，说明请求的资源获取成功，执行回调函数fnSucc来对获取到的资源进行后续的处理。当readyState或status这两个条件有一个不满足时，说明请求的资源失败，执行回调函数fnFail来查看失败的原因，以便不影响后面的代码执行。

表2 主要的Http状态码

5 智能家居网页控制的实现

如图3所示，整个框架由客户端、Web服务器和无线Wifi组网3部分构成。用户使用平板电脑、笔记本电脑或者手机中的浏览器，通过Internet网络打开编写好的Web网页程序，Web服务器通过Wifi无线组网技术与住户家中的家用设备进行数据的通信和交互。住户在网页中的操作会通过Ajax技术与Web服务器进行通信，然后Web服务器解析来自浏览器的请求并调用相关的后台程序，后台程序在通过无线网络向下位机（如热水器、空调、灯具等）发送相关的指令并接受下位机所返回上来的数据。最后进行整合将数据返送回Ajax中的回调函数，由回调函数进行相关的处理，最后将处理完的结果在网页中呈现给住户。

图3 智能家居网页控制框架

在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中调用ajax.js中封装好的Ajax方法并且定义了回调函数fnSucc，如图5所示。

图4 对Ajax进行封装

6 结束语

课题以控制室内家居设备为目的，采用Web网页App的方式来实现。研究和对比了传统的Web应用模式和基于Ajax的Web应用模式的优劣，选择后者作为核心技术来完成智能家居控制的Web应用程序，实现了对室内家用设备的控制。虽然Ajax本身也存在一些缺点，但是它的应用前景是光明的，并且还可以对它的实现功能进行“深挖掘”。随着Web应用程序的不断发展和互联网的普及，相信Ajax这门技术必将会得到更深层次和更广泛的开发和应用。

图5 回调函数FnSucc

[1] 郑迪文，沈立炜，彭鑫，等. 基于AJAX的Web应用构件组装技术及工具[J]. 计算机科学，2014，(41):151-156.

[2] 钟少君. 面向Ajax的搜索引擎技术研究[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的富客户端技术及应用[J]. 计算机科学，2010，(38): 419-420.

[5] Nicholas C Zakas. JavaScript高级程序设计[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] 吕林涛，万经华，周红芳. 基于AJAX的Web无刷新页面快速更新数据方法[J].计算机应用研究，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的定址网络爬虫系统的研究与实现[D]. 北京：北京邮电大学，2013.