【全棧之路】JAVA基礎課程七_AJAX原理剖析（20190617v1.0）

歡迎進入JAVA基礎課程

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

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

概述

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

什麼是AJAX

1. Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）
2. Ajax是一種用於建立快速動態網頁的技術
3. 與服務器進行少許數據交換，實現網頁異步和局部刷新

原理剖析

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

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

原理圖

Ajax核心:XMLHttpRequest

對象屬性
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...