AJAX
asynchonous javascript and xml異步js和xml
作用：通過ajax技術，客戶端可以向服務器端發送請求，把需要展示給用戶的數據獲取到，也可以把客戶端用戶填寫的一些信息發送給服務器端進行處理。=>
ajax實現的是前後端數據請求交互的。
ajax中異步js的概念
此處的異步和之前學習的同步和異步是有區的，這裏提到的異步其實想表達的意思是局部刷新
全局刷新
我們客戶端看到的頁面，都是由服務器端進行渲染的，服務器端把需要呈現的結構樣式以及動態的數據都渲染完成，客戶端瀏覽器拿到最終的代碼呈現即可。
如果當前頁面中的部分結構和 數據發生改變，需要由服務器端重新渲染，把最新渲染的結果返回給客戶端，客戶端通過整體刷新來展示最新效果。
局部刷新
局部刷新不是服務器端來渲染頁面，客戶端通過ajax等技術向服務器端發送請求，服務器端只需要把數據返回給客戶端即可，頁面的渲染是由客戶端來完成的
如果有一個區域的數據發生改變，只需要在重新發送ajax請求，獲取的最新數據，由客戶端重新把當前區域的內容重新渲染即可，頁面不用重新加載。
XML
作用一般是用來存儲的，不在於展示，用戶自己擴展一些有意義的標籤，按照指定的結構，清晰明瞭的存儲一些信息：在很早以前，使用ajax實現客戶端和服務器端數據交互，所採用的數據格式一般都是xml格式的，由於xml格式解析的時候不太方便，所以目前項目中都是使用json格式的數據來代替xml格式的數據傳輸.
數據傳輸常用的格式：
- json（一般都是json格式的字符串）
- xml
- 文件流（buffer、二進制、base64）
- ……
html：超文本標記語言
xhtml：更加嚴謹的html
dhtml：頁面中的一些數據是動態更新的
xml：可擴展的標記語言，相對於html來說，html中的標籤都是w3c規定的，而xml中的標籤大部分都是自己隨意設置。
基礎語法
1、創建一個ajax對象
let xhr= new XMLHttpRequest
2、打開請求鏈接（配置ajax請求的基本參數）
xhr.open(method,url,sync/async,user-name,user-password)
3、監聽狀態請求，獲取需要的數據
xhr.onreadystatechange=function(){
xhr.readyState:ajax狀態碼 0-4
xhr.status:http網絡狀態碼
xhr.responseText:獲取服務器返回的字符串（json字符串）
xhr.responseXML:獲取服務器返回的xml格式數據
......
}
4、發送ajax請求：傳遞的內容可以是null也可以是其他信息
xhr.send(null)
sync/async
xhr.open('get','josn/linker.json',false,user-name,user-password)
- 第一個參數：請求方式
[GET] get、delete、head
[POST] post put - 第二個參數：請求的url地址
通過此地值我們可以向服務器發送請求，獲取不同的數據，地址其實是起一個標示作用，告訴服務器端我們想要獲取哪些數據；真實項目中，後臺開發工程師會提供給我們一個api接口文檔，在文檔中聲明瞭不同接口的地址 第三個參數不寫默認是true：異步，寫false爲同步- 最後兩個參數用戶名和密碼
我們一般不設置，只有當服務器做安全限制的時候，限定某些用戶纔可以訪問服務器，此時我們需要提供安全驗證和用戶名和密碼
onreadystatechange
onreadystatechange：當ajax狀態發生改變的時候會觸發該事件的執行
xhr.readyState：0 1 2 3 4
- 0：
unsend未發送，創建一個ajax實例，默認狀態就是0 - 1：
opened已經打開，執行xhr.open後狀態變爲1 - 2：
heads_received客戶端已經獲取到服務器返回的響應頭信息 - 3：
loading服務器返回的相應主體內容正在傳輸中 - 4：
done客戶端已經接受到服務器返回的響應主體內容（代表當前請求已經完成了）
響應頭和響應主體
服務器端在交互的時候肯定會把一些數據返回給客戶端，而且返回給客戶端的數據分爲兩種：通過 響應頭返回或者通過響應主體返回；而獲取響應頭信息有兩種方式：xhr.getAllResponseHeader和xhr.getResponseHeader
請求頭和請求主體
客戶端向服務器端發送請求額時候，有時候也需要把一些信息傳遞給服務器端，而傳遞給服務器端有以下幾種方式：
通過設置請求頭把信息傳遞給服務器
通過請求主體把信息傳遞給服務器
通過url請求地址後面的問號傳參的方式把內容傳遞給服務器 xhr.setRequestHeader:設置請求頭信息
timeout
xhr.timeout:設置請求的超時時間，當前請求如果超過了這個時間還沒有完成，屬於超時，請求中斷，同時會觸發xhr.ontimerout這個事件
ajax請求方式
客戶端向服務器端發送請求的時候，有很多的請求方式
get系列：get、delete、head
- get系列的目的一般從服務器端獲取數據，例如獲取一些數據信息展示在頁面中
- delete：刪除，從服務器端刪除某些資源
- head：只從服務器端上獲取響應頭的部分信息，此請求無法獲取響應主體的信息。
post系列 post、put
- put：存放，把一些資源存放在服務上
- post系列得目的一般都是把客戶端的一些數據推送到服務器端:例如用戶註冊，客戶端需要把用戶填寫的數據發送到服務器端。
不管哪一種方式，客戶端都可以把一些信息傳遞給服務器，服務器也可以把一些信息傳遞給客戶端，get可以理解爲給的少拿得多，post可以理解爲給的多拿得少
GET和POST的主要區別
1、傳遞方式的區別
GET方式：傳遞給服務器信息採用的是url問號傳參的方式來完成的
xhr.open('get','/gitInfo?name=wgh&age=27&sex=0')
post方式；傳遞給服務器信息採用的是設置請求主體的方式來完成的
xhr.send(name=wgh&age=44&sex=0);//此方法中存放的就是請求主體內容
2、get請求傳遞給服務器的內容有長度的限制，post沒有
get是問號傳參的，如果傳遞個內容過多，導致url過長
瀏覽器對於URL地址有一個長度限制，谷歌一般限制在8kb，火狐限制在7kb，ie限制在2kb，超過限制瀏覽器會把超過的部分截取掉
請求主體中傳遞的內容是沒有大小限制的，但是真實項目中爲了保證傳輸速度，我們會人爲的控制傳輸內容大小。
3、get請求會產生緩存（緩存是不可控的），post請求沒有緩存
因爲get是問號傳參傳遞給服務器內容，第一次通過地址傳遞某些參數給服務器，獲取到一些新的數據，第二次如果傳遞給服務器的參數沒有發生變化，很可能從服務器端獲取的數據還是和上次一模一樣，而不是最新的數據。
清除緩存
xhr.open('get','/getLNewInfo?type=a&_='+Math.random()')
4、get請求沒有post請求安全
因爲get請求是問號傳遞參數的形式，很多時候，別人可以通過黑客技術，劫持我們所發的url，如果是問號傳遞參數，傳遞給服務器的信息就會被劫持掉或者惡意篡改。
一般所有涉及到安全信息，我們都是用post傳輸。例如：所有涉及賬號密碼的都應該使用post傳輸
HTTTP網絡狀態碼
通過一些標識數字反應出當前服務器的處理狀態
- 200：成功，一切正常
- 301：永久轉移（永久重定向）一般來說做域名的轉移的時候會用到
- 302：臨時轉移（臨時重定向）服務器負載均衡
- 304：讀取的是緩存中的數據
- 307：臨時重定向
- 400：請求參數錯誤
- 401：請求權限不夠
- 404：請求地址不存在
- 500：未知的服務器錯誤
- 503：服務器超負荷請求
- 504：響應超時，可能是服務器端未打開（）
$.ajax({
url:'',//當前我麼需要請求的url地址
method：'',//請求方式get系列和post系列 老版本中jq使用的不是method，而是type（現在使用type和method都是一樣的的）;zipto中只支持type，不支持method
dataType:'json',//'text(默認)/json/xml....'預設值服務返回的數據格式（此處輸入的值並不會影響服務器的返回結果，服務器返回給客戶端的數據依然是實現事先商定好的，可能是字符串，可能是xml數據），而預設的值是服務器返回給我們的結果再次轉換爲我們需要的數據格式
data：{
name:wgh,
age:14
}
//data:可以傳遞一個對象，也可以傳遞一個字符串，即使傳遞的是一個對象，他也會把對象轉換爲字符串（"name=wgh&age=17"）,它的作用是向服務器傳遞內容，而且如果傳遞的方式是get系的，jq會把字符串放在url的末尾傳遞給服務器，如果是post系列，jq會把內容放在請求主體中傳遞給服務器
async：true，//設置同步異步：默認是true異步，false爲同步
cache：ture，//在get請求下，我們可以通過cache設置是否清除緩存，true代表的是不清楚，false代表的是清除（jq在請求地址的末尾天劍一個隨機數）
sucess：function(result){}//當客戶已經從服務器端把數據獲取完成了，會觸發這個回到函數的執行，result就是從服務器端獲取的內容（獲取的內容僅過了處理，jq按照data-type預設的值，把服務器返回的數據解析爲我們想要的格式了。）
})