摘要：各瀏覽器都有自己的關(guān)于最大長(zhǎng)度的限制谷歌火狐超過限制長(zhǎng)度的部分，瀏覽器會(huì)自動(dòng)截取掉，導(dǎo)致傳遞給服務(wù)器的數(shù)據(jù)缺失。

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

xml：可擴(kuò)展的標(biāo)記語(yǔ)言

作用是用來存儲(chǔ)數(shù)據(jù)的（通過自己擴(kuò)展的標(biāo)記名稱清晰的展示出數(shù)據(jù)結(jié)構(gòu)）
ajax之所以稱為異步的js和xml，主要原因是：當(dāng)初最開始用ajax實(shí)現(xiàn)客戶端和服務(wù)器端數(shù)據(jù)通信的時(shí)候，傳輸?shù)臄?shù)據(jù)格式一般都是xml格式的數(shù)據(jù)，我們我們把它稱之為異步j(luò)s和xml（現(xiàn)在一般都是基于JSON格式來進(jìn)行數(shù)據(jù)傳輸?shù)模?/p>

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

異步的JS

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

局部刷新 VS 全局刷新

在非完全前后端分離項(xiàng)目中，前端開發(fā)只需要完成頁(yè)面的制作，并且把一些基礎(chǔ)的人機(jī)交互效果使用js完成即可，頁(yè)面中需要?jiǎng)討B(tài)呈現(xiàn)內(nèi)容的部分，都是交給后臺(tái)開發(fā)工程師做數(shù)據(jù)綁定和基于服務(wù)器進(jìn)行渲染的（服務(wù)器端渲染）

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

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

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

前后端完全分離的項(xiàng)目，頁(yè)面中需要?jiǎng)討B(tài)綁定的數(shù)據(jù)是交給客戶端完成渲染的
1、向服務(wù)器端發(fā)送AJAX請(qǐng)求
2、把從服務(wù)器端獲取的數(shù)據(jù)解析處理，拼接成為我們需要展示的HTML字符串
3、把拼接好的字符串替換頁(yè)面中某一部分的內(nèi)容（局部刷新），頁(yè)面整體不需要重新加載，局部渲染即可

[優(yōu)勢(shì)]
1、我們可以根據(jù)需求，任意修改頁(yè)面中某一部分的內(nèi)容（例如實(shí)時(shí)刷新），整體頁(yè)面不刷新，性能好，體驗(yàn)好（所有表單驗(yàn)證、需要實(shí)時(shí)刷新的等需求都要基于AJAX實(shí)現(xiàn)）

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

[弊端]
1、不利于SEO優(yōu)化：第一次從服務(wù)器端獲取的內(nèi)容不包含需要?jiǎng)討B(tài)綁定的數(shù)據(jù)，所以頁(yè)面的源代碼中沒有這些內(nèi)容，不利于SEO收錄，后期通過JS添加到頁(yè)面中的內(nèi)容，并不會(huì)寫在頁(yè)面的源代碼中（是源代碼不是頁(yè)面結(jié)構(gòu)）
2、交由客戶端渲染，首先需要把頁(yè)面呈現(xiàn)，然后再通過JS的異步AJAX請(qǐng)求獲取數(shù)據(jù)，然后數(shù)據(jù)綁定，瀏覽器在把動(dòng)態(tài)增加的部分重新渲染，無形中浪費(fèi)了一些時(shí)間，沒有服務(wù)器端渲染頁(yè)面呈現(xiàn)速度快

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

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

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

//=>發(fā)送AJAX請(qǐng)求（括號(hào)中傳遞的內(nèi)容就是請(qǐng)求主體的內(nèi)容）
xhr.send(null);

分析第二步中的細(xì)節(jié)點(diǎn)

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

[AJAX請(qǐng)求方式]
1、GET系列的請(qǐng)求（獲?。?/p>

get

delete：從服務(wù)器上刪除某些資源文件

head：只想獲取服務(wù)器返回的響應(yīng)頭信息（響應(yīng)主體內(nèi)容不需要獲?。?/p>

...

2、POST系列請(qǐng)求（推送）

post

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

...

不管哪一種請(qǐng)求方式，客戶端都可以把信息傳遞給服務(wù)器，服務(wù)器也可以把信息返回給客戶端，只是GET系列一般以獲取為主（給的少，拿回來的多），而POST系列一般以推送為主（給的多，拿回來的少）
1）我們想獲取一些動(dòng)態(tài)展示的信息，一般使用GET請(qǐng)求，因?yàn)橹恍枰蚍?wù)器端發(fā)送請(qǐng)求，告訴服務(wù)器端我們想要什么，服務(wù)器端就會(huì)把需要的數(shù)據(jù)返回
2）在實(shí)現(xiàn)注冊(cè)功能的時(shí)候，我們需要把客戶輸入的信息發(fā)送給服務(wù)器進(jìn)行存儲(chǔ)，服務(wù)器一般返回成功還是失敗等狀態(tài)，此時(shí)我們一般都是基于POST請(qǐng)求完成
...

