[Ajax工作原理和原生JS的ajax封裝]
無(wú)論從ajax的出現(xiàn)還是從它的作用上來(lái)說(shuō)日矫，ajax對(duì)于前端無(wú)疑是意義重大的档痪。甚至可以說(shuō)，是ajax帶來(lái)了前端這個(gè)行業(yè)探越。
一狡赐，定義：Asynchronous JavaScript and XML，意思是異步JS和XML扶关；
解釋下異步阴汇，異步是相對(duì)于同步來(lái)說(shuō)的，同步即同時(shí)進(jìn)行（累積多了就排隊(duì)节槐，一個(gè)一個(gè)執(zhí)行搀庶，必須等上一個(gè)結(jié)束，才能到下一個(gè)）铜异，而異步就是執(zhí)行到我了哥倔，我去旁邊繼續(xù)執(zhí)行等結(jié)果，后面排隊(duì)的繼續(xù)不用等我結(jié)果出來(lái)再執(zhí)行揍庄。
這是對(duì)于ajax的特點(diǎn)來(lái)設(shè)計(jì)的咆蒿，因?yàn)閍jax對(duì)后端數(shù)據(jù)的請(qǐng)求需要時(shí)間，而這個(gè)時(shí)間不利用起來(lái)就是浪費(fèi)蚂子。當(dāng)然沃测，如果必須要等前一個(gè)的結(jié)果怎么辦，這就使用到JS中的重要部分——回調(diào)函數(shù)了食茎，其實(shí)回調(diào)在JS中應(yīng)用很多蒂破，只是我們對(duì)它沒(méi)有概念而已，像點(diǎn)擊事件執(zhí)行的就是回調(diào)（先綁定事件别渔，只有在點(diǎn)擊發(fā)生時(shí)附迷，才會(huì)執(zhí)行）。那么ajax也一樣哎媚，先請(qǐng)求數(shù)據(jù)喇伯，只有在狀態(tài)改變時(shí)才會(huì)執(zhí)行接下來(lái)的（這個(gè)狀態(tài)包括請(qǐng)求成功和請(qǐng)求失敗）拨与。
二稻据，ajax特點(diǎn)：AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新买喧，不用刷新整個(gè)網(wǎng)頁(yè)攀甚。
通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新岗喉。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新炸庞。傳統(tǒng)的網(wǎng)頁(yè)（不使用 AJAX）如果需要更新內(nèi)容钱床，必需重載整個(gè)網(wǎng)頁(yè)面。
三埠居，ajax工作原理：先上一張圖查牌，ajax實(shí)現(xiàn)的就是瀏覽器和服務(wù)器之間的數(shù)據(jù)交互
四事期，ajax的核心：
—XMLHTTPRequest對(duì)象开呐，（是對(duì)象口予，就有屬性和方法）
—常用的方法：open("method", "url", "async")，
method表示通過(guò)什么方式進(jìn)行服務(wù)器訪問(wèn)诉位，包括get和post胁孙；
url表示訪問(wèn)服務(wù)器的地址唠倦；
async表示是否異步，包括true和false（注意：true表示異步）涮较。
send(content)稠鼻，
content表示向服務(wù)器發(fā)送的數(shù)據(jù)。
下面進(jìn)行說(shuō)明：
1. 向服務(wù)器請(qǐng)求狀態(tài)的階段：
onreadystatechange表示請(qǐng)求狀態(tài)改變的事件觸發(fā)器狂票，
readystate表示請(qǐng)求狀態(tài)候齿，4表示完成，具體如下表：
2. 服務(wù)器反饋階段：
status表示http請(qǐng)求狀態(tài)碼闺属，200表示成功慌盯，具體如下表：
3. 服務(wù)器反饋的內(nèi)容：（數(shù)據(jù)）
responseText表示響應(yīng)返回的文本，具體如下表：
（圖片轉(zhuǎn)載自https://blog.csdn.net/limuzi13/article/details/53636830?utm_source=itdadao&utm_medium=referral）
五掂器、原生JS的ajax封裝
function ajax(opt) {
var default_opt = {
url: '',
method: 'POST',
async: true,
data: null,
callback: null,
}
var newOpt = Object.assign(default_opt, opt);
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
newOpt.callback && newOpt.callback(xhr.responseText)
}
}
var search = ''
if (newOpt.method.toUpperCase() === 'GET') {
search = '?' + Object.keys(newOpt.data).map(function (k) {
return k + '=' + newOpt.data[k];
}).join('&');
}
xhr.open(newOpt.method,newOpt.url+search,newOpt.async)
var data={}
if(newOpt.method.toUpperCase() === 'POST'){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
data=JSON.stringify(newOpt.data);
}
xhr.send(data);
}
幾點(diǎn)說(shuō)明：
IE7及其以上版本中支持原生的 XHR 對(duì)象亚皂，因此可以直接用： var oAjax = new XMLHttpRequest();
IE6及其之前的版本中，XHR對(duì)象是通過(guò)MSXML庫(kù)中的一個(gè)ActiveX對(duì)象實(shí)現(xiàn)的唉匾。使用下面的語(yǔ)句創(chuàng)建： var oAjax=new ActiveXObject(’Microsoft.XMLHTTP’);GET 請(qǐng)求方式是通過(guò)URL參數(shù)將數(shù)據(jù)提交到服務(wù)器的孕讳，POST則是通過(guò)將數(shù)據(jù)作為 send 的參數(shù)提交到服務(wù)器；POST 請(qǐng)求中巍膘，在發(fā)送數(shù)據(jù)之前厂财，要設(shè)置表單提交的內(nèi)容類型；
