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

来源：互联网发布：java 二进制中文乱码编辑：程序博客网时间：2024/06/03 02:34

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 {@Overridepublic void service(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// TODO Auto-generated method stubrequest.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 stubrequest.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 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();// 定义发送请求的目标URLvar 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();// 定义发送请求的目标URLvar 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>

0 0