發表者討論內容

冷日
(冷日) 發表時間：2011/12/12 3:47

Webmaster

註冊日: 2008/2/19
來自:
發表數: 15771

[分享]冷日的 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回來的東西重新寫出一次

回覆

平面展開

前一個主題 | 下一個主題 | |

| |

討論串

[轉貼]JSP Servlet/Action實例等待 Loading效果源代碼 (冷日
(冷日), 2011/12/12 3:26)
» [分享]冷日的 JSP Action 等待（Loading）效果JavaScript（AJAX）程式碼範本 (冷日
(冷日), 2011/12/12 3:47)

發表新主題

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

討論串