Ajax解决多余刷新的两种方法(总结)
程序员文章站
2022-03-14 10:49:23
控制器servlet则提供了简单的改变：
对于ajax系统而言，服务器响应无须是整个页面内容，可以仅是
必需的数据，控制器不能将数据请求转发到jsp页面。
此时控制器...
控制器servlet则提供了简单的改变：
对于ajax系统而言，服务器响应无须是整个页面内容，可以仅是
必需的数据，控制器不能将数据请求转发到jsp页面。
此时控制器有两个选择：
1、直接生成简单的响应数据。
在这种模式下，servlet直接通过response获取页面输出流，通过
输出流生成字符响应。
package pers.zkr.chat.web;
import java.io.ioexception;
import java.io.printwriter;
import javax.servlet.servletexception;
import javax.servlet.annotation.webservlet;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
import pers.zkr.chat.service.chatservice;
@webservlet(urlpatterns={"/chat.do"})
public class chatservlet extends httpservlet {
@override
public void service(httpservletrequest request, httpservletresponse response)
throws servletexception, ioexception {
// todo auto-generated method stub
request.setcharacterencoding("utf-8");
string msg=request.getparameter("chatmsg");
system.out.println(msg);
if(msg!=null&&!msg.equals("")){
string user=(string)request.getsession().getattribute("user");
system.out.println(user+"user");
chatservice.instance().addmsg(user, msg);
}
//设置响应内容的类型
<strong>response.setcontenttype("text/html;charset=utf-8");
// 获取页面输出流
printwriter out = response.getwriter();
//直接生成响应
out.println(chatservice.instance().getmsg());</strong>
request.setattribute("msg",chatservice.instance().getmsg());
forward("/chat.jsp", request , response);
}
private void forward(string url, httpservletrequest request,
httpservletresponse response) throws servletexception, ioexception {
// todo auto-generated method stub
request.getrequestdispatcher(url)
.forward(request , response);
}
}
2、转向一个简单的jsp使用jsp页面生成简单的响应。
控制器将请求转发到另外的jsp页面，而jsp页面仅仅负责输出聊天信息
在这里需要一个jsp页面来接收控制器发来的数据，也是服务器的响应文本，而在
原来的页面，只需：
1）创建xmlhttprequest对象
2) 发送请求
3）接收服务器的响应
package org.crazyit.chat.web;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.*;
import org.crazyit.chat.service.*;
/**
* description:
* <br/>网站: <a href=//www.jb51.net></a>
* <br/>copyright (c), 2001-2014, yeeku.h.lee
* <br/>this program is protected by copyright laws.
* <br/>program name:
* <br/>date:
* @version 1.0
*/
@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);
}
// 将全部聊天信息设置成request属性
<strong>request.setattribute("chatlist" ,
chatservice.instance().getmsg());</strong>
// 转发到chatreply.jsp页面
forward("/chatreply.jsp" , request , response);
}
// 执行转发请求的方法
private void forward(string url , httpservletrequest request,
httpservletresponse response)throws servletexception,ioexception
{
// 执行转发
request.getrequestdispatcher(url)
.forward(request,response);
}
}
接收数据的页面
<%@ page contenttype="text/html;charset=gbk" errorpage="error.jsp"%>
<%-- 输出当前的聊天信息 --%>
${requestscope.chatlist}
html页面
<!doctype html>
<html>
<head>
<meta name="author" content="yeeku.h.lee(crazyit.org)" />
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<title>聊天页面</title>
</head>
<body onload="sendemptyrequest();">
<div style="width:780px;border:1px solid black;text-align:center">
<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>
</div>
<script type="text/javascript">
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)
{
}
}
}
}
// 发送请求函数
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.send("chatmsg=" + chatmsg);
}
//定时请求服务器
function sendemptyrequest()
{
// 完成xmlhttprequest对象的初始化
createxmlhttprequest();
// 定义发送请求的目标url
var url = "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);
}
// 处理返回信息函数
function processresponse()
{
// 当xmlhttprequest读取服务器响应完成
if (xmlhttpreq.readystate == 4)
{
// 服务器响应正确（当服务器响应正确时，返回值为200的状态码）
if (xmlhttpreq.status == 200)
{
// 使用chatarea多行文本域显示服务器响应的文本
document.getelementbyid("chatarea").value
= xmlhttpreq.responsetext;
}
else
{
// 提示页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
function enterhandler(event)
{
// 获取用户单击键盘的“键值”
var keycode = event.keycode ? event.keycode
: event.which ? event.which : event.charcode;
// 如果是回车键
if (keycode == 13)
{
sendrequest();
}
}
</script>
</body>
</html>
以上这篇ajax解决多余刷新的两种方法(总结)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。