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>

首先要创建XMLHttpRequest对象，使用XMLHttpRequest对象，必须先创建XMLHttpRequest对象，创建XMLHttpRequest的代码如下：

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发送请求则通过JavaScript代码完成，这就避免了页面的刷新——这也是异步发送请求的核心。

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

// 发送请求函数function sendRequest(){// input是个全局变量，就是用户输入聊天信息的单行文本框var chatMsg = input.value;// 完成XMLHttpRequest对象的初始化createXMLHttpRequest();// 定义发送请求的目标URLvar 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, Helvetica, sans-serif; background-color: rgb(255, 255, 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("您所请求的页面有异常。");}}}

跳转到 chat.do的URL其实为Servlet页面，代码如下：

@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());
}
}

整个Ajax过程就如上面所述，遇到具体问题，即可修改部分代码