Ajax解决多余刷新的两种方法(总结)
控制器Servlet则提供了简单的改变：
对于Ajax系统而言，服务器响应无须是整个页面内容，可以仅是
必需的数据，控制器不能将数据请求转发到jsp页面。
此时控制器有两个选择：
1、直接生成简单的响应数据。
在这种模式下，Servlet直接通过response获取页面输出流，通过
输出流生成字符响应。
packagepers.zkr.chat.web;
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.annotation.WebServlet;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importpers.zkr.chat.service.ChatService;
@WebServlet(urlPatterns={"/chat.do"})
publicclassChatServletextendsHttpServlet{
@Override
publicvoidservice(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
//TODOAuto-generatedmethodstub
request.setCharacterEncoding("utf-8");
Stringmsg=request.getParameter("chatMsg");
System.out.println(msg);
if(msg!=null&&!msg.equals("")){
Stringuser=(String)request.getSession().getAttribute("user");
System.out.println(user+"user");
ChatService.instance().addMsg(user,msg);
}
//设置响应内容的类型
<strong>response.setContentType("text/html;charset=utf-8");
//获取页面输出流
PrintWriterout=response.getWriter();
//直接生成响应
out.println(ChatService.instance().getMsg());</strong>
request.setAttribute("msg",ChatService.instance().getMsg());
forward("/chat.jsp",request,response);
}
privatevoidforward(Stringurl,HttpServletRequestrequest,
HttpServletResponseresponse)throwsServletException,IOException{
//TODOAuto-generatedmethodstub
request.getRequestDispatcher(url)
.forward(request,response);
}
}
2、转向一个简单的jsp使用JSP页面生成简单的响应。
控制器将请求转发到另外的JSP页面，而JSP页面仅仅负责输出聊天信息
在这里需要一个jsp页面来接收控制器发来的数据，也是服务器的响应文本，而在
原来的页面，只需：
1）创建XMLHttpRequest对象
2)发送请求
3）接收服务器的响应
packageorg.crazyit.chat.web;
importjavax.servlet.*;
importjavax.servlet.http.*;
importjavax.servlet.annotation.*;
importjava.io.*;
importorg.crazyit.chat.service.*;
/**
*Description:
*<br/>网站:<ahref=https://www.nhooo.com>毛票票</a>
*<br/>Copyright(C),2001-2014,Yeeku.H.Lee
*<br/>Thisprogramisprotectedbycopyrightlaws.
*<br/>ProgramName:
*<br/>Date:
*@version1.0
*/
@WebServlet(urlPatterns={"/chat.do"})
publicclassChatServletextendsHttpServlet
{
publicvoidservice(HttpServletRequestrequest,
HttpServletResponseresponse)throwsIOException,ServletException
{
//设置使用GBK字符集来解析请求参数
request.setCharacterEncoding("utf-8");
Stringmsg=request.getParameter("chatMsg");
if(msg!=null&&!msg.equals(""))
{
//取得当前用户
Stringuser=(String)request.getSession(true)
.getAttribute("user");
//调用ChatService的addMsg来添加聊天消息
ChatService.instance().addMsg(user,msg);
}
//将全部聊天信息设置成request属性
<strong>request.setAttribute("chatList",
ChatService.instance().getMsg());</strong>
//转发到chatreply.jsp页面
forward("/chatreply.jsp",request,response);
}
//执行转发请求的方法
privatevoidforward(Stringurl,HttpServletRequestrequest,
HttpServletResponseresponse)throwsServletException,IOException
{
//执行转发
request.getRequestDispatcher(url)
.forward(request,response);
}
}
接收数据的页面
<%@pagecontentType="text/html;charset=GBK"errorPage="error.jsp"%>
<%--输出当前的聊天信息--%>
${requestScope.chatList}
html页面
<!DOCTYPEhtml>
<html>
<head>
<metaname="author"content="Yeeku.H.Lee(CrazyIt.org)"/>
<metahttp-equiv="Content-Type"content="text/html;charset=GBK"/>
<title>聊天页面</title>
</head>
<bodyonload="sendEmptyRequest();">
<divstyle="width:780px;border:1pxsolidblack;text-align:center">
<h3>聊天页面</h3>
<p>
<textareaid="chatArea"name="chatArea"cols="90"
rows="30"readonly="readonly"></textarea>
</p>
<divalign="center">
<inputid="chatMsg"name="chatMsg"type="text"
size="90"onkeypress="enterHandler(event);"/>
<inputtype="button"name="button"value="提交"
onclick="sendRequest();"/>
</div>
</div>
<scripttype="text/javascript">
varinput=document.getElementById("chatMsg");
input.focus();
varXMLHttpReq;
//创建XMLHttpRequest对象
functioncreateXMLHttpRequest()
{
if(window.XMLHttpRequest)
{
//DOM2浏览器
XMLHttpReq=newXMLHttpRequest();
}
elseif(window.ActiveXObject)
{
//IE浏览器
try
{
XMLHttpReq=newActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
XMLHttpReq=newActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
}
}
}
}
//发送请求函数
functionsendRequest()
{
//input是个全局变量，就是用户输入聊天信息的单行文本框
varchatMsg=input.value;
//完成XMLHttpRequest对象的初始化
createXMLHttpRequest();
//定义发送请求的目标URL
varurl="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.send("chatMsg="+chatMsg);
}
//定时请求服务器
functionsendEmptyRequest()
{
//完成XMLHttpRequest对象的初始化
createXMLHttpRequest();
//定义发送请求的目标URL
varurl="chat.do";
//发送POST请求
XMLHttpReq.open("POST",url,true);
//设置请求头-发送POST请求时需要该请求头
XMLHttpReq.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//指定XMLHttpRequest状态改变时的处理函数
XMLHttpReq.onreadystatechange=processResponse;
//发送请求,，不发送任何参数
XMLHttpReq.send(null);
//指定0.8s之后再次发送请求
setTimeout("sendEmptyRequest()",800);
}
//处理返回信息函数
functionprocessResponse()
{
//当XMLHttpRequest读取服务器响应完成
if(XMLHttpReq.readyState==4)
{
//服务器响应正确（当服务器响应正确时，返回值为200的状态码）
if(XMLHttpReq.status==200)
{
//使用chatArea多行文本域显示服务器响应的文本
document.getElementById("chatArea").value
=XMLHttpReq.responseText;
}
else
{
//提示页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
functionenterHandler(event)
{
//获取用户单击键盘的“键值”
varkeyCode=event.keyCode?event.keyCode
:event.which?event.which:event.charCode;
//如果是回车键
if(keyCode==13)
{
sendRequest();
}
}
</script>
</body>
</html>
以上这篇Ajax解决多余刷新的两种方法(总结)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。