AJAX和JSP混合使用方法執行個體_AJAX相關

首先要知道AJAX 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。

什麼是 AJAX ？

AJAX = 非同步 JavaScript 和 XML。

AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術。AJAX 是一種用於建立快速動態網頁的技術。

通過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。

AJAX工作原理

AJAX請求

ajax請求是依靠XMLHttpRequest對象,因此在請求前先要建立其對象

var xmlhttp;//相容性寫法建立請求執行個體,IE5 6支援else裡面的方法if (window.XMLHttpRequest){xmlhttp = new XMLHttpRequest();}else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}

接著向伺服器發送請求

open函數有三個參數,請求方式,請求地址,請求是非同步還是同步
send(String)函數有一個參數,只有當請求方式為post的時候,String參數才需要帶上

那麼GET和POST的區別呢?

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

無法使用快取檔案（補救伺服器上的檔案或資料庫）
向伺服器發送大量資料（POST 沒有資料量限制）
發送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠

//設定傳送方式,地址,以及同步還是非同步xmlhttp.open("GET","Test.jsp?value="+escape(value),true);xmlhttp.onreadystatechange = callback;//狀態改變的時候執行這個函數,用來判斷是否請求完畢xmlhttp.send();//請求伺服器,如果使用post方式,則send裡面要帶上傳遞的參數//post方式/**xmlhttp.open("POST","Test.jsp",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("value="+value);*/

然後伺服器端處理並返回,這個放在執行個體裡面有具體代碼

在回呼函數callback中設定對返迴響應

onreadystatechange 儲存函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

0: 請求未初始化
1: 伺服器串連已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒

status 200: “OK”

404: 未找到頁面

相應伺服器的類型

responseText 獲得字串形式的響應資料。

responseXML 獲得 XML 形式的響應資料。 這個一般當open裡面的url為xml檔案的時候用

function callback(){//請求完成表示if(xmlhttp.readyState ==4 && xmlhttp.status==200){//設定相應操作}}}

總體來說就這幾個步驟,下面是詳細代碼

執行個體

首先建立一個文字框,用於測試使用者名稱,並且添加監聽事件onblur,意思是當失去焦點則執行,並在其後面建立個span空標籤,用來動態顯示資訊,表示名稱是否被佔用

<form method="post" action="AJAX.jsp"><table><tr><td><input type="text" id="userid" onblur="checkuser()" ><span style="color: red" id="spanid"></span></td></tr></table></form>

接下來是JS代碼,使用AJAX把輸入的內容發送到伺服器,伺服器來檢驗

var xmlhttp;function checkuser(){var value = document.getElementById("userid").value;//相容性寫法建立請求執行個體,IE5 6支援else裡面的方法if (window.XMLHttpRequest){xmlhttp = new XMLHttpRequest();}else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}//設定傳送方式,地址,以及同步還是非同步xmlhttp.open("GET","Test.jsp?value="+escape(value),true);xmlhttp.onreadystatechange = callback;//狀態改變的時候執行這個函數,用來判斷是否請求完畢xmlhttp.send();//請求伺服器}

然後伺服器端獲得資料後寫回

<%response.setHeader("Cache-Control","no-store");//HTTP1.1response.setHeader("Pragma","no-cache");//HTTP1.0response.setDateHeader("Expires",0);//禁止在伺服器中緩衝String value = request.getParameter("value");//擷取傳送過來的參數response.getWriter().write(value);//類比資料寫回%>

用戶端再回呼函數中處理伺服器寫回的資料

/*** 回呼函數*/function callback(){//請求完成表示if(xmlhttp.readyState ==4 && xmlhttp.status==200){alert(xmlhttp.responseText);//相應返回的text// alert(xmlhttp.responseXML);//相應返回的xmlif (xmlhttp.responseText){//這裡直接判斷不為空白,應該根據資料庫傳回值來進行不同的顯示var spanid = document.getElementById("spanid");spanid.innerHTML = "註冊成功";}}}

效果就是當輸入框失去焦點就立即判斷,當然實際判斷是要串連資料庫的,為了簡單就直接列印出來了

以上內容是針對AJAX和JSP混合使用方法執行個體，希望對大家有所協助！