????????剛接觸AJAX時(shí),只知道在前端開(kāi)發(fā)中她可以實(shí)現(xiàn)客戶端和服務(wù)器端的異步數(shù)據(jù)交互潦俺。
????????如果不使用AJAX，一個(gè)靜態(tài)網(wǎng)頁(yè)想要與服務(wù)器進(jìn)行數(shù)據(jù)交互或是部分網(wǎng)頁(yè)內(nèi)容更新徐勃，基本上需要重新載入的事示。
? ? ? ? AJAX其實(shí)只是一個(gè)概念，一種思想僻肖。具體其實(shí)靠的是XMLHttpRequest這么個(gè)對(duì)象來(lái)實(shí)現(xiàn)的肖爵。這么一把異步網(wǎng)絡(luò)交互神器，要是不好好學(xué)學(xué)檐涝，實(shí)在不好意思說(shuō)自己也了解前端開(kāi)發(fā)了遏匆。
<(￣︶￣)>。
? ? ? ? 這里AJAX的身世咱就不去了解了谁榜，感興趣的朋友可以百度。下面進(jìn)入正題窃植，學(xué)習(xí)AJAX的具體實(shí)現(xiàn)帝蒿。
? ? ? ? 搞編程的基本都懂面向?qū)ο蟀?*^__^*)，咱要和服務(wù)端交互得有一個(gè)異步網(wǎng)絡(luò)請(qǐng)求巷怜。那好,
先實(shí)現(xiàn)一個(gè)簡(jiǎn)單的異步請(qǐng)求：
?在上面的截圖實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的get請(qǐng)求葛超，并打印服務(wù)端返回的數(shù)據(jù)。
有沒(méi)有覺(jué)得很簡(jiǎn)單︿(￣︶￣)︿延塑。
一點(diǎn)也不假绣张，具體流程很簡(jiǎn)單:初始化一個(gè)異步請(qǐng)求-->為其設(shè)置必要的配置（請(qǐng)求方式，請(qǐng)求地址关带，開(kāi)啟異步）-->將請(qǐng)求發(fā)送出去-->等待數(shù)據(jù)返回侥涵。
(*@ο@*) 哇～這么幾個(gè)函數(shù)調(diào)用就實(shí)現(xiàn)了一個(gè)異步請(qǐng)求，她到底是如何實(shí)現(xiàn)的咧？這里咱打住芜飘。咱學(xué)習(xí)的目的是如何使用务豺，不去解析源碼。點(diǎn)到為止嘛嗦明。-_-|||
GET的說(shuō)明和限制：
1：open()函數(shù)中可以傳遞三個(gè)參數(shù)笼沥，第一個(gè)不用說(shuō)咱使用“GET”。第二個(gè)參數(shù)url為需要請(qǐng)求的地址娶牌，若是想帶上請(qǐng)求參數(shù)直接拼接在地址后面即可奔浅。第三個(gè)參數(shù)控制請(qǐng)求是否開(kāi)啟異步，其實(shí)不傳默認(rèn)就是true（異步）裙戏，不設(shè)置也可以乘凸。如果設(shè)置為false（同步）瀏覽器會(huì)提示：、
嘿嘿執(zhí)行不通過(guò)(ノへ￣累榜、)
2:send()函數(shù)參數(shù)只能為空。如果我想傳點(diǎn)什么(￣～￣) 嚼! 過(guò)去灵嫌，比如表單提交壹罚，請(qǐng)出門(mén)左拐，額寿羞，不對(duì)猖凛！請(qǐng)使用POST請(qǐng)求方式。GET請(qǐng)求比如需要傳遞一個(gè)參數(shù)nickName=琉璃琥過(guò)去可以這樣：http://www.xxx.com?nickName=琉璃琥绪穆。
3：onload 是發(fā)送請(qǐng)求后服務(wù)器的響應(yīng)事件辨泳。服務(wù)器響應(yīng)成功了會(huì)通過(guò)該事件來(lái)處理響應(yīng)結(jié)果。多好多和諧是吧玖院。
readyState ,status
好了菠红，說(shuō)的服務(wù)器響應(yīng)了這里不得不說(shuō)下 readyState ,status這兩個(gè)屬性值了。readyState表示的時(shí)XMLHttpRequest的實(shí)時(shí)屬性/狀態(tài)难菌。status代表一個(gè)Http網(wǎng)絡(luò)請(qǐng)求的服務(wù)器響應(yīng)狀態(tài)试溯。對(duì)于status應(yīng)該好理解，咱發(fā)送一個(gè)網(wǎng)絡(luò)請(qǐng)求郊酒，咱就可以通過(guò)status知道請(qǐng)求成功還是出狀況了遇绞。比如200（請(qǐng)求成功）,404(未找請(qǐng)求數(shù)據(jù))，500+（不好意思服務(wù)器都歇了）燎窘。而readyState有5個(gè)狀態(tài)：
readyState不同于status摹闽，她主要顯示當(dāng)前請(qǐng)求的狀態(tài)，個(gè)人覺(jué)得側(cè)重點(diǎn)在于客戶端而不在與服務(wù)端褐健。咱稍微多想一點(diǎn)就可以發(fā)現(xiàn)付鹿，我要了解下發(fā)送的請(qǐng)求服務(wù)器是否正已建立連接，這個(gè)時(shí)候通過(guò)http的響應(yīng)狀態(tài)碼是無(wú)法準(zhǔn)確判斷的。功能上倘屹，就像網(wǎng)上買(mǎi)一個(gè)娃娃快遞寄回來(lái)银亲，快遞員相當(dāng)于status當(dāng)你見(jiàn)到快遞小哥（也可能是個(gè)美女o(*≧▽≦)ツ┏━┓）時(shí)，快遞都已經(jīng)到手了纽匙。咱查的訂單信息相當(dāng)于readyState务蝠，可以通過(guò)訂單信息知道咱的娃娃是到哪了還是神秘的消失了。
onreadystatechange
好了烛缔，兩個(gè)狀態(tài)值說(shuō)完了馏段。這里還得提下onreadystatechange事件。onreadystatechange也是XMLHttpRequest的一個(gè)監(jiān)聽(tīng)事件践瓷。相較于前者onload院喜，onreadystatechange知道的事跟多，打印日志看看：
上面截圖是一次GET請(qǐng)求打印的實(shí)時(shí)狀態(tài)晕翠，不用多解釋就知道喷舀。onreadystatechange作用跟大。
POST請(qǐng)求
話不多說(shuō)直接上圖
一目了然淋肾，采用POST請(qǐng)求時(shí)硫麻，19行就是將需要傳遞的字段通過(guò)哦send()函數(shù)發(fā)送給服務(wù)端。我這里使用onreadystatechange來(lái)監(jiān)聽(tīng)數(shù)據(jù)提交的狀態(tài)樊卓。如21-26行代碼拿愧，在監(jiān)聽(tīng)中判斷如果請(qǐng)求事件和響應(yīng)事件完成并成功后打印響應(yīng)的數(shù)據(jù)，否則處理失敗的邏輯碌尔。
到這里算是了解到了XMLHttpRequest的使用和AJAX基本概念 \(^o^)/YES!浇辜。若是發(fā)現(xiàn)本文中概念理解錯(cuò)誤或是方式使用不當(dāng)，希望評(píng)論區(qū)指正唾戚，吐槽柳洋。O(∩_∩)O哈哈~
