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

web前端|js教程 下面我就为大家带来一篇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); } //设置响应内容的类型 response.setContentType("text/html;charset=utf-8"); // 获取页面输出流 PrintWriter out = response.getWriter(); //直接生成响应 out.println(ChatService.instance().getMsg()); 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: *
网站: 脚本之家 *
Copyright (C), 2001-2014, Yeeku.H.Lee *
This program is protected by copyright laws. *
Program Name: *
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属性 request.setAttribute("chatList" , ChatService.instance().getMsg()); // 转发到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); }}

接收数据的页面

${requestScope.chatList}

html页面

聊天页面

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(); }}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

实现ajax拖拽上传文件（附有代码）

jquery ajax实现文件上传功能（附有代码）

通过Ajax实现动态加载折线图的方法（图文教学）