摘要：借鑒圖片僅用于學(xué)習(xí)分享，請(qǐng)尊重原創(chuàng)作者，勿用于商用。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請(qǐng)求數(shù)據(jù)?；静襟E創(chuàng)建對(duì)象也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象。創(chuàng)建一個(gè)新的請(qǐng)求并指定該請(qǐng)求的方法及驗(yàn)證信息。設(shè)置響應(yīng)請(qǐng)求狀態(tài)變化的函數(shù)。使用和實(shí)現(xiàn)局部刷新。

博客地址：https://blog.csdn.net/houjiyu...
本系列文章將主要針對(duì)JAVA一些基礎(chǔ)知識(shí)點(diǎn)進(jìn)行講解，為平時(shí)歸納所總結(jié)，不管是剛接觸JAVA開(kāi)發(fā)菜鳥(niǎo)還是業(yè)界資深人士，都希望對(duì)廣大同行帶來(lái)一些幫助。若有問(wèn)題請(qǐng)及時(shí)留言或加QQ：243042162。

寄語(yǔ)：
"不深思而得者，其得易失"，這句話告誡我們?cè)趯W(xué)習(xí)原理的同時(shí)，要在深入思考上下功夫，要在融會(huì)貫通上下功夫，要做到既知其言又知其義、既知其然有知其所以然，要在知行合一上下功夫，要做到學(xué)以致用、用有所成。

本文借鑒網(wǎng)絡(luò)上各技術(shù)博客，抽取出一些非常實(shí)用的解析圖，便于讀者融會(huì)貫通。借鑒圖片僅用于學(xué)習(xí)分享，請(qǐng)尊重原創(chuàng)作者，勿用于商用。

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

Ajax是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)

與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，實(shí)現(xiàn)網(wǎng)頁(yè)異步和局部刷新

Ajax 的原理簡(jiǎn)單來(lái)說(shuō)通過(guò) XmlHttpRequest 對(duì)象來(lái)向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)，然后用 javascript 來(lái)操作 DOM 而更新頁(yè)面。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請(qǐng)求數(shù)據(jù)。

基本步驟：
 (1) 創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象。
 (2) 創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法、URL及驗(yàn)證信息。
 (3) 設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù)。
 (4) 發(fā)送HTTP請(qǐng)求。
 (5) 獲取異步調(diào)用返回的數(shù)據(jù)。
 (6) 使用JavaScript和DOM實(shí)現(xiàn)局部刷新。

對(duì)象屬性
readyState：請(qǐng)求狀態(tài)，開(kāi)始請(qǐng)求時(shí)值為0直到請(qǐng)求完成這個(gè)值增長(zhǎng)到4
responseText：目前為止接收到的響應(yīng)體,readyState<3此屬性為空字符串，=3為當(dāng)前響應(yīng)體，=4則為完整響應(yīng)體
responseXML：服務(wù)器端相應(yīng)，解析為xml并作為Document對(duì)象返回
status：服務(wù)器端返回的狀態(tài)碼，=200成功，=404表示“Not Found”
statusText：用名稱(chēng)表示的服務(wù)器端返回狀態(tài)，對(duì)于“OK”為200，“Not Found”為400

方法
setRequestHeader()：向一個(gè)打開(kāi)但是未發(fā)生的請(qǐng)求設(shè)置頭信息
open()：初始化請(qǐng)求參數(shù)但是不發(fā)送
send()：發(fā)送Http請(qǐng)求
abort()：取消當(dāng)前相應(yīng)
getAllResponseHeaders()：把http相應(yīng)頭作為未解析的字符串返回
getResponseHeader()：返回http相應(yīng)頭的值

事件句柄
onreadystatechange：每次readyState改變時(shí)調(diào)用該事件句柄，但是當(dāng)readyState=3有可能調(diào)用多次

狀態(tài)圖

狀態(tài)碼

1. readyState
0：初始化，XMLHttpRequest對(duì)象還沒(méi)有完成初始化
1：載入，XMLHttpRequest對(duì)象開(kāi)始發(fā)送請(qǐng)求
2：載入完成，XMLHttpRequest對(duì)象的請(qǐng)求發(fā)送完成
3：解析，XMLHttpRequest對(duì)象開(kāi)始讀取服務(wù)器的響應(yīng)
4：完成，XMLHttpRequest對(duì)象讀取服務(wù)器響應(yīng)結(jié)束

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

前臺(tái)代碼

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);

}

后臺(tái)代碼

 @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 "成功啦";
    }

輸出結(jié)果

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

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