摘要：各瀏覽器都有自己的關于最大長度的限制谷歌火狐超過限制長度的部分，瀏覽器會自動截取掉，導致傳遞給服務器的數據缺失。

什么是AJAX？
async javascript and xml，異步的JS和XML

xml：可擴展的標記語言

作用是用來存儲數據的（通過自己擴展的標記名稱清晰的展示出數據結構）
ajax之所以稱為異步的js和xml，主要原因是：當初最開始用ajax實現客戶端和服務器端數據通信的時候，傳輸的數據格式一般都是xml格式的數據，我們我們把它稱之為異步js和xml（現在一般都是基于JSON格式來進行數據傳輸的）

    
        張三
        25
        
            90
            $100$
            98
        
    
    
        李四
        24
        
            80
            $90$
            100
        
    

異步的JS

這里的異步不是說ajax只能基于異步進行請求（雖然建議都是使用異步編程），這里的異步特指的是 “局部刷新”

局部刷新 VS 全局刷新

在非完全前后端分離項目中，前端開發只需要完成頁面的制作，并且把一些基礎的人機交互效果使用js完成即可，頁面中需要動態呈現內容的部分，都是交給后臺開發工程師做數據綁定和基于服務器進行渲染的（服務器端渲染）

[優勢]
1、動態展示的數據在頁面的原代碼中可以看見，有利于SEO優化推廣（有利于搜索引擎的收錄和抓取）
2、從服務器端獲取的結果就已經是最后要呈現的結果了，不需要客戶端做額外的事情，所以頁面加載速度快（前提是服務器端處理的速度夠快，能夠處理過來），所以類似于京東、淘寶這些網站，首屏數據一般都是經由服務器端渲染的

[弊端]
1、如果頁面中存在需要實時更新的數據，每一次想要展示最新的數據，頁面都要重新的刷新一次，這樣肯定不行
2、都交給服務器端做數據渲染，服務器端的壓力太大，如果服務器處理不過來，頁面呈現的速度更慢（所以京東淘寶這類網站，除了首屏是服務器端渲染的，其它屏一般都是客戶端做數據渲染綁定）
3、這種模式不利于開發（開發效率低）

目前大部分公司都是前后端完全分離的項目（也有非完全前后端分離的）

前后端完全分離的項目，頁面中需要動態綁定的數據是交給客戶端完成渲染的
1、向服務器端發送AJAX請求
2、把從服務器端獲取的數據解析處理，拼接成為我們需要展示的HTML字符串
3、把拼接好的字符串替換頁面中某一部分的內容（局部刷新），頁面整體不需要重新加載，局部渲染即可

[優勢]
1、我們可以根據需求，任意修改頁面中某一部分的內容（例如實時刷新），整體頁面不刷新，性能好，體驗好（所有表單驗證、需要實時刷新的等需求都要基于AJAX實現）

2、有利于開發，提高開發的效率
1）前后端的完全分離，后臺不需要考慮前端如何實現，前端也不需要考慮后臺用什么技術，真正意義上實現了技術的劃分
2）可以同時進行開發：項目開發開始，首先制定前后端數據交互的接口文檔（文檔中包含了，調取哪個接口或者哪些數據等協議規范），后臺把接口先寫好（目前很多公司也需要前端自己拿NODE來模擬這些接口），客戶端按照接口調取即可，后臺再次去實現接口功能即可

[弊端]
1、不利于SEO優化：第一次從服務器端獲取的內容不包含需要動態綁定的數據，所以頁面的源代碼中沒有這些內容，不利于SEO收錄，后期通過JS添加到頁面中的內容，并不會寫在頁面的源代碼中（是源代碼不是頁面結構）
2、交由客戶端渲染，首先需要把頁面呈現，然后再通過JS的異步AJAX請求獲取數據，然后數據綁定，瀏覽器在把動態增加的部分重新渲染，無形中浪費了一些時間，沒有服務器端渲染頁面呈現速度快

//=>創建一個AJAX對象
let xhr=new XMLHttpRequest();//=>不兼容IE6及更低版本瀏覽器(IE6：ActiveXObject)

//=>打開請求地址(可以理解為一些基礎配置，但是并沒有發送請求)
xhr.open([method],[url],[async],[user name],[user password]);

//=>監聽AJAX狀態改變，獲取響應信息(獲取響應頭信息、獲取響應主體信息)
xhr.onreadystatechange=()=>{
    if(xhr.readyState===4 && xhr.status===200){
        let result=xhr.responseText;//=>獲取響應主體中的內容
    }
};

//=>發送AJAX請求（括號中傳遞的內容就是請求主體的內容）
xhr.send(null);

分析第二步中的細節點

xhr.open([method],[url],[async],[user name],[user password])

[AJAX請求方式]
1、GET系列的請求（獲取）

get

delete：從服務器上刪除某些資源文件

head：只想獲取服務器返回的響應頭信息（響應主體內容不需要獲取）

...

2、POST系列請求（推送）

post

put：向服務器中增加指定的資源文件

...

