要談AJAX，就不得不提同步與非同步的概念了

同步互動：使用者傳送一個請求，在收到伺服器的應答之前，不可以做任何操作。並且在收到應答後，會重新整理整個頁面。在網 絡不好的情況下使用者體驗不好。非同步互動：使用者傳送一個請求，在收到伺服器的應答之前，可以向伺服器傳送新的請求。可以使用js接受伺服器的響應，再 利用js區域性重新整理頁面。同步好還是非同步好：     非同步：使用者體驗好，不能適用於所有場景(例如使用支付軟體付款時，必須等到支付成功才能開始新的支付操作)

    同步：使用者體驗不好，適用於所有場景。

AJAX不是一項新的技術，它是由asynchronous(非同步程式碼塊)、javascript and xml組成，它就是基於js和xml來實現非同步請 求。它可以利用js來非同步訪問伺服器。通常伺服器給瀏覽器響應的是一個完整的頁面，而在AJAX中， 由於是利用js接受響應，區域性重新整理頁面，所以伺服器不用給瀏覽器響應整個頁面了，只返回資料就行了。 例如：你進入一個購物網站，出現了許多商品，你點選了一個按鈕“按銷量排序”，這時後臺給伺服器傳送了一個AJAX請求，伺服器接受請求後只返回了商品銷量的資料(這些資料以xml結構或者json鍵值對錶示)而不是整個頁面，然後由javascript把這些商品的資料顯示在了頁面上。由於json表示的資料除了結構清晰外還更緊湊，在js中很受歡迎。

AJAX應用場景

百度的搜尋框、註冊使用者是，校驗使用者名稱是否被註冊過。

AJAX的優缺點：

優點：非同步互動，提高了使用者體驗；伺服器只響應部分資料，而不是整個頁面，所以降低了伺服器應答的壓力(頻寬)。 缺點：不能應用所有場景(支付)；會無端的增加訪問伺服器的次數，給伺服器帶來了接收請求的壓力。

javascript實現AJAX的核心物件是XMLHttpRequest,實現步驟(只需四步)

第一步，獲取XMLHttpRequest物件，直接new一個XMLHttpRequest物件, var xmlHttp = new XMLHttpRequest()(適用於IE7+、firefox、Chrome、Safari和Opera)，如果還有其他版本的瀏覽器，則會建立各自對應的物件。

第二步，開啟與伺服器的連線 xmlHttp.open(method,url,async); method:請求方式，可以是GET或POST url:所要訪問的伺服器中資源的路徑 如servlet/AServlet async:是否為非同步傳輸，true表示為非同步傳輸，一般都是true

第三步，傳送請求  xmlHttp-.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//設定請求頭，通知伺服器傳送的資料是請求引數 new XMLHttpRequest().send("xxxxx");//注意，如果不給引數，可能會造成部分瀏覽器無法傳送請求 引數：如果是GET請求，可以是null,因為GET提交引數會拼接在url後面 如果是POST請求，傳入的就是請求引數

第四步，註冊監聽 在XMLHttpRequest物件的一個事件上註冊監聽器： onreadystatechange 一共有五個狀態:(xmlHttp.readyState)                 0狀態: 表示剛建立XMLHttpRequest物件, 還未呼叫open()方法                 1狀態: 表示剛呼叫open()方法, 但是還沒有呼叫send()方法傳送請求                  2狀態: 呼叫完了send()方法了, 請求已經開始                 3狀態: 伺服器已經開始響應, 但是不代表響應結束                  4狀態: 伺服器響應結束!(通常我們只關心這個狀態)

//獲取xmlHttp物件的狀態:
var state = xmlHttp.readyState;//可能得到0, 1, 2, 3, 4 
//獲取伺服器響應的狀態碼
var status = xmlHttp.status;
//獲取伺服器響應的內容
var data = xmlHttp.responseText;//得到伺服器響應的文字格式的資料  
//相當於每次狀態改變時，都會呼叫這個function
xmlHttp.onreadystatechange = function(){
    //當伺服器已經處理完請求之後
    if(xmlHttp.readyState == 4){
        //status是應答狀態碼，200說明伺服器響應完成，而且狀態OK
        if( xmlHttp.status == 200 ){
            //獲取響應資料並執行區域性重新整理的邏輯
            var result = xmlHttp.responseText;
            result = xmlHttp.responseXML;
        }
    }
}

jQuery實現AJAX

1.load方法

$(selector).load(url,data,callback);

selector：選擇器(例如span)，將從伺服器獲取到的資料載入到指定的元素中

url：傳送請求的url地址

data：可選，想伺服器傳送的資料 key/value資料 如：

{"username":"張三","psw":"123"}

callback：可選，load方法完成後所執行的函式。

示例：

$("#username_msg").load("<%= request.getContextPath() %>/AjaxCheckUsernameServlet", {"username": username});

2.$.get方法

$.get(url, [data], [callback]);

url：傳送請求的URL地址

data：可選, 向伺服器傳送的資料

callback：可選, 請求成功後所執行的函式

示例：

$.get("<%= request.getContextPath() %>/AjaxCheckUsernameServlet", {"username": username}, function(result){
					$("#username_msg").html("<font style='color:red'>"+result+"</font>");
				});

3.$.ajax方法

$.ajax(url, [data], [async], [callback]);

url：傳送請求的URL地址

data：可選, 傳送至伺服器的key/value資料

async：可選, 預設為true, 表示非同步互動

type：可選, 請求方式 , 預設為"GET"。

success：可選, 請求成功後執行的函式, 函式引數:

result：伺服器返回的資料

示例：

$.ajax({
    "url" : "<%= request.getContextPath() %>/AjaxCheckUsernameServlet",
    "data" : {"username": username},
    "async" : true,
    "type" : "POST",
    "success" : function(result){
    $("#username_msg").html("<font style='color:red'>"+result+"</font>")
			    }
});