控制器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解決多余刷新的兩種方法(總結)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。