Ajax解决聊天室问题

Ajax的核心是JavaScript对象的XMLHttpRequest。它提供了异步发送请求的能力。简而言之，使用XMLHttpRequest，可以通过JavaScript向服务器发送请求，并能够处理服务器响应，避免阻塞用户的动作。通过使用XMLHttpRequest对象，浏览器通过客户端脚本与服务器交换数据，而Web页面无须频繁的重新加载，Web页面的内容也由客户端脚本动态更新。

整个Ajax应用的工作过程如下：

1、JavaScript脚本使用XMLHttpRequest对象向服务器发送请求。发送请求时，既可以发送GET请求，也可以发送POST请求。

2、JavaScript脚本使用XMLHttpRequest对象解析服务器响应数据。

3、JavaScript脚本通过DOM动态更新HTML页面。也可以为服务器响应数据增加CSS样式表，在当前网页中的某个部分加以显示。

下面一个小的例子显示登录信息使用Ajax完成：

在首页聊天室代码：

<h3>聊天页面</h3>
<p>
<textarea id="chatArea" name="chatArea" cols="90"
	rows="30" readonly="readonly"></textarea>
</p>
<div align="center">
	<input id="chatMsg" name="chatMsg" type="text"	size="90" onkeypress="enterHandler(event);"/>
	<input type="button" name="button" value="提交"	onclick="sendRequest();"/>
</div>

var input = document.getElementById("chatMsg");
input.focus();
var XMLHttpReq;
// 创建XMLHttpRequest对象
function createXMLHttpRequest()
{
	if(window.XMLHttpRequest)
	{ 
		// DOM 2浏览器
		XMLHttpReq = new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{
		// IE浏览器
		try
		{
			XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e)
		{
			try
			{
				XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e)
			{
			}
		}
	}
}

上面的程序中的代码可以在Internet Explorer、Firfox、Opera等浏览器中创建XMLHttpRequest对象。因为XMLHttpRequest对象在不同的浏览器中实现方式不同，因而在不同的浏览器中创建XMLHttpRequest对象的方式也略有不同。

一旦XMLHttpRequest对象创建成功，系统可以使用XMLHttpRequest发送请求，XMLHttpRequest请求与传统的请求不同，传统的发送请求是提交表单，或者请求新的网络页面——浙江导致浏览器重新发送请求，重新加载新的页面。

XMLHttpRequest对象包含send方法用于发送请求。在发送请求之前，应先于请求的URL取得连接，XMLHttpRequest通过open方法打开与请求的URL连接，下面是使用XMLHttpRequest发送请求的JavaScript代码：

// 发送请求函数
function sendRequest()
{
	// input是个全局变量，就是用户输入聊天信息的单行文本框
	var chatMsg = input.value;
	// 完成XMLHttpRequest对象的初始化
	createXMLHttpRequest();
	// 定义发送请求的目标URL
	var url = "chat.do";
	// 通过open方法取得与服务器的连接
	// 发送POST请求
	XMLHttpReq.open("POST",url,true);
	// 设置请求头-发送POST请求时需要该请求头
	XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	// 指定XMLHttpRequest状态改变时的处理函数
	XMLHttpReq.onreadystatechange = processResponse;
	// 清空输入框的内容
	input.value = "";
	// 发送请求，send的参数包含许多的key-value对。
	// 即以：请求参数名=请求参数值 的形式发送请求参数。
	XMLHttpReq<span style="font-family: Arial,Helvetica,sans-serif; background-color: rgb(255,255,255);">.send("chatMsg=" + chatMsg);</span>

<span style="font-family: Arial,255);"> }</span>

上面的程序第一行粗体字代码使用open方法打开与请求资源的连接，因为本系统采用POSt方式发送请求参数，因此在请求里增加了Content-Type请求头，并将该发送的请求头的值设为application/x-www-form-urlencoded,这是为了保证请求参数采用合适的格式发送。程序中的代码是发送POST请求的完整过程。

一般而言，使用XMLHttpRequest发送请求应按如下步骤进行：

1、使用open方法连接服务器URL

2、调用setRequestHeader方法为请求设置合适的请求头。根据不同的请求，可能需要设置不同的请求头。

3、制定回调函数。所谓回调函数就是用于检测XMLHttpRequest状态的函数（类似于事件监听器），当XMLHttpRequest的状态发生改变时，该回调函数将被触发而自动执行。

4、调用send方法发送请求。

通过上面的 程序中我们发现，在采用Ajax发送请求时，发送请求比传统的Web应用略显复杂。传统的Web应用发送请求有两种形式：

1、在浏览器的地址栏中输入请求的地址后按回车键发送GET请求。

2、提交表单发送POST或GET请求，具体发送何种请求取决于表单元素的method属性。

上面的发送请求的方式都比较简单，基本无须编写任何程序代码。在改为使用Ajax请求后，需要先创建XMLHttpRequest对象。再使用该对象来发送异步请求。

// 处理返回信息函数
function processResponse()
{
	// 当XMLHttpRequest读取服务器响应完成
	if (XMLHttpReq.readyState == 4)
	{
		// 服务器响应正确（当服务器响应正确时，返回值为200的状态码）
		if (XMLHttpReq.status == 200)
		{
			// 使用chatArea多行文本域显示服务器响应的文本
			document.getElementById("chatArea").value 
				= XMLHttpReq.responseText;
		}
		else
		{
			// 提示页面不正常
			window.alert("您所请求的页面有异常。");
		}
	}
}

@WebServlet(urlPatterns={"/chat.do"}) public class ChatServlet extends HttpServlet { public void service(HttpServletRequest request,HttpServletResponse response)throws IOException,ServletException { // 设置使用GBK字符集来解析请求参数 request.setCharacterEncoding("utf-8"); String msg = request.getParameter("chatMsg"); if ( msg != null && !msg.equals("")) { // 取得当前用户 String user = (String)request.getSession(true) .getAttribute("user"); // 调用ChatService的addMsg来添加聊天消息 ChatService.instance().addMsg(user,msg); } // 设置响应内容的类型 response.setContentType("text/html;charset=GBK"); // 获取页面输出流 PrintWriter out = response.getWriter(); // 直接生成响应 out.println(ChatService.instance().getMsg()); } }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!