论文部分内容阅读
摘要： Ajax技术是目前深受Web用户欢迎的一项技术，它实现了客户端与服务器的异步交互，达到很好的用户体验效果。为频繁读数据的Web页面提供了一个良好的解决方案。本文介绍的在线聊天系统运用了JQuery中的Ajax技术，利用异步交换数据的方式来发送和接收聊天内容，在不重复刷新页面的情况下与服务器进行异步通信。文中介绍了Ajax工作原理和方式，具体分析了Ajax在基于Web的在线聊天系统中的应用，体现出Ajax在Web程序里的优越性。
关键词：JQuery；Ajax技术；Asp.Net；在线聊天；异步通信
中图分类号：TP311文献标识码：A文章编号：1009-3044(2011)01-0142-04
The Applicaton of Ajax in Web Chatting System
CHEN Ying1, TANG Qi-tao2, PENG Li-hong3
(1.Computer Science and Technology of Changsha Medical University, Changsha 410219, China; 2.Computer Application Technology of University of South China, Changsha 410219, China; 3.Computer Science and Technology of Hunan University, Changsha 410219, China)
Abstract: Ajax is a technology which is currently great popular with Web users. It achieved the asynchronous communication between users and servers reaching a better experience for users. And provide a great solution for the frequent communication and data reading on Web pages, as well. The chatting system we introduced here applied the Ajax technology of JQuery. It sending and receiving the content of chat by transferring data asynchronously achieving the asynchronous communication with servers under the condition of not refreshing the new web repeated. Here we introduced the working principle and methods of Ajax. Specifically analysis the appliance of Ajax based on the web in chat system embodying the superiority of Ajax in web procedure.
Key words: JQuery; Ajax technology; Asp.Net; online chatting; asynchronous communication
随着科学的发展，Web服务在因特网中扮演着越来越重要的角色。越来越多的人通过Web享受信息化时代带来的各种服务。众所周知，访问量越大网络的负担就越重。但是又不能降低访问量，所以要尽量减少每次访问页面时的信息量。例如在一个Web页面里有很多内容都是重复的（页头，页尾等），如果整个页面重新加载一次，势必会造成网络资源的浪费并加大了服务器的负担。为了很好地解决以上问题，2005年Jesse James Garrett提出了Ajax（Asynchronous JavaScript and XML的缩写）这个概念。Ajax其实不是一种新的语言或技术，只是把几种技术按一定的方式组合，它们之间相互配合共同协作发挥各自的作用。本文介绍的在线聊天系统中页面只有聊天内容是变化的。所以只需把聊天的内容利用Ajax技术与服务器进行交互，这样既达到了聊天的要求同时也降低了通信的数据量，减轻了服务器的负担。
1 Ajax工作原理
Ajax(Asynchronous JavaScript and XML)技术实际上是在客户端和服务器之间加入一个中间服务层，称为Ajax引擎。用来处理客户端请求，使用户与服务器的操作异步化。使用
此技术用户不必暂停页面操作来等待服务器的响应，而可以继续进行客户端的其它工作。这里提交给服务器的信息并不是客户端的所有请求，信息验证等一些操作都由Ajax自行处理，只有需要到服务器上取数据时才会根据请求信息，需要什么就取什么，减少数据的冗余和浪费，降低下载量。等到服务器响应完毕，将结果提交给Ajax引擎，Ajax引擎使用HTML和CSS等技术展示给用户。客户端和服务器的这种异步通信，使用户感觉不到客户端与服务器的通信过程， Web程序看起来就像是即时响应的。图1显示了Ajax的工作原理。
在传统的Web应用中，客户端只是通过浏览器简单的显示内容，所有的信息都保存在服务器上。引入Ajax后，它把一部分Web应用程序移到了浏览器中，使浏览器中不再是纯粹的内容。用户浏览页面时，浏览器会从服务器下载有特殊功能的代码，这些代码具有一定的处理用户请求的能力，由它们来决定是否将用户的请求提交给服务器。由于用户的一部分请求可以直接在客户端进行处理，客户端与服务器的通信效率会提高很多。
2 Ajax技术
Ajax技术包含了JavaScript、DOM、XML和XMLHttpRequest，这些技术按照某种方式组合发挥着各自的作用。Javascript实现对用户行为的实时响应和处理，DOM实现动态的显示和交互，XML进行数据交换和处理，XMLHttpRequest进行异步数据读取[1]。
1）JavaScript
JavaScript是因特网上最流行的脚本语言，被用来改进设计、验证表单、检测浏览器、创建cookies，等等。它安全高效，通过嵌入在标准的HTML语言中实现各种与用户的交互任务。
2）DOM
DOM（Document Object Model的缩写）是一个能够让程序和脚本动态访问文档内容、结构和样式的语言平台。它是一个树型结构，由元素和节点组成，它是以面向对象的方式描述的对象模型。DOM对象分为HTML DOM对象和XML DOM对象。
3）XML
XML（eXtensible Markup Language的缩写）是可扩展标记语言的缩写。通常作为数据传输的媒介。在Ajax技术中，XMLHttpRequest对象可以使用XML作为与服务器端通信的数据格式。
4）XMLHttpRequest
XMLHttpRequest是Ajax技术体系中最为核心的技术，是Ajax引擎解决无需刷新整个页面即可从服务器获取所需数据问题的关键。它负责将用户信息以异步方式发送到服务器。Web应用程序无需刷新页面就可以向服务器提交信息，或从服务器得到应答。这样用户就不会觉察后台向服务器提交和接收数据。而且客户端也不必每次都将数据处理工作交给服务器来做，这样加快了响应速度，也就缩短了用户的等待时间。
继prototype之后, 2005年美国人JohnResig创建了JQuery。它兼容各种浏览器（IE6.0+，FF1.5+，Safari2.0+,Opera9.0+）。在JQuery中的Ajax是通过HTTP请求加载远程数据。在JQuery里使用$.ajax()来实现Ajax交互。$.ajax()返回其创建的XMLHttpRequest对象。大多数情况下无需直接操作该对象，但在特殊情况下可用于手动终止请求。
3 Ajax在在线聊天系统中的应用
在线聊天系统实质就是双方能够发送和接收消息，并且是即时通信。如果利用传统的B/S模式，则每次要接收或发送聊天信息时都必须重新刷新页面来与服务器同步数据。这样既浪费了资源增加了下载量，又加长了用户的等待时间，而且还增加了服务器的负担。从而使通信效率大大的降低。如果利用Ajax技术，就会克服以上诸多的不足之处。使用户感觉不到客户端与服务器之间的通信过程。下面将着重介绍Ajax在在线聊天系统中的应用。
首先在Visual Studio 2008（C#）中建立一个Ajax_Client.htm的页面，在Ajax_Client.htm页面上放置一个text控件作为输入框，一个div标签用来显示聊天信息和一个button控件用来发送消息。
3.1 接收聊天信息
因为聊天信息的交互是动态进行的，所以客户端每隔一段时间就要利用Ajax读取消息（称为局部刷新或异步刷新），以保证及时收到聊天信息。本系统用JavaScript脚本语言中的setInterval()函数周期性的执行读取服务器信息的函数。一旦发现服务器上有数据则立即利用Ajax引擎读取该信息并显示在Ajax_Client.htm页面的div标签里，这就是客户端收信息的过程。下面用部分代码来说明。
设置div的id为AjaxDiv_Show。编写读取信息函数RequestMessage()。利用此函数来读取服务器中的聊天信息。核心代码示例：
执行上述代码就可以从服务器上读取信息到客户端的页面上而不需要整体刷新页面。用户也不必等待服务器的响应而可以继续操作。这样就防止了刷新页面带来的闪烁，不需要用户等待，从而提高了系统的处理效率。
3.2 发送聊天信息
发送聊天信息与接收信息有点不同，发送信息时不需要定期执行发送函数，只有在点击了button后才会调用发送函数，发送函数的功能利用Ajax引擎把text中的信息发送至服务器。在Ajax_Client.htm页面上有一个按钮控件和一个text文本编辑框。发送聊天信息的函数为SendMessageClick()，核心代码示例：
在发送消息的代码编写完成之后，则客户端的基本功能就能实现了。
3.3 服务器的功能实现
发送和接收消息的请求地址都是Ajax.aspx，所以在服务器上负责与客户端通信的就是Ajax.aspx页面。下面介绍服务器代码的编写。首先在Visual Studio 2008(C#)里面新建一个名为Ajax.aspx的页面。系统会自动生成一个Ajax.aspx.cs的代码文件。Ajax.aspx.cs的代码功能就是要处理客户端最基本的两种请求，就是读取消息和发送消息。当有消息发送到服务器时，则服务器应该把消息先存起来，等到有取消息请求时就把消息再转发出去。代码示例如下：
public partial class Ajax : System.Web.UI.Page
{protected void Page_Load(object sender, EventArgs e)
{if (!IsPostBack)
{string strQuery;
strQuery= Request.QueryString["Type"].ToString();
switch(strQuery)
{case "SendMessage": //发送消息请求
Application.lock();
Application["Messages"]=
Request.QueryString["Messages"].ToString();
//把接到的消息存放到Application里面
Application.unlock();
Response.Write("OK"); //响应客户端
break;
case "RequestMessage"://读取消息请求
string Message= Application["Messages"].ToString();
if(String.IsNullOrEmpty(Message))
{Response.Write(Application["Messages"].ToString());//如果有消息则发送至客户端
Application.lock();
Application["Messages"]=""; //清空存储的信息
Application.unlock();}
break;}}}}
在编写了客户端与服务器端的代码之后，就可以运行此代码进行在线聊天了。在本机客户端输入框中输入内容后点击发送按钮。则另外一个客户端页面将会看到本机上发送的信息而不需要刷新页面。同样对方发送信息在本机上的窗体上也会显示相应的信息。在运行期间，无论是发送消息还是接收消息都是采用Ajax异步通信方式。使用户感觉非常的方便，摆脱了重复刷新带来的页面的闪烁，而且大大地节省了用户等待的时间。
4 结束语
Ajax的异步工作方式为我们带来了一种全新的程序开发模式，它既不同于传统的WEB开发，也有别于桌面应用程序的开发，实际上它结合了两种开发模式的部分优点，从形式上看它是WEB应用，采用的B/S模式，但从效果上看，它又类似桌面应用，给用户以完美体验。本文中利用Ajax开发的聊天系统充分展示了Ajax技术的优点，结合实例来说明了Ajax技术与传统的B/S模式的区别。Ajax技术并不是一项复杂的技术，但是它很好地利用了几项技术的融合，达到了令人满意的效果，成为深受Web用户喜爱的一项技术。避免了客户端重复刷新读取信息的麻烦，缩短了用户的等待时间，充分体现了Ajax技术的优点。其应用也越来越广。Google，微软等均已经在自己的站点或产品中应用了Ajax。我们也要展开丰富的想象，把Ajax技术推广到更广的范围更宽的层面。
参考文献：
[1] Flanagan D.JavaScript 权威指南[M].北京:中国电力出版社,2001.
[2] 施伟伟,张蓓.征服Ajax Web2.0快速入门与项目实践[M].北京:人民邮电出版社,2006.
[3] 游丽贞,郭宇春.Ajax引擎的原理和应用[J].微计算机信息,2006(2-3):205-207.
[4] Asleson R,Schutta N T.Foundati ons of Ajax[M].USA:A press L P,2005.
[5] Crane D,Pascarello E,James D.Ajax in Acti on[M].USA:Manning Publications CO,2005.
[6] Asleson R,Schutta N T.AJAX基础教程[M].金灵,译.北京:人民邮电出版社,2006.
[7] 赵永屹,宿红毅.基于Ajax与J2EE的新型Web应用的设计与实现[J].计算机工程与设计,2007,28(1):189-192.
[8] Getland J,Almaer D.AJAX修炼之道--Web 2.0入门[M].北京:电子工业出版社,2006:35-120.
[9] 冯曼菲.精通Ajax-基础概念、核心技术与典型案例[M].北京:人民邮电出版社,2008.
[10] 吕林涛,万经华,周红芳.基于AJAX的Web无刷新页面快速更新数据方法[J].计算机应用研究,2006(11).
[11] Li H L,Zhen H D.Intergrating AJAX and WebServices for Cooperative Image Editing[J].IT Professional,2007(9-3):25-29.
[12] Jerome SonnetChrles Savage.OGC Web Soap Experiment Report 0.8 Document#03-014[S].2003.
关键词：JQuery；Ajax技术；Asp.Net；在线聊天；异步通信
中图分类号：TP311文献标识码：A文章编号：1009-3044(2011)01-0142-04
The Applicaton of Ajax in Web Chatting System
CHEN Ying1, TANG Qi-tao2, PENG Li-hong3
(1.Computer Science and Technology of Changsha Medical University, Changsha 410219, China; 2.Computer Application Technology of University of South China, Changsha 410219, China; 3.Computer Science and Technology of Hunan University, Changsha 410219, China)
Abstract: Ajax is a technology which is currently great popular with Web users. It achieved the asynchronous communication between users and servers reaching a better experience for users. And provide a great solution for the frequent communication and data reading on Web pages, as well. The chatting system we introduced here applied the Ajax technology of JQuery. It sending and receiving the content of chat by transferring data asynchronously achieving the asynchronous communication with servers under the condition of not refreshing the new web repeated. Here we introduced the working principle and methods of Ajax. Specifically analysis the appliance of Ajax based on the web in chat system embodying the superiority of Ajax in web procedure.
Key words: JQuery; Ajax technology; Asp.Net; online chatting; asynchronous communication
随着科学的发展，Web服务在因特网中扮演着越来越重要的角色。越来越多的人通过Web享受信息化时代带来的各种服务。众所周知，访问量越大网络的负担就越重。但是又不能降低访问量，所以要尽量减少每次访问页面时的信息量。例如在一个Web页面里有很多内容都是重复的（页头，页尾等），如果整个页面重新加载一次，势必会造成网络资源的浪费并加大了服务器的负担。为了很好地解决以上问题，2005年Jesse James Garrett提出了Ajax（Asynchronous JavaScript and XML的缩写）这个概念。Ajax其实不是一种新的语言或技术，只是把几种技术按一定的方式组合，它们之间相互配合共同协作发挥各自的作用。本文介绍的在线聊天系统中页面只有聊天内容是变化的。所以只需把聊天的内容利用Ajax技术与服务器进行交互，这样既达到了聊天的要求同时也降低了通信的数据量，减轻了服务器的负担。
1 Ajax工作原理
Ajax(Asynchronous JavaScript and XML)技术实际上是在客户端和服务器之间加入一个中间服务层，称为Ajax引擎。用来处理客户端请求，使用户与服务器的操作异步化。使用
此技术用户不必暂停页面操作来等待服务器的响应，而可以继续进行客户端的其它工作。这里提交给服务器的信息并不是客户端的所有请求，信息验证等一些操作都由Ajax自行处理，只有需要到服务器上取数据时才会根据请求信息，需要什么就取什么，减少数据的冗余和浪费，降低下载量。等到服务器响应完毕，将结果提交给Ajax引擎，Ajax引擎使用HTML和CSS等技术展示给用户。客户端和服务器的这种异步通信，使用户感觉不到客户端与服务器的通信过程， Web程序看起来就像是即时响应的。图1显示了Ajax的工作原理。
在传统的Web应用中，客户端只是通过浏览器简单的显示内容，所有的信息都保存在服务器上。引入Ajax后，它把一部分Web应用程序移到了浏览器中，使浏览器中不再是纯粹的内容。用户浏览页面时，浏览器会从服务器下载有特殊功能的代码，这些代码具有一定的处理用户请求的能力，由它们来决定是否将用户的请求提交给服务器。由于用户的一部分请求可以直接在客户端进行处理，客户端与服务器的通信效率会提高很多。
2 Ajax技术
Ajax技术包含了JavaScript、DOM、XML和XMLHttpRequest，这些技术按照某种方式组合发挥着各自的作用。Javascript实现对用户行为的实时响应和处理，DOM实现动态的显示和交互，XML进行数据交换和处理，XMLHttpRequest进行异步数据读取[1]。
1）JavaScript
JavaScript是因特网上最流行的脚本语言，被用来改进设计、验证表单、检测浏览器、创建cookies，等等。它安全高效，通过嵌入在标准的HTML语言中实现各种与用户的交互任务。
2）DOM
DOM（Document Object Model的缩写）是一个能够让程序和脚本动态访问文档内容、结构和样式的语言平台。它是一个树型结构，由元素和节点组成，它是以面向对象的方式描述的对象模型。DOM对象分为HTML DOM对象和XML DOM对象。
3）XML
XML（eXtensible Markup Language的缩写）是可扩展标记语言的缩写。通常作为数据传输的媒介。在Ajax技术中，XMLHttpRequest对象可以使用XML作为与服务器端通信的数据格式。
4）XMLHttpRequest
XMLHttpRequest是Ajax技术体系中最为核心的技术，是Ajax引擎解决无需刷新整个页面即可从服务器获取所需数据问题的关键。它负责将用户信息以异步方式发送到服务器。Web应用程序无需刷新页面就可以向服务器提交信息，或从服务器得到应答。这样用户就不会觉察后台向服务器提交和接收数据。而且客户端也不必每次都将数据处理工作交给服务器来做，这样加快了响应速度，也就缩短了用户的等待时间。
继prototype之后, 2005年美国人JohnResig创建了JQuery。它兼容各种浏览器（IE6.0+，FF1.5+，Safari2.0+,Opera9.0+）。在JQuery中的Ajax是通过HTTP请求加载远程数据。在JQuery里使用$.ajax()来实现Ajax交互。$.ajax()返回其创建的XMLHttpRequest对象。大多数情况下无需直接操作该对象，但在特殊情况下可用于手动终止请求。
3 Ajax在在线聊天系统中的应用
在线聊天系统实质就是双方能够发送和接收消息，并且是即时通信。如果利用传统的B/S模式，则每次要接收或发送聊天信息时都必须重新刷新页面来与服务器同步数据。这样既浪费了资源增加了下载量，又加长了用户的等待时间，而且还增加了服务器的负担。从而使通信效率大大的降低。如果利用Ajax技术，就会克服以上诸多的不足之处。使用户感觉不到客户端与服务器之间的通信过程。下面将着重介绍Ajax在在线聊天系统中的应用。
首先在Visual Studio 2008（C#）中建立一个Ajax_Client.htm的页面，在Ajax_Client.htm页面上放置一个text控件作为输入框，一个div标签用来显示聊天信息和一个button控件用来发送消息。
3.1 接收聊天信息
因为聊天信息的交互是动态进行的，所以客户端每隔一段时间就要利用Ajax读取消息（称为局部刷新或异步刷新），以保证及时收到聊天信息。本系统用JavaScript脚本语言中的setInterval()函数周期性的执行读取服务器信息的函数。一旦发现服务器上有数据则立即利用Ajax引擎读取该信息并显示在Ajax_Client.htm页面的div标签里，这就是客户端收信息的过程。下面用部分代码来说明。
设置div的id为AjaxDiv_Show。编写读取信息函数RequestMessage()。利用此函数来读取服务器中的聊天信息。核心代码示例：
执行上述代码就可以从服务器上读取信息到客户端的页面上而不需要整体刷新页面。用户也不必等待服务器的响应而可以继续操作。这样就防止了刷新页面带来的闪烁，不需要用户等待，从而提高了系统的处理效率。
3.2 发送聊天信息
发送聊天信息与接收信息有点不同，发送信息时不需要定期执行发送函数，只有在点击了button后才会调用发送函数，发送函数的功能利用Ajax引擎把text中的信息发送至服务器。在Ajax_Client.htm页面上有一个按钮控件和一个text文本编辑框。发送聊天信息的函数为SendMessageClick()，核心代码示例：
在发送消息的代码编写完成之后，则客户端的基本功能就能实现了。
3.3 服务器的功能实现
发送和接收消息的请求地址都是Ajax.aspx，所以在服务器上负责与客户端通信的就是Ajax.aspx页面。下面介绍服务器代码的编写。首先在Visual Studio 2008(C#)里面新建一个名为Ajax.aspx的页面。系统会自动生成一个Ajax.aspx.cs的代码文件。Ajax.aspx.cs的代码功能就是要处理客户端最基本的两种请求，就是读取消息和发送消息。当有消息发送到服务器时，则服务器应该把消息先存起来，等到有取消息请求时就把消息再转发出去。代码示例如下：
public partial class Ajax : System.Web.UI.Page
{protected void Page_Load(object sender, EventArgs e)
{if (!IsPostBack)
{string strQuery;
strQuery= Request.QueryString["Type"].ToString();
switch(strQuery)
{case "SendMessage": //发送消息请求
Application.lock();
Application["Messages"]=
Request.QueryString["Messages"].ToString();
//把接到的消息存放到Application里面
Application.unlock();
Response.Write("OK"); //响应客户端
break;
case "RequestMessage"://读取消息请求
string Message= Application["Messages"].ToString();
if(String.IsNullOrEmpty(Message))
{Response.Write(Application["Messages"].ToString());//如果有消息则发送至客户端
Application.lock();
Application["Messages"]=""; //清空存储的信息
Application.unlock();}
break;}}}}
在编写了客户端与服务器端的代码之后，就可以运行此代码进行在线聊天了。在本机客户端输入框中输入内容后点击发送按钮。则另外一个客户端页面将会看到本机上发送的信息而不需要刷新页面。同样对方发送信息在本机上的窗体上也会显示相应的信息。在运行期间，无论是发送消息还是接收消息都是采用Ajax异步通信方式。使用户感觉非常的方便，摆脱了重复刷新带来的页面的闪烁，而且大大地节省了用户等待的时间。
4 结束语
Ajax的异步工作方式为我们带来了一种全新的程序开发模式，它既不同于传统的WEB开发，也有别于桌面应用程序的开发，实际上它结合了两种开发模式的部分优点，从形式上看它是WEB应用，采用的B/S模式，但从效果上看，它又类似桌面应用，给用户以完美体验。本文中利用Ajax开发的聊天系统充分展示了Ajax技术的优点，结合实例来说明了Ajax技术与传统的B/S模式的区别。Ajax技术并不是一项复杂的技术，但是它很好地利用了几项技术的融合，达到了令人满意的效果，成为深受Web用户喜爱的一项技术。避免了客户端重复刷新读取信息的麻烦，缩短了用户的等待时间，充分体现了Ajax技术的优点。其应用也越来越广。Google，微软等均已经在自己的站点或产品中应用了Ajax。我们也要展开丰富的想象，把Ajax技术推广到更广的范围更宽的层面。
参考文献：
[1] Flanagan D.JavaScript 权威指南[M].北京:中国电力出版社,2001.
[2] 施伟伟,张蓓.征服Ajax Web2.0快速入门与项目实践[M].北京:人民邮电出版社,2006.
[3] 游丽贞,郭宇春.Ajax引擎的原理和应用[J].微计算机信息,2006(2-3):205-207.
[4] Asleson R,Schutta N T.Foundati ons of Ajax[M].USA:A press L P,2005.
[5] Crane D,Pascarello E,James D.Ajax in Acti on[M].USA:Manning Publications CO,2005.
[6] Asleson R,Schutta N T.AJAX基础教程[M].金灵,译.北京:人民邮电出版社,2006.
[7] 赵永屹,宿红毅.基于Ajax与J2EE的新型Web应用的设计与实现[J].计算机工程与设计,2007,28(1):189-192.
[8] Getland J,Almaer D.AJAX修炼之道--Web 2.0入门[M].北京:电子工业出版社,2006:35-120.
[9] 冯曼菲.精通Ajax-基础概念、核心技术与典型案例[M].北京:人民邮电出版社,2008.
[10] 吕林涛,万经华,周红芳.基于AJAX的Web无刷新页面快速更新数据方法[J].计算机应用研究,2006(11).
[11] Li H L,Zhen H D.Intergrating AJAX and WebServices for Cooperative Image Editing[J].IT Professional,2007(9-3):25-29.
[12] Jerome SonnetChrles Savage.OGC Web Soap Experiment Report 0.8 Document#03-014[S].2003.