房地产信息管理系统 第10页

房地产信息管理系统 第10页
XMLHttpReq = new XMLHttpRequest();
  }
  else if (window.ActiveXObject){
   // IE浏览器
   try {
    XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch (e) {
    try {
     XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e){
    }
   }
  }
 }

之后便是调用此方法,并使用创建的XMLHttpRequest对象实例。在chat.jsp中,当页面加载完成后,便调用sendEmptyRequest()方法,此方法在调用createXMLHttpRequest()方法后,将会以post方法向url为../chat发出请求(其中带有相应数据),并指定了响应函数,而且每隔800毫秒就再次调用此方法。其代码如下:

function sendEmptyRequest() {
  var name = document.getElementById("name").value;
  createXMLHttpRequest();
        var url = "../chat";
  XMLHttpReq.open("POST", url, true);
XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
  XMLHttpReq.send("name=" + encodeURIComponent(name)); // 发送请求
  setTimeout("sendEmptyRequest()" , 800);
 }

sendRequest()方法与sendEmptyRequest()类似,但不同的时,前者只是当用户在输入栏中输入内容后(如果为空则立即返回),点击页面上的发送按钮后才调用,并将输入的内容作为传递数据,发送到服务器端进行处理。代码如下:

function sendRequest() {
  var name = document.getElementById("name").value;
  if (name == "" || name == null) {
   document.getElementById("name").value = "Anonymous";
  }
  
if (document.getElementById("chatMsg").value == "" || document.getElementById("chatMsg").value == null) {
   alert("发送内容不能为空\n请重新输入,谢谢!");
   document.getElementById("chatMsg").focus();
   return ;
  }
  
  var chatMsg = input.value;
  createXMLHttpRequest();
        var url = "../chat";
  XMLHttpReq.open("POST", url, true);
  XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
  input.value="";
XMLHttpReq.send("chatMsg=" + encodeURIComponent(chatMsg) + "&name=" + encodeURIComponent(name)); // 发送请求
 }

客户端将信息发送至服务器端,在服务器端处理完毕后,则返回此页面,而在客户端上处理返回信息的方法就是XMLHttpReq.onreadystatechange = processResponse;所指定的processResponse()方法。该方法在XMLHttpRequest对象的readyState属性改变时被调用,方法中先对XMLHttpRequestd请求的当前状态和当前请求的http状态码进行判断,为true后,便得到返回内容,并加以处理,最后用JavaScript实现内容动态显示。代码如下:

function processResponse() {
  if (XMLHttpReq.readyState == 4) {
   // 判断对象状态
  if (XMLHttpReq.status == 200) {
   // 信息已经成功返回,开始处理信息
   var xmlObj = new ActiveXObject("MSxml2.DOMDocument");
   xmlObj.loadXML(XMLHttpReq.responseText);
   document.getElementById("chatArea").scrollTop = document.getElementById("chatArea").scrollHeight;
   if (xmlObj.getElementsByTagName("info")[0].hasChildNodes()) {
    document.getElementById("chatArea").value = xmlObj.getElementsByTagName("info")[0].firstChild.nodeValue;
    document.getElementById("chatArea").scrollTop = document.getElementById("chatArea").scrollHeight;
   }
   if (xmlObj.getElementsByTagName("users")[0].hasChildNodes()){
     document.getElementById("usersAre").value = xmlObj.getElementsByTagName("users")[0].firstChild.nodeValue;
   }
  }
   else {
    //页面不正常
                window.alert("您所请求的页面有异常:" + XMLHttpReq.status);
            }
        }
}

页面显示效果如下图:
 
图6.10  信息交流显示图

6.2.2 服务器端部分
在6.2.1中所提到的值为../chat的url,将根据web.xml中的配置,由net.sanxiau.servlet.ChatServlet进行处理,该类中通过sessionid判断当前在线的用户个数,及其最新昵称,将其和最新的交流内容一并以xml格式返回给chat.jsp页面,进行处理。代码如下:

package net.sanxiau.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;

上一页  [1] [2] [3] [4] [5] [6] [7] [8] [9] [10]  ... 下一页  >> 

Copyright © 2007-2012 www.chuibin.com 六维论文网 版权所有