DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 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解決多余刷新的兩種方法(總結)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved