之后便是调用此方法,并使用创建的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] ... 下一页 >>