使用Ajax與伺服器通訊,達到非同步通訊效果

標籤：style   blog   http   java   color   使用   

　　AJAX = 非同步 JavaScript 和 XML，AJAX 是一種用於建立快速動態網頁的技術。通過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。

　　XMLHttpRequest 對象

　　　　所有現代瀏覽器均支援 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）,XMLHttpRequest 用於在後台與伺服器交換資料。所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支援 XMLHttpRequest 對象。如果支援，則建立 XMLHttpRequest 對象。如果不支援，則建立 ActiveXObject。代碼如下:

1 var xmlhttp;2 if (window.XMLHttpRequest)3   {// code for IE7+, Firefox, Chrome, Opera, Safari4   xmlhttp=new XMLHttpRequest();5   }6 else7   {// code for IE6, IE58   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");9   }

　　向伺服器發送請求

　　　　如需將請求發送到伺服器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

1 xmlhttp.open("GET","test1.txt",true);　　　　 //get表示請求方式,第二個參數是請求的位置,第三個參數表示是否非同步
2 xmlhttp.send();　　　　　　//send()函數表示將請求發送到伺服器,當請求方式為post時,可以帶有參數

　　注意:為了不得到緩衝的結果,請在url後面添加一個隨機數Math.random()。

　　如果需要像 HTML 表單那樣 POST 資料，請使用 setRequestHeader() 來添加 HTTP 頭。然後在 send() 方法中規定您希望發送的資料：

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

　　伺服器響應

　　　　如需獲得來自伺服器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。前者獲得字串形式的響應資料，後者或者XML形式的響應資料。

　　onreadystatechange 事件

　　　　當請求被發送到伺服器時，我們需要執行一些基於響應的任務，每當 readyState 改變時，就會觸發 onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態資訊。onreadystatechange屬性儲存區函數（或函數名），每當 readyState 屬性改變時，就會調用該函數；readyState存有XMLHttpRequest 的狀態。從 0 到 4 發生變化:0: 請求未初始化;1: 伺服器串連已建立;2: 請求已接收;3: 請求處理中;4: 請求已完成，且響應已就緒。status屬性中200表示"OK"，404表示未找到頁面。

　　　　在 onreadystatechange 事件中，我們規定當伺服器響應已做好被處理的準備時所執行的任務。

1 xmlhttp.onreadystatechange=function()2   {3   if (xmlhttp.readyState==4 && xmlhttp.status==200)4     {5     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;6     }7   }

　　下面示範一個Ajax非同步通訊的案例:(我希望使用者點擊載入全部之後,頁面會將資料庫中所存有的圖片全部載入出來)

 1 <script type="text/javascript"> 2 function loadMorePic(){ 3     var xmlhttp; 4     if (window.XMLHttpRequest) 5     {// code for IE7+, Firefox, Chrome, Opera, Safari 6         xmlhttp=new XMLHttpRequest(); 7     } 8     else 9     {// code for IE6, IE510         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");11     }12     xmlhttp.onreadystatechange=function()13     {14         if (xmlhttp.readyState==4 && xmlhttp.status==200)15         {16             document.getElementById("myDiv").innerHTML=xmlhttp.responseText;17         }18     }19     xmlhttp.open("POST","123456.jsp",true);20     xmlhttp.send();21 }22 </script>

　　HTML部分:

1 <div id="myDiv"></div>2 <a style="color: blue" onclick="loadMorePic()">載入全部</a>

　　之後只需要在123456.jsp頁面中將資料庫中所有的圖片資訊查詢出來使用out.print()將資訊返回到原頁面就行了.簡單吧~~

1 out.print("<img src=‘/jy/file/scenery/"+scenery.getPath()+"‘ height=‘155px‘ width=‘210px‘>");