Ajax,(Asynchronous Javascript And XmL),可以實現在不刷新整個網頁的情況下對頁面進行局部操作。
比如在註冊信息的時候,當用戶填寫完用戶名後,可以立即對該用戶名進行校驗,而不必等待頁面提交之後才進行。
好了,下面寫具體的代碼。
首先編寫一個簡單的註冊頁面。
<body>
<input type = "text" id = "userNameId" placeholder = "請輸入用戶名" onblur = "checkName()"/><span id = "showNameId"></span>
</body>
然後寫checkName()方法。
<head>
<script type = "text/javascript">
function checkName(){
/*1.實例化xml對象
*XMLHttpRequest對象可以幫助實現在不刷新整個頁面的情況下交換數據,我對這個對象是如何實現的很感興趣,以後會研究現在用它就好了。
*/
var xmlhttp = new XMLHttpRequest();
//2.設置監聽器
xmlhttp.onreadystatechange = function(){
//這裏接受從頁面返回的信息,並進行處理。
/*5種狀態
* 0:沒有建立連接
* 1:請求已經建立但還沒有發出
* 2:請求已經發出,正在處理
* 3:請求已經出來,服務器還沒響應
* 4:響應已完成,可以訪問服務器兵使用它
*/
if(xmlhttp.readyState == 4)
var data = xmlhttp.responseText;
//接下來就是處理了
if(data == fail)
document.getElementById("showNameId").InnerHTML = "<font>用戶名重複</font>"
}
/*3.打開通道建立連接
*value爲任意類型數據,這裏爲用戶名。
*第三個參數爲boolean類型,如果爲true,則異步執行表示腳本會在send方法之後繼續執行,不必等待瀏覽器的響應。
*如果爲false,則表示失敗對其他代碼無影響不過這種情況很少見。一般用true
*/
xmlhttp.open("OneServlet","value",true);
//4.設置請求頭部信息
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencode");
//5.發送數據
var userNameValue = document.getElementById("userNameId").value;
xmlhttp.send("userName="+userNameValue);
}
</script>
</head>
然後建立Servlet進行處理。使用request.getParamater("userName")來接值,然後去數據庫中比對。
使用PrintWriter writer = response.getWriter();
writer.print("success or fail");來傳回值。在監聽器中處理成功或者失敗的狀況