控制器Servlet則提供了簡(jiǎn)單的改變：
對(duì)于Ajax系統(tǒng)而言，服務(wù)器響應(yīng)無(wú)須是整個(gè)頁(yè)面內(nèi)容，可以?xún)H是
必需的數(shù)據(jù)，控制器不能將數(shù)據(jù)請(qǐng)求轉(zhuǎn)發(fā)到j(luò)sp頁(yè)面。
此時(shí)控制器有兩個(gè)選擇：
1、直接生成簡(jiǎn)單的響應(yīng)數(shù)據(jù)。
在這種模式下，Servlet直接通過(guò)response獲取頁(yè)面輸出流，通過(guò)
輸出流生成字符響應(yīng)。
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);
}
//設(shè)置響應(yīng)內(nèi)容的類(lèi)型
strong>response.setContentType("text/html;charset=utf-8");
// 獲取頁(yè)面輸出流
PrintWriter out = response.getWriter();
//直接生成響應(yīng)
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、轉(zhuǎn)向一個(gè)簡(jiǎn)單的jsp使用JSP頁(yè)面生成簡(jiǎn)單的響應(yīng)。
控制器將請(qǐng)求轉(zhuǎn)發(fā)到另外的JSP頁(yè)面，而JSP頁(yè)面僅僅負(fù)責(zé)輸出聊天信息
在這里需要一個(gè)jsp頁(yè)面來(lái)接收控制器發(fā)來(lái)的數(shù)據(jù)，也是服務(wù)器的響應(yīng)文本，而在
原來(lái)的頁(yè)面，只需：
1）創(chuàng)建XMLHttpRequest對(duì)象
2) 發(fā)送請(qǐng)求
3）接收服務(wù)器的響應(yīng)
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/>網(wǎng)站: a href=https://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
{
// 設(shè)置使用GBK字符集來(lái)解析請(qǐng)求參數(shù)
request.setCharacterEncoding("utf-8");
String msg = request.getParameter("chatMsg");
if ( msg != null !msg.equals(""))
{
// 取得當(dāng)前用戶(hù)
String user = (String)request.getSession(true)
.getAttribute("user");
// 調(diào)用ChatService的addMsg來(lái)添加聊天消息
ChatService.instance().addMsg(user , msg);
}
// 將全部聊天信息設(shè)置成request屬性
strong>request.setAttribute("chatList" ,
ChatService.instance().getMsg());/strong>
// 轉(zhuǎn)發(fā)到chatreply.jsp頁(yè)面
forward("/chatreply.jsp" , request , response);
}
// 執(zhí)行轉(zhuǎn)發(fā)請(qǐng)求的方法
private void forward(String url , HttpServletRequest request,
HttpServletResponse response)throws ServletException,IOException
{
// 執(zhí)行轉(zhuǎn)發(fā)
request.getRequestDispatcher(url)
.forward(request,response);
}
}
接收數(shù)據(jù)的頁(yè)面
%@ page contentType="text/html;charset=GBK" errorPage="error.jsp"%>
%-- 輸出當(dāng)前的聊天信息 --%>
${requestScope.chatList}
html頁(yè)面
!DOCTYPE html>
html>
head>
meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
meta http-equiv="Content-Type" content="text/html; charset=GBK" />
title>聊天頁(yè)面/title>
/head>
body onload="sendEmptyRequest();">
div style="width:780px;border:1px solid black;text-align:center">
h3>聊天頁(yè)面/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;
// 創(chuàng)建XMLHttpRequest對(duì)象
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)
{
}
}
}
}
// 發(fā)送請(qǐng)求函數(shù)
function sendRequest()
{
// input是個(gè)全局變量，就是用戶(hù)輸入聊天信息的單行文本框
var chatMsg = input.value;
// 完成XMLHttpRequest對(duì)象的初始化
createXMLHttpRequest();
// 定義發(fā)送請(qǐng)求的目標(biāo)URL
var url = "chat.do";
// 通過(guò)open方法取得與服務(wù)器的連接
// 發(fā)送POST請(qǐng)求
XMLHttpReq.open("POST", url, true);
// 設(shè)置請(qǐng)求頭-發(fā)送POST請(qǐng)求時(shí)需要該請(qǐng)求頭
XMLHttpReq.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// 指定XMLHttpRequest狀態(tài)改變時(shí)的處理函數(shù)
XMLHttpReq.onreadystatechange = processResponse;
// 清空輸入框的內(nèi)容
input.value = "";
// 發(fā)送請(qǐng)求，send的參數(shù)包含許多的key-value對(duì)。
// 即以：請(qǐng)求參數(shù)名=請(qǐng)求參數(shù)值 的形式發(fā)送請(qǐng)求參數(shù)。
XMLHttpReq.send("chatMsg=" + chatMsg);
}
//定時(shí)請(qǐng)求服務(wù)器
function sendEmptyRequest()
{
// 完成XMLHttpRequest對(duì)象的初始化
createXMLHttpRequest();
// 定義發(fā)送請(qǐng)求的目標(biāo)URL
var url = "chat.do";
// 發(fā)送POST請(qǐng)求
XMLHttpReq.open("POST", url, true);
// 設(shè)置請(qǐng)求頭-發(fā)送POST請(qǐng)求時(shí)需要該請(qǐng)求頭
XMLHttpReq.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// 指定XMLHttpRequest狀態(tài)改變時(shí)的處理函數(shù)
XMLHttpReq.onreadystatechange = processResponse;
// 發(fā)送請(qǐng)求,，不發(fā)送任何參數(shù)
XMLHttpReq.send(null);
// 指定0.8s之后再次發(fā)送請(qǐng)求
setTimeout("sendEmptyRequest()" , 800);
}
// 處理返回信息函數(shù)
function processResponse()
{
// 當(dāng)XMLHttpRequest讀取服務(wù)器響應(yīng)完成
if (XMLHttpReq.readyState == 4)
{
// 服務(wù)器響應(yīng)正確（當(dāng)服務(wù)器響應(yīng)正確時(shí)，返回值為200的狀態(tài)碼）
if (XMLHttpReq.status == 200)
{
// 使用chatArea多行文本域顯示服務(wù)器響應(yīng)的文本
document.getElementById("chatArea").value
= XMLHttpReq.responseText;
}
else
{
// 提示頁(yè)面不正常
window.alert("您所請(qǐng)求的頁(yè)面有異常。");
}
}
}
function enterHandler(event)
{
// 獲取用戶(hù)單擊鍵盤(pán)的“鍵值”
var keyCode = event.keyCode ? event.keyCode
: event.which ? event.which : event.charCode;
// 如果是回車(chē)鍵
if (keyCode == 13)
{
sendRequest();
}
}
/script>
/body>
/html>
以上這篇Ajax解決多余刷新的兩種方法(總結(jié))就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:- 純JS實(shí)現(xiàn)AJAX局部刷新功能
- ajax無(wú)刷新評(píng)論功能
- AJAX如何實(shí)現(xiàn)無(wú)刷新登錄功能
- ajax的分頁(yè)查詢(xún)示例（不刷新頁(yè)面）
