關於頁面的用戶端翻頁功能的實現

來源:互聯網
上載者:User
翻頁|用戶端|頁面   前幾天老闆要求實現頁面局步重新整理的功能  在網上查了很久。 發現,  我們在做網頁的局部動態重新整理的功能的時候常用的方法,是iframe和 FrameSet  ,不過這兩種方法也有他的弊端。那就是頁面的大小不好控制的問題。於是我想到了用javascript 中的 xmlhttp對象來動態擷取其他頁面的資訊作為本頁面的一部分的方法。於是按照這個方法做了一個,效果還不錯。下面把主要思路寫下來 ,供大家參考!

  我得思路是這樣的,在首頁面上編寫一段javascript的小函數,執行的功能是利用xmlhttp對象根據所給的參數獲得另一個頁面中的資料頁面,然後動態顯示在首頁面中。看上去好像是沒有什麼問題,但是在使用者互動上就不是那麼好控制,因為在首頁面上顯示的是純的html的代碼,但是子頁面上的互動功能卻不好實現了。於是我就想到了在子頁面上來調用首頁面的javascript代碼,同時給他相應的參數。這樣,既實現了動態局部重新整理,又保證了子頁面的使用者互動性。

  主要代碼如下 :

  在首頁面中用這段javascript 代碼擷取子頁面的代碼

<script language=javascript>
   var oDiv
   var xh
   function getPageDataFromUrl(url,div)
   {
   oDiv = div
   oDiv.innerHTML = "正在載入資料,請稍侯......."
   xh = new ActiveXObject("Microsoft.XMLHTTP")
   xh.onreadystatechange = getReady
   xh.open("POST",url,"false");
   xh.send();
   }
   function getReady()
   {
    if(xh.readyState==4)
    {
     if(xh.status==200)
     {
      strTest = xh.responseText ;    
         re = /form/;
      strTest=strTest.replace(re,"ggggg");
      oDiv.innerHTML  =  strTest;
     }
     else
     {
      oDiv.innerHTML = "由於:" + xh.statusText+"資料載入失敗";
     }
    }
   }
  </script>

<body onload='getPageDataFromUrl("PostClubIndexList.aspx",document.all.ListBox);>

  然後,在自頁面中用

<A class="a_hei00" href="#" ?Page=1"%>',document.all.ListBox)">首頁</A></TD>

  的代碼來回調首頁面中的javascript函數,重新傳給url串連 這樣就實現了頁面的用戶端翻頁的效果。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。