Ajax技術主要是把html、css、js、dom 技術結合在一起使用。 在頁面不刷新的情況下，和後臺的服務器，以及程序進行數據的傳輸。
頁面不刷新：用戶在操作頁面的時候，當某個操作結束之後，使用AJAX技術和服務器進行交互，但是用戶還可以繼續再頁面上進行其他的操作。用戶並不會感覺到頁面在和後臺交互。
ajax常見應用：
地圖、註冊頁面光標離焦之後驗證某些數據是否可用等。
XMLHttpRequest對象
XMLHttprequest對象是所有瀏覽器內置的對象。這個對象負責和服務器之間進行數據的交互。我們在JS代碼中，先得到XMLhttprequest對象，然後通過這個對象的向服務器發送數據，同時還要使用這個對象接收服務器的響應數據，在獲取到響應數據之後，使用JS和dom技術，把數據添加到當前的頁面上。
獲取XMLHttpRequest對象的標準步驟
function getXMLHttpRequest(){
var xmlhttp;
/*
window.XMLHttpRequest 使用window對象，調用XMLHttpRequest，
如果當前window對象有XMLHttpRequest，這時就會得到XMLHttpRequest，
如果當前的window對象沒有XMLHttpRequest，這時會得到undefined
*/
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
設置回調函數
//定義函數
function demo(){
//在光標離開當前的輸入框之後，需要獲取到當前的xmlhttprequest對象
var xhr = getXMLHttpRequest();
//向服務器發送請求
//1、需要打開和服務器之間的連接
xhr.open("get","/day19/demo",true);
//2、發送請求
xhr.send();
//3、設置回調函數
xhr.onreadystatechange = function(){
document.getElementById("s").innerHTML = "123";
}
}
open方法中的第一個參數：
設置向服務器發送請求時提交數據的方式：get和post
open方法中的第二個參數：
本次請求的服務器的資源路徑。
open方法的第三個參數：
true：表示頁面的處理和後臺發送請求是異步進行。一般都設置true。
false：頁面的處理和後臺是同步。
send是將請求的數據發送給服務器。send方法中的參數，只有在post請求時才能書寫。
如果get方式，直接書寫send，括號中不要書寫任何內容。
setRequestHeader方法
如果使用post方式和服務器交互，並且在send中攜帶參數，需要通過xmlhttprequest中的setRequestHeader設置請求頭信息。
readyState屬性
status屬性
responseText 、responseXML
xmlhttprequest對象中提供的2個屬性來獲取服務器響應的數據：
responseText：它接收服務器響應的所有文本數據。
responseXML：它接收服務器響應的xml格式的數據。
response.setContentType("text/html;charset=utf-8");
response.setContentType("text/xml;charset=utf-8");ajax技術和服務器交互模版代碼
1、 獲取xmlhttprequest對象
將獲取xmlhttprequest對象的js代碼單獨封裝到一個js文件，在需要的jsp頁面中導入
var xhr = getXMLHttpRequest();
2、打開連接
xhr.open(“get|post”,”請求的資源路徑”,true);
3、發送數據
xhr.send(“攜帶 參數，僅限於post方式”);
4、設置onreadystatechange事件對應的函數
5、在函數中判斷readyState==4 && status == 200
6、使用responseText獲取響應的數據
驗證手機號碼是否正確示列
<script type="text/javascript" src="js/xhr.js"></script>
<script type="text/javascript">
//定義函數
function demo(){
//獲取用戶輸入的數據
var name = document.getElementById("name").value;
/*
使用正則表達式驗證用戶名的合法性
JS中的正則對象：
RegExp
*/
var reg = new RegExp("^1[34578][0-9]{9}$");
//使用正則進行驗證
if( !(reg.test(name)) ){
//判斷成立說明當前輸入的手機號碼不正確
document.getElementById("s").innerHTML = "手機號碼格式錯誤";
}else{
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function(){
if( xhr.readyState == 4 && xhr.status == 200 ){
//處理後臺查詢出來的數據
document.getElementById("s").innerHTML = xhr.responseText;
}
}
//1、需要打開和服務器之間的連接
xhr.open("post","/day19/regist",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//2、發送請求
xhr.send("name="+name);
}
}
</script>
</head>
<body>
<form action="/day19/demo" method="post">
<!-- 直接在標籤上書寫對應的事件綁定的函數 -->
用戶名：<input type="text" name="name" id="name" onbl"demo();"/>
<span id="s"></span><br/>
put type="submit" value="demo" />
</form>
</body>
public class RegistServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
//獲取ajax引擎提交的是手機號碼
String name = request.getParameter("name");
response.setContentType("text/html;charset=utf-8");
if( name == null || name.trim().length() == 0 ){
response.getWriter().println("<font color='red'>請輸入正確的手機號碼</font>");
return ;
}
//後臺查詢當前的用戶輸入的信息是否已經被註冊
UserService service = new UserService();
boolean boo = service.findByName(name);
if( boo ){
//說明用戶名可以使用
response.getWriter().println("<font color='green'>手機號碼可用</font>");
}else{
//用戶名已經被註冊
response.getWriter().println("<font color='red'>手機號碼已註冊</font>");
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}