摘要：借鑒圖片僅用于學習分享，請尊重原創作者，勿用于商用。這其中最關鍵的一步就是從服務器獲得請求數據。基本步驟創建對象也就是創建一個異步調用對象。創建一個新的請求并指定該請求的方法及驗證信息。設置響應請求狀態變化的函數。使用和實現局部刷新。

博客地址：https://blog.csdn.net/houjiyu...
本系列文章將主要針對JAVA一些基礎知識點進行講解，為平時歸納所總結，不管是剛接觸JAVA開發菜鳥還是業界資深人士，都希望對廣大同行帶來一些幫助。若有問題請及時留言或加QQ：243042162。

寄語：
"不深思而得者，其得易失"，這句話告誡我們在學習原理的同時，要在深入思考上下功夫，要在融會貫通上下功夫，要做到既知其言又知其義、既知其然有知其所以然，要在知行合一上下功夫，要做到學以致用、用有所成。

本文借鑒網絡上各技術博客，抽取出一些非常實用的解析圖，便于讀者融會貫通。借鑒圖片僅用于學習分享，請尊重原創作者，勿用于商用。

Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）

Ajax是一種用于創建快速動態網頁的技術

與服務器進行少量數據交換，實現網頁異步和局部刷新

Ajax 的原理簡單來說通過 XmlHttpRequest 對象來向服務器發異步請求，從服務器獲得數據，然后用 javascript 來操作 DOM 而更新頁面。這其中最關鍵的一步就是從服務器獲得請求數據。

基本步驟：
 (1) 創建XMLHttpRequest對象,也就是創建一個異步調用對象。
 (2) 創建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息。
 (3) 設置響應HTTP請求狀態變化的函數。
 (4) 發送HTTP請求。
 (5) 獲取異步調用返回的數據。
 (6) 使用JavaScript和DOM實現局部刷新。

對象屬性
readyState：請求狀態，開始請求時值為0直到請求完成這個值增長到4
responseText：目前為止接收到的響應體,readyState<3此屬性為空字符串，=3為當前響應體，=4則為完整響應體
responseXML：服務器端相應，解析為xml并作為Document對象返回
status：服務器端返回的狀態碼，=200成功，=404表示“Not Found”
statusText：用名稱表示的服務器端返回狀態，對于“OK”為200，“Not Found”為400

方法
setRequestHeader()：向一個打開但是未發生的請求設置頭信息
open()：初始化請求參數但是不發送
send()：發送Http請求
abort()：取消當前相應
getAllResponseHeaders()：把http相應頭作為未解析的字符串返回
getResponseHeader()：返回http相應頭的值

事件句柄
onreadystatechange：每次readyState改變時調用該事件句柄，但是當readyState=3有可能調用多次

狀態圖

狀態碼

1. readyState
0：初始化，XMLHttpRequest對象還沒有完成初始化
1：載入，XMLHttpRequest對象開始發送請求
2：載入完成，XMLHttpRequest對象的請求發送完成
3：解析，XMLHttpRequest對象開始讀取服務器的響應
4：完成，XMLHttpRequest對象讀取服務器響應結束

2. status
1xx：信息響應類，表示接收到請求并且繼續處理
2xx：處理成功響應類，表示動作被成功接收、理解和接受
3xx：重定向響應類，為了完成指定的動作，必須接受進一步處理
4xx：客戶端錯誤，客戶請求包含語法錯誤或者是不能正確執行
5xx：服務端錯誤，服務器不能正確執行一個正確的請求
100——客戶必須繼續發出請求
101——客戶要求服務器根據請求轉換HTTP協議版本
200——交易成功
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請求收到，但返回信息為空
205——服務器完成了請求，用戶代理必須復位當前已經瀏覽過的文件
206——服務器已經完成了部分用戶的GET請求
300——請求的資源可在多處得到
301——刪除請求數據
302——在其他地址發現了請求數據
303——建議客戶訪問其他URL或訪問方式
304——客戶端已經執行了GET，但文件未變化
305——請求的資源必須從服務器指定的地址得到
306——前一版本HTTP中使用的代碼，現行版本中不再使用
307——申明請求的資源臨時性刪除
400——錯誤請求，如語法錯誤
401——請求授權失敗
402——保留有效ChargeTo頭響應
403——請求不允許
404——沒有發現文件、查詢或URl
405——用戶在Request-Line字段定義的方法不允許
406——根據用戶發送的Accept拖，請求資源不可訪問
407——類似401，用戶必須首先在代理服務器上得到授權
408——客戶端沒有在用戶指定的餓時間內完成請求
409——對當前資源狀態，請求不能完成
410——服務器上不再有此資源且無進一步的參考地址
411——服務器拒絕用戶定義的Content-Length屬性請求
412——一個或多個請求頭字段在當前請求中錯誤
413——請求的資源大于服務器允許的大小
414——請求的資源URL長于服務器允許的長度
415——請求資源不支持請求項目格式
416——請求中包含Range請求頭字段，在當前請求資源范圍內沒有range指示值，請求也不包含If-Range請求頭字段
417——服務器不滿足請求Expect頭字段指定的期望值，如果是代理服務器，可能是下一級服務器不能滿足請求
500——服務器產生內部錯誤
501——服務器不支持請求的函數
502——服務器暫時不可用，有時是為了防止發生系統過載
503——服務器過載或暫停維修
504——關口過載，服務器使用另一個關口或服務來響應用戶，等待時間設定值較長
505——服務器不支持或拒絕支請求頭中指定的HTTP版本

前臺代碼

var xmlHttp = new XMLHttpRequest();

xmlHttp.open("post","/loginTest",true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xmlHttp.send("username=rain&password=123456");

xmlHttp.onreadystatechange = function (){
    var state = xmlHttp.readyState;
    var status = xmlHttp.status;
    if(state == 4 && status == 200){
        var data=xmlHttp.responseText;
       console.log("1."+data);
    }
}

xmlHttp.onload=function () {
    console.log("2."+xmlHttp.responseText);

}

后臺代碼

 @RequestMapping(value = "/loginTest", method = RequestMethod.POST)
    @ResponseBody
    public String loginTest(HttpServletRequest rq, String username, String password) {

        System.out.println("username="+username+";password="+password);

        System.out.println("username="+rq.getParameter("username")+";password="+rq.getParameter("password"));

        return "成功啦";
    }

輸出結果

1."成功啦"
2."成功啦"

參考網站：
（1）http://www.sohu.com/a/2382462...
（2）https://www.cnblogs.com/jacks...