Ajax解决多余刷新的两种方式

最新推荐文章于 2022-10-15 02:17:08 发布

q1054261752

最新推荐文章于 2022-10-15 02:17:08 发布

阅读量353

点赞数

分类专栏： Ajax

Ajax 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Ajax解决多余刷新的问题
控制器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="http://www.crazyit.org">疯狂Java联盟</a>
 * <br/>Copyright (C), 2001-2014, Yeeku.H.Lee
 * <br/>This program is protected by copyright laws.
 * <br/>Program Name:
 * <br/>Date:
 * @author Yeeku.H.Lee kongyeeku@163.com
 * @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 οnlοad="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" οnkeypress="enterHandler(event);"/>
	<input type="button" name="button" value="提交"
	οnclick="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>

q1054261752

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax解决多余刷新的两种方式

Ajax解决多余刷新的问题控制器Servlet则提供了简单的改变：对于Ajax系统而言，服务器响应无须是整个页面内容，可以仅是必需的数据，控制器不能将数据请求转发到jsp页面。此时控制器有两个选择： 1. 直接生成简单的响应数据。在这种模式下，Servlet直接通过response获取页面输出流，通过
复制链接

扫一扫