原生js的ajax技術

同步和異步

同步阻塞現象：請求順序和響應順序一致.客戶端發送請求到服務器端，當服務器返回響應之前，客戶端都處於等待卡死狀態.
好比排隊打飯.排隊前面的,先拿請求順序和響應順序一致到飯.
按F5刷新網頁.如果網頁報文沒獲取到,下次刷新需要等待.
異步非阻塞現象：請求順序和響應順序允許不一致.客戶端發送請求到服務器端，無論服務器是否返回響應，客戶端都可以隨意做其他事情，不會被卡死.當響應數據獲取完畢後,通過回調方式通知客戶端.
好比銀行取號辦事情.拿完號後可以任意走動.

結論:異步非阻塞的用戶體驗更好.

Ajax就是web交互的異步非阻塞技術,但是也支持同步阻塞.

ajax的運行原理

Ajax=web前端+服務端的綜合技術應用.前端的代碼比重更大.
頁面發起請求，會將請求發送給瀏覽器內核中的Ajax引擎(xmlhttpRequest對象)，Ajax引擎會提交請求到服務器端，在這段時間裏，客戶端可以任意進行任意操作，直到服務器端將數據返回給Ajax引擎後，會觸發你設置的回調事件，從而執行自定義的js邏輯代碼完成某種頁面功能。

js原生的ajax技術

操作步驟如下：

1）創建Ajax引擎對象(web前端技術)
2）爲Ajax引擎對象綁定監聽（註冊回調函數）
3）綁定提交地址
4）發送請求
5）服務器收到請求,進行業務處理並響應結果(服務端技術)
6）接受響應數據,執行回調監聽函數

readyState的請求狀態：

readyState-請求的狀態.
0 代表未初始化。 還沒有調用 open 方法
1 代表正在加載。 open 方法已被調用，但 send 方法還沒有被調用
2 代表已加載完畢。send 已被調用。請求已經開始
3 代表交互中。服務器正在發送響應
4 代表完成。響應發送完畢

status- 響應碼200(200正確的響應)

$.ajax({ 
    progessing:function(){}readyState=2和3時, 
 success:function(){} readyState=4,且status=200時
  error: function(){} readyState=4,且status非200時
})

注意：

>注意：如果是post提交
在發送請求之前設置一個頭
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8");
總結：
所用異步訪問都是ajax引擎

這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

get方式傳參的話，直接在url後面加參數就好了，如果是post方式的話，在send(String),方法中傳入參數

get方式：

<script>
	var http = new XMLHttpRequest();
	http.open("GET","ajax?username=admin",true);
	//向服務器發送請求
	http.send();
</script>

post方式：

<script>
	var http = new XMLHttpRequest();
	http.open("POST","ajax",true);
	//向服務器發送請求
	http.send("username=admin");
</script>