不管哪一種請求方式，客戶端都可以把信息傳遞給服務器，服務器也可以把信息返回給客戶端，只是GET系列一般以獲取為主（給的少，拿回來的多），而POST系列一般以推送為主（給的多，拿回來的少）
1）我們想獲取一些動態展示的信息，一般使用GET請求，因為只需要向服務器端發送請求，告訴服務器端我們想要什么，服務器端就會把需要的數據返回
2）在實現注冊功能的時候，我們需要把客戶輸入的信息發送給服務器進行存儲，服務器一般返回成功還是失敗等狀態，此時我們一般都是基于POST請求完成
...

GET系列請求和POST系列請求，在項目實戰中存在很多的區別
1、GET請求傳遞給服務器的內容一般沒有POST請求傳遞給服務器的內容多
原因：GET請求傳遞給服務器內容一般都是基于url地址問號傳遞參數來實現的，而POST請求一般都是基于設置請求主體來實現的。
各瀏覽器都有自己的關于URL最大長度的限制（谷歌：8KB、火狐：7KB、IE：2KB...）超過限制長度的部分，瀏覽器會自動截取掉，導致傳遞給服務器的數據缺失。
理論上POST請求通過請求主體傳遞是沒有大小限制的，真實項目中為了保證傳輸的速率，我們也會限制大小（例如：上傳的資料或者圖片我們會做大小的限制）

2、GET請求很容易出現緩存（這個緩存不可控：一般我們都不需要），而POST不會出現緩存（除非自己做特殊處理）；
原因：GET是通過URL問號傳參傳遞給服務器信息，而POST是設置請求主體；
設置請求主體不會出現緩存，但是URL傳遞參數就會了。

//=>每個一分鐘從新請求服務器端最新的數據，然后展示在頁面中（頁面中某些數據實時刷新）
setTimeout(()=>{
    $.ajax({
        url:"getList?lx=news",
        ...
        success:result=>{
            //=>第一次請求數據回來，間隔一分鐘后，瀏覽器又發送一次請求，但是新發送的請求，不管是地址還是傳遞的參數都和第一次一樣，瀏覽器很有可能會把上一次數據獲取，而不是獲取最新的數據
        }
    });
},60000);

//=>解決方案：每一次重新請求的時候，在URL的末尾追加一個隨機數，保證每一次請求的地址不完全一致，就可以避免是從緩存中讀取的數據
setTimeout(()=>{
    $.ajax({
        url:"getList?lx=news&_="+Math.random(),
        ...
        success:result=>{}
    });
},60000);

3、GET請求沒有POST請求安全（POST也并不是十分安全，只是相對安全）
原因：還是因為GET是URL傳參給服務器
有一種比較簡單的黑客技術：URL劫持，也就是可以把客戶端傳遞給服務器的數據劫持掉，導致信息泄露

URL：請求數據的地址（API地址），真實項目中，后臺開發工程師會編寫一個API文檔，在API文檔中匯總了獲取哪些數據需要使用哪些地址，我們按照文檔操作即可

ASYNC：異步（SYNC同步），設置當前AJAX請求是異步的還是同步的，不寫默認是異步（TRUE），如果設置為FALSE，則代表當前請求是同步的

用戶名和密碼：這兩個參數一般不用，如果你請求的URL地址所在的服務器設定了訪問權限，則需要我們提供可通行的用戶名和密碼才可以（一般服務器都是可以允許匿名訪問的）

第三部分細節研究

//=>監聽AJAX狀態改變，獲取響應信息(獲取響應頭信息、獲取響應主體信息)
xhr.onreadystatechange=()=>{
    if(xhr.readyState===4 && xhr.status===200){
        let result=xhr.responseText;//=>獲取響應主體中的內容
    }
};

AJAX狀態碼：描述當前AJAX操作的狀態的
xhr.readyState

0：UNSENT 未發送，只要創建一個AJAX對象，默認值就是零
1：OPENED 我們已經執行了xhr.open這個操作
2：HEADERS_RECEIVED 當前AJAX的請求已經發送，并且已經接收到服務器端返回的響應頭信息了
3：LOADING 響應主體內容正在返回的路上
4：DONE 響應主體內容已經返回到客戶端

HTTP網絡狀態碼：記錄了當前服務器返回信息的狀態 xhr.status
200：成功，一個完整的HTTP事務完成（以2開頭的狀態碼一般都是成功）

以3開頭一般也是成功，只不過服務器端做了很多特殊的處理

301：Moved Permanently 永久轉移（永久重定向）一般應用于域名遷移

302：Move temporarily 臨時轉移（臨時重定向，新的HTTP版本中任務307是臨時重定向）一般用于服務器的負載均衡：當前服務器處理不了，我把當前請求臨時交給其他的服務器處理（一般圖片請求經常出現302，很多公司都有多帶帶的圖片服務器）

304：Not Modified 從瀏覽器緩存中獲取數據 把一些不經常更新的文件或者內容緩存到瀏覽器中，下一次從緩存中獲取，減輕服務器壓力，也提高頁面加載速度

以4開頭的，一般都是失敗，而且客戶端的問題偏大

400：請求參數錯誤

401：無權限訪問

404：訪問地址不存在

以5開頭的，一般都是失敗，而且服務器的問題偏大

500：Internal Server Error 未知的服務器錯誤

503：Service Unavailable 服務器超負載