茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1664643 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
IMG_60D_00016.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

網頁設計 : [轉貼]JSP Servlet/Action實例等待 Loading效果源代碼

發表者 討論內容
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15766
[轉貼]JSP Servlet/Action實例等待 Loading效果源代碼

JSP Servlet/Action實例等待 Loading效果源代碼

教程由 JAVA中文網整理校對發佈(javaweb.cc)

有的時候一些操作是很耗費時間的,在這個過程中應該給用戶一個等待畫面,剛開始弄西拼八湊了一個用戶登陸的效果,

有的地方處理應該有更好的辦法。希望高手指點,謝謝哈~~

開發工具: Eclipse 3.3.1.1 + MyEclipse 6.0.1
數據庫: MySQL 5
服務器: Resin 3

這裡是提交請求後檢測是否處理完成

if(XMLHttpReq.readyState == 4){
if(XMLHttpReq.status == 200){
var page = XMLHttpReq.responseXML.getElementsByTagName("page")[0].firstChild.data;
location.href = page;
} else {
window.alert("請求錯誤!");
}
} else {
mask.style.visibility = 'visible';
massage_box.style.visibility = 'visible'
}

如果登陸的用戶無法通過驗證那就跳轉到另一個頁面,並顯示信息。

session.setAttribute("message", "無此用戶!");
out.println("<tking>");
out.println("<page>error.jsp</page>");
out.println("</tking>");

消息顯示頁面


if (session.getAttribute("message") != null) {
out.println(session.getAttribute("message"));
session.removeAttribute("message");
}

這裡是通過js跳轉的頁面,傳遞數據不知道有沒有更好的辦法?我暫時先放到session裡了,然後用完把它刪除了...

希望高手指點一下~

一下是效果圖

 




JSP Servlet/Action实例等待 Loading效果源代码(本教程仅供研究和学习,不代表 JAVA中文网观点)

本篇文章链接地址:http://www.javaweb.cc/other/code/27905.shtml
如需转载请注明出自JAVA中文网:http://www.javaweb.cc/

原文出處: JSP Servlet/Action实例等待 Loading效果源代码_Java源代码_Java中文网
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15766
[分享]冷日的 JSP Action 等待(Loading)效果JavaScript(AJAX)程式碼範本
我們經常要使用到檢索、查詢或是資料庫處理。
但有時候系統繁忙或是資料量龐大時,畫面常常就是一片空白!?
為了要讓用戶不會誤以為系統當機了,Loading(或是Searching)提示就很重要囉。
可是上一篇實做上有點不足,至少XMLHttpReq這個東西不是預設就有低(可以參閱Ajax簡介)!

後來參閱了這一篇:为什么我的 XMLHttpReq.readyState 总是返回1 - Java / Java EE以後,冷日整理了一個自己的版本,這裡作個紀錄。
先來看看JavaScript的所有Code部份:
<script type="text/javascript">
  var XMLHttpReq;
  var targetSeId;
  function createXMLHttpRequest(){
    if(window.XMLHttpRequest) {//Mozilla
      XMLHttpReq=new XMLHttpRequest();
    }
    else if(window.ActiveXObject){//IE 瀏覽器
      try {
        XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP ");
      } catch (e){
        try{
          XMLHttpReq=new ActiveXObject("Micrsost.XMLHTTP ");
        }catch(e){}
      }
    }
    if(!XMLHttpReq){
      alert("無法創建 XMLHttpRequest 對象!");
    }
  }
  function loadfirst(){
//    alert("開始加載...");
    document.getElementById("loading").style.visibility = 'visible';
    var url="/FullTextSearch.jsp";
    var param = document.getElementById("searchString").value;
//    alert(param);
    createXMLHttpRequest();
    if(XMLHttpReq){
      XMLHttpReq.open("POST",url,true);
//      alert("open");
      XMLHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      XMLHttpReq.send("searchString=" + param);
      XMLHttpReq.onreadystatechange=loadcallback;
    }
  }
  function loadcallback(){
//    alert("數據返回...");
    if(XMLHttpReq.readyState==4){
      if(XMLHttpReq.status==200){
//        alert(XMLHttpReq.responseText);
		  document.write(XMLHttpReq.responseText);
      }else{
        alert("返回不正常"+XMLHttpReq.statusText);
      }
    }
  }
</script>



分段說明:
  var XMLHttpReq;
  var targetSeId;
  function createXMLHttpRequest(){
    if(window.XMLHttpRequest) {//Mozilla
      XMLHttpReq=new XMLHttpRequest();
    }
    else if(window.ActiveXObject){//IE 瀏覽器
      try {
        XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP ");
      } catch (e){
        try{
          XMLHttpReq=new ActiveXObject("Micrsost.XMLHTTP ");
        }catch(e){}
      }
    }
    if(!XMLHttpReq){
      alert("無法創建 XMLHttpRequest 對象!");
    }
  }

上面這一段基本上,就是自己實做一個原生的AJAX(XMLHttpReq)。


  function loadfirst(){
//    alert("開始加載...");
    document.getElementById("loading").style.visibility = 'visible';
    var url="/FullTextSearch.jsp";
    var param = document.getElementById("searchString").value;
//    alert(param);
    createXMLHttpRequest();
    if(XMLHttpReq){
      XMLHttpReq.open("POST",url,true);
//      alert("open");
      XMLHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      XMLHttpReq.send("searchString=" + param);
      XMLHttpReq.onreadystatechange=loadcallback;
    }
  }

然後把原本的Submit改用loadfirst function來處理。
這裡比較要注意的幾點:
1.XMLHttpReq是可以用POST低!(大多數的範例都是GET)
2.XMLHttpReq要走POST的話,記得要加『setRequestHeader』!
3.XMLHttpReq POST 的時候透過send這個method傳遞參數。
4.最後告訴瀏覽器,當XMLHttpReq搞定的時候,去呼叫loadcallback。


  function loadcallback(){
//    alert("數據返回...");
    if(XMLHttpReq.readyState==4){
      if(XMLHttpReq.status==200){
//        alert(XMLHttpReq.responseText);
		      document.write(XMLHttpReq.responseText);
      }else{
        alert("返回不正常"+XMLHttpReq.statusText);
      }
    }
  }

這裡就是負責把船回來的東西給Show出來囉。
最懶得方法就是像冷日這一招:document.write!
把所有XMLHttpReq回來的東西重新寫出一次
前一個主題 | 下一個主題 | 頁首 | | |



Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|