AJAX(Async Javascript and Xml):在AJAX中的異步不是異步編程中的異步,而是泛指“局部刷新”,但是在AJAX請求中盡可能使用異步獲取數據(因為異步數據獲取不會阻塞下面代碼的執行)
AJAX的操作
//=>創建AJAX實例:IE6中是不兼容的,使用的是new ActiveXObject來實現的
let xhr = new XMLHttpRequest();
//=>打開請求:發送請求之前的一些配置項
//1.HTTP METHOD 請求方式
//2.URL 向服務器端發送請求的API接口地址
//3.ASYNC 設置AJAX請求的同步異步,默認是異步(寫TRUE也是異步),FALSE是同步,項目中都使用異步編程,防止阻塞后續代碼執行
//4.USER-NAME/USER-PASS:用戶名密碼,一般不用
xhr.open([HTTP METHOD],[URL],[ASYNC],[USER-NAME],[USER-PASS]);
//=>事件監聽:一般監聽的都是 READY-STATE-CHANGE 事件(AJAX狀態改變事件),基于這個事件可以獲取服務器返回的響應頭/響應主體內容
xhr.onreadystatechange= () => {
if(xhr.readyState === 4 && xhr.status === 200){
xhr.responseText;
}
};
//=>發送AJAX請求:從這步開始,當前AJAX任務開始,如果AJAX是同步的,后續代碼不會執行,要等到AJAX狀態成功后在執行,反之異步不會
xhr.send([body]);
AJAX狀態(READY-STATE)
0 => UNSENT 剛開始創建XHR,還沒有發送
1 => OPENED 已經執行了OPEN操作
2 => HEADERS_RECEIVED 已經發送AJAX請求(AJAX任務開始),響應頭信息已經被客戶端接收了(響應頭中包含了:服務器的時間、返回的HTTP狀態碼...)
3 => LOADING 響應主體內容正在返回
4 => DONE 響應主體內容已經被客戶端接收
關于XHR的屬性和方法
-
xhr.response
響應主體內容 -
xhr.responseText
響應主體的內容是字符串(JSON或者XML格式字符串都可以) -
xhr.responseXML
響應主體的內容是XML文檔 -
xhr.status
返回的HTTP狀態碼 -
xhr.statusText
狀態碼的描述 -
xhr.timeout
設置請求超時的時間 -
xhr.withCredentials
是否允許跨域 -
xhr.abort()
強制中斷AJAX請求 -
xhr.getAllResponseHeaders()
獲取所有響應頭信息 -
xhr.getResponseHeader([key])
獲取KEY對應的響應頭信息,例如:xhr.getResponseHeader('date')就是在獲取響應有中的服務器時間 -
xhr.open()
打開URL請求 -
xhr.overrideMimeType()
重寫MIME類型 -
xhr.send()
發送AJAX請求 -
xhr.setRequestHeader()
設置請求頭
let xhr = new XMLHttpRequest();
xhr.open('GET', 'temp.json');
xhr.setRequestHeader('leonard', '@@@');//=>設置的請求頭信息不能出現中文而且必須在OPEND之后才可以設置成功
/* xhr.timeout = 200;
xhr.ontimeout = () => {
console.log('請求超時,請稍后重試');
};
*/
xhr.onreadystatechange = () => {
if (!/^(2|3)\d{2}$/.test(xhr.status)) return;
if (xhr.readyState === 2) {
let time = xhr.getResponseHeader('date');
console.log(time, new Date(time));
}
if (xhr.readyState === 4) {
console.log(xhr.responseText);
}
};
xhr.send(null);
AJAX中的同步異步
- 異步情況
let xhr=new XMLHttpRequest(); // readyState 0 xhr.open('GET','/temp/list',true); // readyState 1 xhr.onreadystatechange=()=>{ if(xhr.readyState===2){console.log(1);} if(xhr.readyState===4){console.log(2);} }; xhr.send(); console.log(3); //=> 3 1 2
- 同步情況:同步狀態下主任務隊列在
readyState
未變成4之前一直被占用,所以即使觸發了onreadystatechange
,也無法執行//=>注意send位置不同結果是不一樣的 let xhr=new XMLHttpRequest(); xhr.open('GET','/temp/list',true); xhr.onreadystatechange=()=>{ if(xhr.readyState===2){console.log(1);} if(xhr.readyState===4){console.log(2);} }; xhr.send(); console.log(3); //=> 2 3 let xhr=new XMLHttpRequest(); xhr.open('GET','/temp/list',true); xhr.send(); xhr.onreadystatechange=()=>{ if(xhr.readyState===2){console.log(1);} if(xhr.readyState===4){console.log(2);} }; console.log(3); //=> 3
JQUERY中的AJAX
???????我們發現,每次寫AJAX請求都要經歷“經典四步”,寫起來特別麻煩,所以需要借助一些已經封裝好了的AJAX(當然,你也可以自己封裝2333)來進行數據請求,這樣顯得方便快捷
$.ajax([URL],[OPTIONS]) / $.ajax([OPTIONS])
-
$.get / $.post / $.getJSON / $.getScript
這些方法都是基于$.ajax
構建出來的快捷方法
//=>$.ajax中OPTIONS常用的參數
/*
* URL:請求的API接口地址
* METHOD:請求的方式
* DATA:傳遞給服務器的信息可以放到DATA中
* 如果是GET請求是基于問號傳參傳遞過去的
* 如果是POST請求是基于請求主體傳遞過去的
*
* DATA的值可以是對象也可以是字符串(一般常用對象)
* 如果是對象類型,JQ會把對象轉換為 xxx=xxx&xxx=xxx 的模式(x-www-form-urlencoded)
* 如果是字符串,我們寫的是什么就傳遞什么
*
* DATA-TYPE:預設置獲取結果的數據格式 TEXT/JSON/JSONP/HTML/SCRIPT/XML...(服務器返回給客戶端的響應主體中的內容一般都是字符串[JSON格式居多]),而設置DATA-TYPE='JSON',JQ會內部把獲取的字符串轉為JSON格式的對象 =>“他不會影響服務返回的結果,只是把返回的結果進行了二次處理”
* ASYNC:設置同步或者異步(TRUE->異步 FALSE->同步)
* CACHE:設置GET請求下是否建立緩存(默認TRUE->建立緩存 FALSE->不建立緩存),當我們設置FALSE,并且當前請求是GET請求,JQ會在請求的URL地址末尾追加隨機數(時間輟)
*
* SUCCESS:回調函數,當AJAX請求成功執行,JQ執行回調函數的時候會把從響應主體中獲取的結果(可能二次處理了)當做參數傳遞給回調函數
* ERROR:請求失敗后執行的回調函數
*/
$.ajax({
url: '/temp/list',
method: 'GET',
data: {
name: 'Leonard',
age: 18
},
dataType: 'json',
async: true,
cache: false,
success: (result, textStatus, xhr) => {
console.log(result);
console.log(textStatus);
console.log(xhr.getResponseHeader('date'));//=>jq重構的XHR
},
error: () => {}
});
???????心動不如行動,接下來模仿JQ封裝一個簡易版的AJAX
~(function(window) {
function AJAX(options) {
return new init(options);
}
let init = function init(options = {}) {
//=>初始化參數
let {
url,
method = 'GET',
data = null,
dataType = 'JSON',
async = true,
cache = true,
success,
error
} = options;
//=>把配置項掛載到實例上
['url', 'method', 'data', 'dataType', 'async', 'cache', 'success', 'error'].forEach(item => {
this[item] = eval(item);
});
//=>發送AJAX請求
this.sendAjax();
};
AJAX.prototype = {
constructor: AJAX,
init,
//=>發送AJAX請求
sendAjax() {
this.handleData();
this.handleCache();
//=>SEND
let {method, url, async, error, success, data} = this,
xhr = new XMLHttpRequest;
xhr.open(method, url, async);
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
//=>ERROR
if (!/^(2|3)\d{2}$/.test(xhr.status)) {
error && error(xhr.statusText, xhr);
return;
}
//=>SUCCESS
let result = this.handlDataType(xhr);
success && success(result, xhr);
}
};
xhr.send(data);
},
//=>處理DATA-TYPE
handlDataType(xhr) {
let dataType = this.dataType.toUpperCase(),
result = xhr.responseText;
switch (dataType) {
case 'TEXT':
break;
case 'JSON':
result = JSON.parse(result);
break;
case 'XML':
result = xhr.responseXML;
break;
}
return result;
},
//=>處理CACHE
handleCache() {
let {url, method, cache} = this;
if (/^GET$/i.test(method) && cache === false) {
//=>URL末尾追加時間輟
url += `${this.check()}_=${+(new Date())}`;
this.url = url;
}
},
//=>處理DATA
handleData() {
let {data, method} = this;
if (!data) return;
//=>如果是個OBJECT對象,我們把它轉換為x-www-form-urlencoded這種模式,方便后期傳遞給服務器
if (typeof data === 'object') {
let str = ``;
for (let key in data) {
if (data.hasOwnProperty(key)) {
str += `${key}=${data[key]}&`;
}
}
data = str.substring(0, str.length - 1);
}
//=>根據請求方式不一樣,傳遞給服務器的方式也不同
if (/^(GET|DELETE|HEAD|TRACE|OPTIONS)$/i.test(method)) {
this.url += `${this.check()}${data}`;
this.data = null;
return;
}
this.data = data;
},
//=>檢測URL中是否存在問號
check() {
return this.url.indexOf('?') > -1 ? '&' : '?';
}
};
init.prototype = AJAX.prototype;
window.ajax = AJAX;
})(window);
???????不過問題又來了,我們發現JQ中的AJAX在處理多個請求中會出現“回調地獄”的尷尬情形,那不行,雖然我的代碼沒那么美觀,但也不能容忍它這么丑吧,得想想法子
//=>回調地獄出現
$.ajax({
url: '/temp/list',
success: result => {
$.ajax({
url: '/temp/info',
success: result => {
$.ajax({
url: '/temp/add',
method:'POST',
success: result => {
...
}
});
}
});
}
});
//=>解決方案1:發布訂閱
let $planA = $.Callbacks(),
$planB = $.Callbacks();
$.ajax({
url: '/temp/list',
success: result => {
$planA.fire(result);
}
});
$planA.add(result => {
$.ajax({
url: '/temp/list',
success: result => {
$planB.fire(result);
}
});
});
$planB.add(result => {
...
});
//=>解決方案2:Promise
let queryA = function queryA() {
return new Promise(resolve => {
$.ajax({
url: '/temp/list',
success: resolve
});
});
};
let queryB = function queryB() {
return new Promise(resolve => {
$.ajax({
url: '/temp/info',
success: resolve
});
});
};
let queryC = function queryC() {
return new Promise(resolve => {
$.ajax({
url: '/temp/add',
method: 'POST',
success: resolve
});
});
};
let promise = queryA();
promise.then(result => {
console.log('A', result);
return queryB();
}).then(result => {
console.log('B', result);
return queryC();
}).then(result => {
console.log('C', result);
});
AXIOS
???????那么既然promise
這么香,為何不用一個基于promise
來管理的AJAX庫呢?AXIOS就是這樣一個寶藏,它是一個基于promise
管理的類庫
- 發送請求
// axios.get(url[,config])
axios.get('/temp/info', {
params: {
name: 'Leonard',
age: 18
}
});
//=>配置項中傳遞的內容都相當于基于請求主體專遞給服務器
//=>但是傳遞給服務器的內容格式是RAW(JSON格式的字符串)
//=>不是X-WWW-FORM-URLENCODED
// axios.post(url[,data[,config]])
axios.post('/temp/add', {
name: 'Leonard',
age: 18
});
//=>一次并發多個請求
let sendAry = [
axios.get('/temp/list'),
axios.get('/temp/info'),
axios.get('/temp/add')
]
axios.all(sendAry).then(result => {
console.log(result); //=>是一個數組,分別存儲著每一個請求的結果
})
//=> 也可以寫成
axios.all(sendAry).then(axios.spread((resA,resB,resC) => {...})
- 請求返回信息
let promise = axios.get('/package.json', {
params: {
lx: 12
}
});
promise.then(result => {
console.log(result); //=>獲取的結果是一個對象
/*
* data:從服務器獲取的響應主體內容
* headers:從服務器獲取的響應的頭信息
* request:創建的AJAX實例
* status:狀態碼
* statusText:狀態碼的描述
* config:基于AXIOS發送請求的時候做的配置項
*/
}).catch(msg => {
console.log(msg); //=>請求失敗的原因
});
- 初始化一些常用的配置項
//=>設置公共地址
axios.defaults.baseURL = 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp';
//=>響應攔截處理,可以直接取出響應主體內容以便后續使用
axios.interceptors.response.use(result => result.data);
//=>自定義校驗規則
axios.defaults.validateStatus = status => /^(2|3)\d{2}$/.test(status);
//=>設置在POST請求中基于請求主體向服務器發送內容的格式,默認是RAW,項目中常用的是URL-ENCODEED格式
axios.defaults.headers['Content-Type'] = 'appliction/x-www-form-urlencoded';
//=>對請求內容進行處理
axios.defaults.transformRequest = data => {
//=>DATA:就是請求主體中需要傳遞給服務器的內容(對象)
let str = ``;
for (let attr in data) {
if (data.hasOwnProperty(attr)) {
str += `${attr}=${data[attr]}&`;
}
}
return str.substring(0, str.length - 1);
};
- 更詳細地進行學習可以參考axios
- 最后,我們基于PROMISE再封裝一款簡易版AJAX庫
~(function(window) {
//=>設置默認的參數配置項
let _default = {
method: 'GET',
url: '',
baseURL: '',
headers: {},
dataType: 'JSON',
data: null,
params: null,
cache: true
};
//=>基于PROMISE設計模式管理AJAX請求
let ajaxPromise = function ajaxPromise(options) {
let {url, baseURL, method, data, dataType, headers, cache, params} = options;
//=>把傳遞的參數進一步進行處理
if (/^(GET|DELETE|HEAD|OPTIONS)$/i.test(method)) {
//=>GET系列
if (params) {
url += `${ajaxPromise.check(url)}${ajaxPromise.formatData(params)}`;
}
if (cache === false) {
url += `${ajaxPromise.check(url)}_=${+(new Date())}`;
}
data = null;//=>請求主體清空
} else {
//=>POST系列
if (data) {
data = ajaxPromise.formatData(data);
}
}
//=>基于PROMISE發送AJAX
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest;
xhr.open(method, `${baseURL}${url}`);
//=>如果HEADERS存在,我們需要設置請求頭
if (headers !== null && typeof headers === 'object') {
for (let attr in headers) {
if (headers.hasOwnProperty(attr)) {
let val = headers[attr];
if (/[\u4e00-\u9fa5]/.test(val)) {
//=>VAL中包含中文:我們把它進行編碼
val = encodeURIComponent(val);
}
xhr.setRequestHeader(attr, val);
}
}
}
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (/^(2|3)\d{2}$/.test(xhr.status)) {
let result = xhr.responseText;
dataType = dataType.toUpperCase();
dataType === 'JSON' ? result = JSON.parse(result) : (dataType === 'XML' ? result = xhr.responseXML : null);
resolve(result);
return;
}
reject(xhr.statusText);
}
};
xhr.send(data);
});
};
//=>把默認配置暴露出去,后期用戶在使用的時候可以自己設置一些基礎的默認值(發送AJAX請求的時候按照用戶配置的信息進行處理)
ajaxPromise.defaults = _default;
//=>把對象轉換為URLENCODED格式的字符串
ajaxPromise.formatData = function formatData(obj) {
let str = ``;
for (let attr in obj) {
if (obj.hasOwnProperty(attr)) {
str += `${attr}=${obj[attr]}&`;
}
}
return str.substring(0, str.length - 1);
};
ajaxPromise.check = function check(url) {
return url.indexOf('?') > -1 ? '&' : '?';
};
['get', 'delete', 'head', 'options'].forEach(item => {
ajaxPromise[item] = function(url, options = {}) {
options = {
..._default,//=>默認值或者基于defaults修改的值
...options,//=>用戶調取方法傳遞的配置項
url: url,//=>請求的URL地址(第一個參數:默認配置項和傳遞的配置項中都不會出現URL,只能這樣獲取)
method: item.toUpperCase()
};
return ajaxPromise(options);
};
});
['post', 'put', 'patch'].forEach(item => {
ajaxPromise[item] = function anonymous(url, data = {}, options = {}) {
options = {
..._default,
...options,
url: url,
method: item.toUpperCase(),
data: data
};
return ajaxPromise(options);
};
});
window.ajaxPromise = ajaxPromise;
})(window);