**1.傳統javascript使用ajax方式：**
? XMLHttpRequest對象：所有現代瀏覽器均支持XMLHttpRequest對象，XMLHttpRequest用于在后臺與服務器交換數據。
~~~js
function getInfo()
{
var xmlhttp;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
xmlhttp=new XMLHttpRequest();
}else{ // IE6, IE5 瀏覽器執行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var str = xmlhttp.responseText;
alert(str);
}
}
xmlhttp.open("GET","/url",true);
xmlhttp.send();
}
~~~
使用 A JAX 的過程可以類比平常我們訪問網頁過程
- 創建一個 XMLHttpRequest 類型的對象 —— 相當于打開了一個瀏覽器
var xmlhttp=new XMLHttpRequest();
- 打開與一個網址之間的連接 —— 相當于在地址欄輸入訪問地址
xmlhttp.open("GET","/url",true);
- 通過連接發送一次請求 —— 相當于回車或者點擊訪問發送請求
xmlhttp.send();
- 指定 xhr 狀態變化事件處理函數 —— 相當于處理網頁呈現后的操作
> xmlhttp.onreadystatechange = function () {
> //通過 xmlhttp 的 readyState 判斷此次請求的響應是否接收完成
> if (this.readyState === 4) {
> //通過 xmlhttp的 responseText 獲取到響應的響應體
> console.log(this)
> }
readyState從 0 到 4 發生變化。
- 0: 請求未初始化
- 1: 服務器連接已建立
- 2: 請求已接收
- 3: 請求處理中
- 4: 請求已完成，且響應已就緒
status為訪問狀態，404 頁面沒找到， 500 內部錯誤， 200訪問正常等。
- 1xx? -消息: 請求正在處理，請稍后。。。
- 2xx -成功處理
- 3xx -重定向到其他地方: 需要客戶端再次發送請求
- 4xx -客戶端錯誤，eg: 非法的資源請求，禁止訪問
- 5xx -服務器段錯誤 ，eg: 服務器拋出異常
在Java中將處理結果的字符串，一般是以JSON字符串返回，存儲在前端xmlhttp.responseText中。
<br/>
**2.jQuery寫法：**
jquery將上述寫法進行了封裝，使得我們更加簡單和方便的去使用ajax。常見用法：
~~~js
$.ajax(function(){
type: "post",
url : "url",
data: {"name":"Peter"},
success:function(data, status){
//處理
},
error:function(){
//error有三個參數，可以依據情況需要寫
}
~~~
<br/>
**3.$.ajax()**
```
window.onload = function(){
$.ajax({
type:"get",
url:"xx",
dataType:"json",
success:function(data){
console.log(data);
},
error:function(xhr){
document.body.innerHTML = xhr.status;
}
})
```
<br/>
**4.$.get()**
```
//$.get()語法
$.get(url,function(data,status){
//獲取的data是一個JS對象
}).fail(function(data){
console.log(data.status)
})
```
<br/>
**5.$.post()**
```
//$.post()語法
$.post(url,data,function(data,status){
}).fail(function(data){
console.log(data.status)
})
```
<br/>
**6.應用**
---
~~~html
public class ValidSameServlet extends HttpServlet {
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {
//獲得 ajax 發送的數據
String name = req.getParameter("username");
if("12345".equals(name{
resp.getWriter().print("yes");
}else{
resp.getWriter().print("no");
}
}
}
<script type="text/javascript">
$(function(){
$("form input").blur(function(){
//離開焦點的 input 是哪個這個 this 就是哪個對象
var obj = $(this);
var val = obj.val();
var reg = obj.attr("reg");
var tip = obj.attr("tip");
var name = obj.attr("name");
var regObj = new RegExp(reg);
if(!regObj.test(val)){
//獲得 username 緊挨著的下一個dom的jQuery對象
var spanObj = obj.next();
spanObj.html("<font color='red'>"+tip+"</font>");
}else{
var spanObj = obj.next();
if(name == "username"){
//ajax 的重復性校驗
var result = validSame(val);
if(result == "yes"){
spanObj.html("<font color='red'>用戶名已經存在</font>");
}else{
spanObj.html("");
}
}else{
spanObj.html("");
}
}
});
/*查詢用戶名是否重復，no 不重復，yes 重復*/
function validSame(val){
var isSame = "no";
$.ajax({
type:'post',
url:'${path}/validsame',
async:false,
data:{username:val},
dataType:"text",
success:function(result){
isSame = result;
},
error:function(){
alert("系統錯誤");
}
});
return isSame;
}
$("form input").focus(function(){
$(this).css("background","yellow");
});
//一邊輸入一邊校驗。
$("form input").keyup(function(event){
/* var num = window.event?event.keyCode : event.which;var charStr = String.fromCharCode(num); */
var obj = $(this);
var val = obj.val();
var reg = obj.attr("reg");
var tip = obj.attr("tip");
var name = obj.attr("name");
var regObj = new RegExp(reg);
if(!regObj.test(val)){
//獲得 username 緊挨著的下一個 dom 的 jQuery 對象
var spanObj = obj.next();
spanObj.html("<font color='red'>"+tip+"</font>");
}else{
var spanObj = obj.next();
if(name == "username"){
//ajax 的重復性校驗
var result = validSame(val);
if(result == "yes"){
spanObj.html("<font color='red'>用戶名已經存在</font>");
}else{
spanObj.html("");
}
}else{
spanObj.html("");
}
}
});
/* $("#regist").click(function(){
//設置一個提交表單的標志
var isSubmit = true;
$("form input").each(function(){
var obj = $(this);
var val = obj.val();
var reg = obj.attr("reg");
var tip = obj.attr("tip");
var regObj = new RegExp(reg);
if(!regObj.test(val)){
//獲得 username 緊挨著的下一個 dom 的 jQuery 對象
var spanObj = obj.next();
spanObj.html("<font color='red'>"+tip+"</font>");
isSubmit =false;
}else{
var spanObj = obj.next();
spanObj.html("");
}
})
if(isSubmit){
//表單提交
$("#myform").submit();
}
}) */
$("#myform").submit(function(){
var isSubmit =true;
$("form input").each(function(){
var obj = $(this);
var val = obj.val();
var reg = obj.attr("reg");
var tip = obj.attr("tip");
var name = obj.attr("name");
var regObj = new RegExp(reg);
if(!regObj.test(val)){
//獲得 username 緊挨著的下一個 dom 的 jQuery 對象
var spanObj = obj.next();
spanObj.html("<font color='red'>"+tip+"</font>");
isSubmit =false;
}else{
var spanObj = obj.next();
if(name == "username"){
//ajax 的重復性校驗
var result = validSame(val);
if(result == "yes"){
spanObj.html("<font color='red'>用戶名已經存在</font>");
isSubmit =false;
}else{
spanObj.html("");
}
}else{
spanObj.html("");
}
}
})
//阻止表單提交，如果是 true 就允許表單提交
return isSubmit;
});
$("#gender").change(function(){
//獲得改變后的值
var val = $(this).val();
alert(val)
});
$("body").keydown(function(event){
var num = window.event?event.keyCode : event.which;
if(num == 13){
var isSubmit = true;
$("form input").each(function(){
var obj = $(this);
var val = obj.val();
var reg = obj.attr("reg");
var tip = obj.attr("tip");
var name = obj.attr("name");
var regObj = new RegExp(reg);
if(!regObj.test(val)){
//獲得 username 緊挨著的下一個 dom 的 jQuery 對象
var spanObj = obj.next();
spanObj.html("<fontcolor='red'>"+tip+"</font>");
isSubmit =false;
}else{
var spanObj = obj.next();
if(name == "username"){
//ajax 的重復性校驗
var result = validSame(val);
if(result == "yes"){
spanObj.html("<font color='red'>用戶名已經存在</font>");
isSubmit =false;
}else{
spanObj.html("");
}
}else{
spanObj.html("");
}
}
})
if(isSubmit){
//表單提交
$("#myform").submit();
}
}
});
})
</script>
</head>
<body><form id="myform" action="${path }/jsp2/tab.jsp" method="post">
<p>
用戶名：<input id="username" name="username" type="text"reg="^\d{3,5}$"
tip="請輸入 3 到 5 位的數字">
<span></span>
</p>
<p>密碼：<input name="password" type="password" reg="^\w{6,8}$" tip="請輸入 6 到 8位的英文或者數字或_"><span></span>
</p>
<p>地址：<input name="address" type="text" reg="^.{0,50}$" tip="請輸入 50 個字符"><span></span></p>
<p>性別：<select id="gender">
<option value="1">男</option>
<option value="2">女</option>
</select><span></span>
</p>
<p><input type="submit" value="注冊" id="regist"></p>
</form>
</body>
~~~
