JavaScript-局部重新整理__Java

JavaScript-局部重新整理 概述

         要實現局部重新整理，一般首先是將要重新整理的局部內容用一個有確定ID的div標籤包起重新整理方式一般分為兩種定時重新整理和事件重新整理。本文主要講解局部重新整理原理、事件重新整理、局部重新整理和局部重新整理的推廣用法。

  重新整理原理

         重新整理主要是通過一個JavaScript函數，和一個網頁檔案（.php、.html、.asp等）來實現這個

JS函數實現的功能主要是：

1、  通過要重新整理的div的ID來鎖定被重新整理div

2、  指定URL並將指定的URL裡面顯示的內容顯示在被重新整理的div上

3、  通過GET通道或者POST通道給指定URL傳遞參數

（指定的URL一般是一個網頁檔案 .php、.html、.asp等的路徑）

<script type=”text/javascript”> function loadXMLDoc(){     var xmlhttp; if (window.XMLHttpRequest){           // code for IE7+, Firefox, Chrome, Opera, Safari          xmlhttp=new XMLHttpRequest(); }else{                                     // code for IE6, IE5          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");     }     xmlhttp.onreadystatechange=function(){     if (xmlhttp.readyState==4&& xmlhttp.status==200){       document.getElementById("myDiv").innerHTML=xmlhttp.responseText; }                             // 1、鎖定被重新整理div } xmlhttp.open("GET","/dirname/file.html?a=123&b=456",true);                 // 2、指定URL並將指定的URL裡面顯示的內容顯示在被重新整理的div上                 // 3、通過GET通道傳參 xmlhttp.send(); } </script>

用POST通道傳遞參數請看：

         http://www.w3school.com.cn/tiy/t.asp?f=ajax_post2

         也可參考以下代碼

xmlhttp.open("POST","/ajax/demo_post2.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates");

  事件重新整理

         事件重新整理事實上就是利用了標籤的事件屬性， 比如<button>的onclick事件，通過這個事件來調用局部重新整理的函數如：

<button onclick="loadXMLDoc()">確定</button>

定時重新整理

         定時重新整理需要用到一個特殊的函數， 這個函數的功能就是經過一段時間後重新執行這個函數

         setTimeout('loadXMLDoc()',2000); 單位是毫秒

下面舉個定時重新整理的例子

<script type="text/javascript">     flash_todonum();             // 先執行一次重新整理函數     function flash_todonum(){         var xmlhttp;         if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari             xmlhttp=new XMLHttpRequest();         }else{// code for IE6, IE5             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");         }         xmlhttp.onreadystatechange=function(){             if (xmlhttp.readyState==4&& xmlhttp.status==200){                 document.getElementById("todo_num").innerHTML=xmlhttp.responseText;             }         }         xmlhttp.open("POST","index.php?frame/"+"todo_num",true);         xmlhttp.send();         setTimeout('flash_todonum()',2000);  // 兩秒後重新執行該函數     } </script>

推廣

    重新整理div的URL是可以進行資料處理的， 那麼可以利用一個空的div（什麼都不顯示） 通過事件，傳參並進行資料處理

    用jquery（JavaScript）庫，會更方便一下，代碼簡潔一些。