Ajax如何解决多余刷新问题

小编给大家分享一下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);  } }

接收数据的页面

<%@ page contentType="text/html;charset=GBK" errorPage="error.jsp"%>
<%-- 输出当前的聊天信息 --%>
${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如何解决多余刷新问题”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网站栏目:Ajax如何解决多余刷新问题
新闻来源:http://cdiso.cn/article/jcdpoe.html

其他资讯