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

Google 自訂搜尋

Goole 廣告

隨機相片
IMG_4431.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

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

討論區主頁 - 主題一覽 > 網頁設計 > [轉貼]JSP Servlet/Action實例等待 Loading效果源代碼
討論串 | 最新的先
前一個主題 | 下一個主題 | 頁尾
主題一覽的上方
發表者 討論內容
冷日
(冷日)		 發表時間：2011/12/12 3:26
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中文网
回覆
冷日
(冷日)		 發表時間：2011/12/12 3:47
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|