Ajax學習內容 Java——Servlet
Ajax部分代碼,沒有使用Ajax框架處理。
<script type="text/javascript">
var xmlHttp;
function createXmlHttpRequest(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}
//用戶輸入完用戶名,將光標移動到密碼框輸入密碼時,驗證用戶名是否被占用
function checkUser(){
createXmlHttpRequest();
var userName = document.getElementById("userName").value;
/*
如何此處為get提交方式,應該寫成:
xmlHttp.open("get","checkU?userName" + userName,true);
去除 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
把 xmlHttp.send("userName=" + userName); 修改成 xmlHttp.send(null);
已URL行駛傳遞過去。
*/
xmlHttp.open("post","checkU",true);//Ajax核心方法之1:指定發送方式,指定發送路徑
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//定義一個函數接收返回數據
xmlHttp.onreadystatechange = function(){
//注意狀態值,需要為4的時候才能可以滿足條件
if(xmlHttp.readyState == 4){
document.getElementById("checkResult").innerHTML = xmlHttp.responseText;//接收返回結果
}
}
xmlHttp.send("userName=" + userName);//發送值
/*
發送值在方法onreadystatechange后,必須這么去寫,請注意
*/
}
</script>
-----------------------------------------------------------------------------------
HTML部分代碼
<!-- 用一個span標簽來處理加載內容 -->
<input type="text" name="userName" id="userName" onblur="checkUser();"/><span id="checkResult"></span><br/>
-------------------------------------------------------------------------------------
Servlet代碼
response.setCharacterEncoding("utf-8");
//取的傳入的請求參數
String userName = request.getParameter("userName");
//判斷是否為abc,然后響應輸出信息到界面
if(!userName.equals("abc")){
response.getWriter().print("恭喜您,用戶名可以使用!");
}else{
response.getWriter().print("對不起,用戶名已被占用!");
}