jsp中的代碼：
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
("#username").blur(
function() {
//2.創(chuàng)建XMLHttpRequest對(duì)象
if (window.XMLHttpRequest) {
//如果XMLHttmRequest為true 為非ie瀏覽器
req = new XMLHttpRequest();
} else {
//如果XMLHttmRequest為false 為ie瀏覽器
req = new ActiveXObject("Microsoft.XMLHTTP");
}
//3.要發(fā)送的地址
var url = "loginServlet?flag=validate";
//4.調(diào)用XMLHttpRequest對(duì)象的open方法
/** open有三個(gè)常用的參數(shù)
參數(shù)1:請(qǐng)求的方式(get、post)
參數(shù)2：請(qǐng)求的路徑(url)
參數(shù)3:同步(false)異步(true)
/
req.open("post", url, false);
//設(shè)定一個(gè)請(qǐng)求頭信息
req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//5.設(shè)定回調(diào)函數(shù)
req.onreadystatechange = updatePage;
//6.發(fā)送請(qǐng)求
/*send方法參數(shù)可有可無
如果沒有參數(shù)則代表沒有值發(fā)往后臺(tái)
如果有參數(shù)則代表有值傳遞到后臺(tái)進(jìn)行處理
*/
req.send("username="+("#sp1").html("用戶名重復(fù)");
}else{
$("#sp1").html("用戶名不重復(fù)");
}
}
}
}
});
</script>
<body>
<form action="loginServlet" method="post">
用戶名:<input type="text" name="username" id="username">
<span id="sp1"></span>
<br />
密碼 :<input type="password" name="password">
<br />
<input type="submit" value="提交">
</form>
</body>
Servlet中的代碼：
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//獲取標(biāo)志位flag
String flag = request.getParameter("flag");
if ("validate".equals(flag)) {
// ajax唯一性校驗(yàn)
String username = request.getParameter("username");
boolean val = LoginServiceImpl.getInstance().vali(username);
/**
* ajax請(qǐng)求的數(shù)據(jù)類型
* 1.text（存文本）
* 2.xml
* 3.json格式
*/
//設(shè)置文本類型
response.setContentType("text/html");
PrintWriter writer = response.getWriter();
writer.print(val);
writer.close();
} else {
//正常form表單登錄
// 獲取表單參數(shù)
String username = request.getParameter("username");
String password = request.getParameter("password");
User u = LoginServiceImpl.getInstance().doLogin(username, password);
if (u != null) {
// 證明有用戶
} else {
}
}
load()方法提供三個(gè)參數(shù)：
1.url地址 (必須存在)
2.data：要發(fā)送的數(shù)據(jù)（ 用來發(fā)送key/value的值 可有可無）
3.callback：回調(diào)函數(shù)(可有可無)
load作用：通過ajax請(qǐng)求從服務(wù)器加載數(shù)據(jù)，把返回的數(shù)據(jù)放到指定的元素中
代碼
（1）load只寫一個(gè)參數(shù) NewFile.html代表一個(gè)靜態(tài)頁面中的內(nèi)容
<script type="text/javascript">
("#btn").click(function() {
("#text").load("NewFile.html #demo") //獲取頁面部分內(nèi)容
});
});
<body>
<input type="button" value="ajax獲取" id="btn">
<div id="text"></div>
</body>
（2）load寫三個(gè)參數(shù)
<script type="text/javascript">
("#btn").click(function(){
$("#box1").load("text.jsp",{"username":"張三"},function(responseTest,status,xhr){
alert(responseTest); //返回的文本內(nèi)容
alert(status); //響應(yīng)的Http狀態(tài)(返回是scuess還是error)
alert(xhr.responseText) //返回的文本內(nèi)容
alert(xhr.readyState);//(4)判斷服務(wù)器是否完全接收到請(qǐng)求
alert(xhr.status) //(200)代表服務(wù)器返回的狀態(tài)碼，完全正確響應(yīng)
alert.(xhr.statusText)
})
});
});
</script>
<body>
用戶：<input type="button" value="ajax獲取" id="btn">
<div id="box1"></div>
</body>
（3）ajax最終版本
（post寫法）
<script type="text/javascript">
("#username").blur(function() {
("#username").val(),
function(data){//data接收來自后臺(tái)相應(yīng)的數(shù)據(jù) data是變量
if(data == "true"){
("#sp1").html("不重復(fù)");
}
})
});
});
</script>
（ajax寫法）
<script type="text/javascript">
("#username").blur(function() {
//method傳遞方式,url地址必須要有
("#username").val(),
success:function(data){
if(data=="true"){
("#sp1").html("不重復(fù)");
}
/* for(var i = 0 ;i<data.length ; i++){
alert(data[i].username)
alert(data[i].age)
} */
}
})
});
});
</script>
<body>
<form action="loginServlet" method="post">
用戶名:<input type="text" name="username" id="username">
<span id="sp1"></span>
<br />
密碼 :<input type="password" name="password">
<br />
<input type="submit" value="提交">
</form>
</body>
（ajax 中JSON請(qǐng)求數(shù)據(jù)類型的形式最常用）
/**
* ajax請(qǐng)求的數(shù)據(jù)類型
* 1.text（存文本）
* 2.xml
* 3.json格式
*/
response.setContentType("text/html");
PrintWriter writer = response.getWriter();
writer.print(val);
writer.close();
//反一個(gè)json格式
response.setContentType("application/json");
PrintWriter writer = response.getWriter();
writer.print("[{"username":"xc","age":12},{"username":"xsdd","age":15},{"username":"xdsad","age":22}]");
