Ajax基礎使用與jquery下使用ajax教程
ajax是目前專案上使用
比較頻繁的技術，非常的實用。本人目前做的專案中幾乎都使用了ajax去後臺請求資料。現在講本人的學習筆記以及練習使用心得分享給大家，純手打，大家多多支援。本分享為基礎的ajax使用方法，掌握了基礎使用，在根據實際業務來適當的調整引數的設定，請求成功方法的編寫。就完成了ajax這個強大的使用。
一：html中ajax的使用
通過一個小domo幫助大家理解ajax的使用：首頁登入動態重新整理驗證賬號是否存在，這裡不從資料庫抽取資料了，直接將已存在的賬號寫死來驗證。
通過AJAX （Asynchronous J AvaScript and XML）實現非同步重新整理。
1. 首先寫我們的登入頁面：
<body>
賬號：<input type="text" onkeyup="check()" id="account"></input>
<span id="checkResult"></span>
</body>
<script type="text/javascript" src="../js/ajax.js"></script>解析：onkeyup屬性是：鍵盤按下彈起之後的響應，回去執行引用的js檔案中check()方法。
span是用來顯示是否存在的文字提示。
截圖如下：
2. 此時當輸入賬號時，會響應ajax.js中的check方法。
var xmlhttp; function check() { var name = document.getElementById("account").value; var url = "http://localhost:8080/test1/html/checkName.jsp?name="+name; xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = checkResult; xmlhttp.open("GET",url,true); xmlhttp.send(null); } function checkResult() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) document.getElementById("checkResult").innerHTML=xmlhttp.responseText; }
分部解析：
①整體過程為瀏覽器建立XMLHTTPRequest物件，並設定好響應函式，設定好伺服器訪問的頁面地址，執行訪問。
伺服器端呼叫響應函式，判斷是否響應成功 ，獲取文字，顯示文字。
②建立xmlhttp為物件 XMLHTTPRequest，通過這個物件與伺服器端實現動態互動效果；
③當ajax請求傳到伺服器，並完成響應之後，瀏覽器端需要接收這個響應，通過onreadystatechange完成伺服器端的接收。並將這個接收操作通過checkResult方法來完成 。也就是說，伺服器端處理了這個ajax請求，並訪問了url地址，拿到了結果。此時返回到瀏覽器，通過onreadystatechange呼叫checkResult方法，判斷伺服器端狀態為（請求已完成，響應已就緒）並且200（響應成功），此時將span文字框中插入伺服器返回來的結果資訊。
④.open函式設定將要訪問的地址。
⑤.send函式為傳送給伺服器。null表示沒有引數，只有用POST請求時，才可能用到引數。
⑥checkResult處理伺服器的響應結果。
3. 最後為檢驗頁面的程式碼，使用JSP。程式碼如下：
<body>
<%
String name = request.getParameter("name");
if("吳先生".equals(name))
out.print("<font color='red'>已經存在</font>");
else
out.print("可以使用");
%>
</body>
完成了動態重新整理驗證。
二：通過jquery完成ajax請求重新整理驗證：
首先匯入jquery.main.js檔案。
1. 在jquery中通過$.ajax({param1.param2,param3})實現ajax請求。
前端頁面同樣，有輸入框和提示框組成。
2. 在js中程式碼如下：
$(function(){
$("#in1").keyup(function() {
var page = "../html/checkName.jsp";
var value = $(this).val();
$.ajax({
url:page,
data:{"name":value},
success:function(result) {
$("#check").html(result);
}
});
});
});分佈解析：
$(function() {})為預載入函式，學習過jquery的同志們應該都懂。
page為我們需要請求的頁面，此URL可以為前端頁面不變，也可根據實際專案需求設定為後端請求地址。
data為我們需要傳遞的引數以及引數的值。
success為請求成功後，對應的響應函式，也就相當於onreadystatechange對應的checkResult方法的作用。
成功實現如下
3. 在jquery中提交ajax的方式還有很多種，常見的有$.get（專門提交get請求）、$.post（專門提交post請求）、load（最簡易的ajax請求），均可實現ajax請求。程式碼如下：
$(function(){
$("#in1").keyup(function() {
var value = $(this).val();
var page = "../html/checkName.jsp?name="+value;
/* $.ajax({
url:page,
data:{"name":value},
success:function(result) {
$("#check").html(result);
}
});*/ //$.ajax方式提交
/* $.get(
page,
{"name":value},
function(result) {
$("#check").html(result);
}
)*/ //$.get方式提交
$("#check").load(page);
//load方式提交，需要注意的是：$("#check")為顯示提示資訊的文字框，此時直接將輸入框中的值通過page的URL中傳遞引數到請求頁面中。load的引數可以有兩個$("#**").load(page,[date]);
});
});4. 有時候我們需要提交驗證多個輸入框的內容，此時可以使用serialize()把輸入的資料格式化成字串，然後傳遞到URL中。
程式碼如下：
<a href="http://localhost:8080/test1/html/checkName.jsp">http://localhost:8080/test1/html/checkName.jsp</a>
<form id="form">
姓名：<input type="text" id="name" name="name"><br/>
年齡<input type="text" id="age" name="age"><br/>
性別<input type="text" id="sex" name="sex">
</form> $("input").keyup(function() {
var data = $("#form").serialize();
var url = "http://localhost:8080/test1/html/checkName.jsp";
var link = url+"?"+data;
$("a").html(link);
$("a").attr("href",link);
});解析：$("input")是選擇input的所有。
$("#form").serialize()可以獲取到form表單中，所有的name屬性，並將這些name拼接在一起，拼接方式為：name1&name2&name3。然後將link的值設為url+"?"+data，這樣就完成了三個引數的賦值給url。
通過attr("href",link)，就可以改變a連結的屬性href的值。
完成了動態將輸入的值傳遞到引數的實現。
特別注意：input中name屬性不可少，不然serialize無法識別。
截圖如下：
技術有限，目前對ajax的理解就到這裡了，歡迎大家批評指導。謝謝。