溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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=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
{
// 設置使用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 >
<h4>聊天頁面</h4>
<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如何解決多余刷新問題”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