GET系列請(qǐng)求和POST系列請(qǐng)求，在項(xiàng)目實(shí)戰(zhàn)中存在很多的區(qū)別
1、GET請(qǐng)求傳遞給服務(wù)器的內(nèi)容一般沒有POST請(qǐng)求傳遞給服務(wù)器的內(nèi)容多
原因：GET請(qǐng)求傳遞給服務(wù)器內(nèi)容一般都是基于url地址問號(hào)傳遞參數(shù)來實(shí)現(xiàn)的，而POST請(qǐng)求一般都是基于設(shè)置請(qǐng)求主體來實(shí)現(xiàn)的。
各瀏覽器都有自己的關(guān)于URL最大長(zhǎng)度的限制（谷歌：8KB、火狐：7KB、IE：2KB...）超過限制長(zhǎng)度的部分，瀏覽器會(huì)自動(dòng)截取掉，導(dǎo)致傳遞給服務(wù)器的數(shù)據(jù)缺失。
理論上POST請(qǐng)求通過請(qǐng)求主體傳遞是沒有大小限制的，真實(shí)項(xiàng)目中為了保證傳輸?shù)乃俾?，我們也?huì)限制大?。ɡ纾荷蟼鞯馁Y料或者圖片我們會(huì)做大小的限制）

2、GET請(qǐng)求很容易出現(xiàn)緩存（這個(gè)緩存不可控：一般我們都不需要），而POST不會(huì)出現(xiàn)緩存（除非自己做特殊處理）；
原因：GET是通過URL問號(hào)傳參傳遞給服務(wù)器信息，而POST是設(shè)置請(qǐng)求主體；
設(shè)置請(qǐng)求主體不會(huì)出現(xiàn)緩存，但是URL傳遞參數(shù)就會(huì)了。

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

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

3、GET請(qǐng)求沒有POST請(qǐng)求安全（POST也并不是十分安全，只是相對(duì)安全）
原因：還是因?yàn)镚ET是URL傳參給服務(wù)器
有一種比較簡(jiǎn)單的黑客技術(shù)：URL劫持，也就是可以把客戶端傳遞給服務(wù)器的數(shù)據(jù)劫持掉，導(dǎo)致信息泄露

URL：請(qǐng)求數(shù)據(jù)的地址（API地址），真實(shí)項(xiàng)目中，后臺(tái)開發(fā)工程師會(huì)編寫一個(gè)API文檔，在API文檔中匯總了獲取哪些數(shù)據(jù)需要使用哪些地址，我們按照文檔操作即可

ASYNC：異步（SYNC同步），設(shè)置當(dāng)前AJAX請(qǐng)求是異步的還是同步的，不寫默認(rèn)是異步（TRUE），如果設(shè)置為FALSE，則代表當(dāng)前請(qǐng)求是同步的

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

第三部分細(xì)節(jié)研究

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

AJAX狀態(tài)碼：描述當(dāng)前AJAX操作的狀態(tài)的
xhr.readyState

0：UNSENT 未發(fā)送，只要?jiǎng)?chuàng)建一個(gè)AJAX對(duì)象，默認(rèn)值就是零
1：OPENED 我們已經(jīng)執(zhí)行了xhr.open這個(gè)操作
2：HEADERS_RECEIVED 當(dāng)前AJAX的請(qǐng)求已經(jīng)發(fā)送，并且已經(jīng)接收到服務(wù)器端返回的響應(yīng)頭信息了
3：LOADING 響應(yīng)主體內(nèi)容正在返回的路上
4：DONE 響應(yīng)主體內(nèi)容已經(jīng)返回到客戶端

HTTP網(wǎng)絡(luò)狀態(tài)碼：記錄了當(dāng)前服務(wù)器返回信息的狀態(tài) xhr.status
200：成功，一個(gè)完整的HTTP事務(wù)完成（以2開頭的狀態(tài)碼一般都是成功）

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

301：Moved Permanently 永久轉(zhuǎn)移（永久重定向）一般應(yīng)用于域名遷移

302：Move temporarily 臨時(shí)轉(zhuǎn)移（臨時(shí)重定向，新的HTTP版本中任務(wù)307是臨時(shí)重定向）一般用于服務(wù)器的負(fù)載均衡：當(dāng)前服務(wù)器處理不了，我把當(dāng)前請(qǐng)求臨時(shí)交給其他的服務(wù)器處理（一般圖片請(qǐng)求經(jīng)常出現(xiàn)302，很多公司都有多帶帶的圖片服務(wù)器）

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

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

400：請(qǐng)求參數(shù)錯(cuò)誤

401：無權(quán)限訪問

404：訪問地址不存在

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

500：Internal Server Error 未知的服務(wù)器錯(cuò)誤

503：Service Unavailable 服務(wù)器超負(fù)載