虚位以待(AD)
虚位以待(AD)
首页 > 网络编程 > AJAX相关 > Ajax解决多余刷新的两种方法(总结)

Ajax解决多余刷新的两种方法(总结)
类别: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);
    }
    //设置响应内容的类型 <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.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解决多余刷新的两种方法(总结)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关热词搜索: ajax解决多余刷新