ajax刷新html页面刷新,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);

}

//设置响应内容的类型

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页面

聊天页面

聊天页面

rows="30" readonly="readonly">

size="90" οnkeypress="enterHandler(event);"/>

οnclick="sendRequest();"/>

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

}

}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：