AJAX基礎知識及核心原理詳解。前後端分離和不分離的優勢與弊端

摘要： AJAX基礎知識及核心原理解讀 AJAX基礎知識 async javascript and xml 非同步的JS和XML XML：可擴充套件的標記語言 ajax之所以稱為非同步的js和xml，主要原因是：以前最開始使用ajax實現客戶端和服務端資料通訊的時候，傳輸資料的格式...

AJAX基礎知識及核心原理解讀

AJAX基礎知識

async javascript and xml 非同步的JS和XML

XML：可擴充套件的標記語言

ajax之所以稱為非同步的js和xml，主要原因是：以前最開始使用ajax實現客戶端和服務端資料通訊的時候，傳輸資料的格式一般都是xml格式的資料，我們把他稱之為非同步的js和xml（現在一般都是基於JSON格式來進行資料傳輸的）

<?xml version="1.0" encoding="UTF-8"?>
<root>
<student>
<name>海洋</name>
<age>10</age>
<score>
<deutsch>100</deutsch>
<IT>100</IT>
<english>100</english>
</score>
</student>
</root>

非同步的JS

這裡的非同步不是說ajax只能基於非同步進行請求（雖然建議都是使用非同步程式設計），這裡的非同步特指的是 區域性重新整理

區域性重新整理 VS 全域性重新整理

基於原生JS實現AJAX

// 建立一個AJAX物件
let xhr = new XMLHttpRequest(); // 不相容IE6及更低版本瀏覽器（IE6：ActiveXObject）

// 開啟請求地址(可以理解為一些基礎配置，但是並沒有傳送請求呢)
xhr.open([method],[url],[async],[userName],[passWord]);

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

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

分析第二步中的細節點

// 每隔一分鐘重新請求伺服器端最新的資料，然後展示在頁面中（頁面中某些資料實時重新整理）
setTimeout(()=>{
$.ajax({
url: 'getList?lx = news',
...
success: result=>{
// 第一次請求資料回來，間隔一分鐘後，瀏覽器又傳送一次請求，但是新發送的請求不論是地址還是傳遞的引數都和第一次一模一樣，瀏覽器很有可能會把上一次的資料獲取，而不是獲取最新的資料
}
})
},600)

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

}
})
},600)

1. 原因：還是因為GET是URL傳參給伺服器

   有一種比較簡單的黑客技術：URL劫持，也就是可以把客戶端傳遞給伺服器的資料劫持到，導致資訊洩露

URL:請求資料的地址（API地址），在真實專案中，後臺開發工程師會編寫一個API文件，在API文件中彙總了獲取哪些資料需要使用哪些地址，我們按照文件操作即可

ASYNC：非同步（SYNC 同步），設定當前AJAX請求是非同步的還是同步的，不寫預設是非同步（TRUE），如果設定為FALSE，則代表當前請求是同步的

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

分析第三步中的細節點

AJAX中其他常用的屬性和方法

面試題：AJAX中總共支援幾個方法？

let xhr = new XMLHttpRequest();
console.dir(xhr);

//【屬性】
// 1.readyState：儲存的是當前AJAX的狀態碼
// response/responseText/responseXML:都是用來接收伺服器返回的響應主體中的內容，只是根據伺服器返回內容格式的不一樣，我們使用不同的屬性接收即可
// responseText是最常用的，接收的結果是字串格式的（一般伺服器返回的資料都是JSON格式字串）
// responseXML偶爾會用到，如果伺服器返回的是XML文件資料，我們需要使用這個屬性接收
// status：記錄了伺服器端返回的HTTP狀態碼
// statusText：對返回的狀態碼的描述
// timeout：設定當前AJAX請求的超時時間，假設我們設定時間為3000ms，從AJAX 請求傳送開始，3秒後響應主體內容還沒有返回，瀏覽器會把當前AJAX請求任務強制斷開

// 【方法】
// abort()：強制中斷AJAX請求
// getAllResponseHeaders():獲取全部的響應頭資訊（獲取的結果是一堆字串文字）
// getResponseHeader(key):獲取指定屬性名的響應頭資訊，例如：xhr.getResponseHeader('date')獲取響應頭中儲存的伺服器的時間
// open():開啟一個URL地址
// overrideMimeType():重寫資料的MIME型別
// send():傳送AJAX請求（括號中寫的是客戶端基於請求主體把資訊傳遞給伺服器）
// setRequestHeader(key,value):設定請求頭資訊（可以是設定自定義請求頭資訊）

// [事件]
// onabort：當AJAX被中斷請求時觸發這個事件
// onreadystatechange：AJAX狀態發生改變會觸發這個事件
// ontimeout:當AJAX請求超時，會觸發這個事件

例子：

let xhr = new XMLHttpRequest();
xhr.open('get','temp.json?_=' + Math.random(), true);
xhr.setRequestHeader('aaa', '123'); // 注意：請求頭部的內容不得出現中文漢字。設定請求頭資訊必須在OPEN之後和SEND之前

// 設定超時
xhr.timeout = 10;
xhr.ontimeout = ()=>{
console.log('當前請求已經超時')；
xhr.abort();
};


xhr.onreadystatechange = ()=>{
let {readyState:state, status} = xhr;
if(!/^(2|3)\d{2}$/.test(status)) 
return;

// 在狀態為2的時候就可以獲取響應頭資訊
if (state === 2){
let headerAll = xhr.getAllResponseHeaders(),
serverDate = xhr.getResponseHeader('date'); // 獲取的伺服器時間是格林尼治時間（相比北京時間差了8小時）,通過new Date 可以把這個時間轉換為北京時間
console.log(headerAll, new Date(serverDate);
return;
}

// 在狀態為4的時候響應主體內容就已經回來了
if (state === 4){
let valueText = xhr.responseText, // 獲取到的結果一般都是JSON字串（可以使用JSON.PARSE把其轉換為JSON物件）
valueXML = xhr.responseXML; // 獲取到的結果是XML格式的資料（可以通過XML的一些常規操作獲取儲存的指定資訊）
// 如果伺服器返回的是XML文件，用responseText獲取的結果是字串，而用responseXML獲取的是標準XML文件
console.log(valueText, valueXML);
}
};
xhr.send('name=hy&age=6&sex=man');

JS中常用的編碼和解碼方法

str = '你好海洋 哈哈'
"你好海洋 哈哈"
escape(str)
"%u4F60%u597D%u6D77%u6D0B%20%u54C8%u54C8"
unescape("%u4F60%u597D%u6D77%u6D0B%20%u54C8%u54C8")
"你好海洋 哈哈"

1. encodeURI / decodeURI : 基本上所有的程式語言都支援

str = '你好海洋 哈哈'
"你好海洋 哈哈"
encodeURI(str)
"%E4%BD%A0%E5%A5%BD%E6%B5%B7%E6%B4%8B%20%E5%93%88%E5%93%88"
decodeURI("%E4%BD%A0%E5%A5%BD%E6%B5%B7%E6%B4%8B%20%E5%93%88%E5%93%88")
"你好海洋 哈哈"

1. 當我們通過URL問號傳參的時候，我們傳遞的引數值還是一個URL或者包含很多的特殊字元，此時為了不影響主要的URL，我們需要把傳遞的引數值進行編碼，使用encodeURI不能編碼一些特殊字元，所以只能使用恩codeURLComponent處理

str = '你好海洋 哈哈'
"你好海洋 哈哈"
encodeURIComponent(str)
"%E4%BD%A0%E5%A5%BD%E6%B5%B7%E6%B4%8B%20%E5%93%88%E5%93%88"
decodeURIComponent("%E4%BD%A0%E5%A5%BD%E6%B5%B7%E6%B4%8B%20%E5%93%88%E5%93%88")
"你好海洋 哈哈"

let str = 'http://wudiufo.github.io/?',
obj = {
name:'haiyang',
age:'8';
url:'http://www.haiyang.com/?lx=1'
};
// 需求：把obj中的每一項屬性名和屬性值拼接到URL末尾，通過問號傳參的方式
for(let key in obj){
str+=`${key}=${encodeURIComponent(obj[key])}&`;
// 不能使用encodeURI，必須使用encodeURIComponent，原因是encodeURI不能編碼特殊的字元
}
console.log(str.replace(/&$/g), '');

// 後期獲取URL問號引數的時候，我們把獲取的值在依次的解碼即可
String.prototype.myQueryUrlParameter=function myQueryUrlParameter(){
let reg=/[?&]([^?&=]+)(?:=([^?&=]*))?/g,
obj={};
this.replace(reg,(...arg)=>{
let [,key,value]=arg;
obj[key]=decodeURIComponent(value); //此處獲取的時候可以進行解碼 
})；
return obj；
}

AJAX中的同步和非同步程式設計

xhr.send() : 任務開始
xhr.readState===4 : 任務結束

let xhr = new XMLHttpRequest();
xhr.open('get', 'temp.json', false);
xhr.onreadystatechange = () =>{
console.log(xhr.readyState);
};
xhr.send();
// 只輸出一次結果是4

let xhr = new XMLHttpRequest();
xhr.open('get', 'temp.json', false);
xhr.send(); // [同步]開始傳送AJAX請求，開啟AJAX任務，在任務沒有完成之前，什麼事情都做不了（下面繫結事件也做不了）=》loading =》當readyState===4的時候AJAX任務完成，開始執行下面的操作
// readyState===4
xhr.onreadystatechange = () =>{
console.log(xhr.readyState);
};
// 繫結方法之前狀態已經為4了，此時AJAX的狀態不會再改變成其他的值了，所以事件永遠都不會被觸發，一次都沒執行方法（使用AJAX同步程式設計，不要把send放在事件監聽前，這樣我們無法再繫結的方法中獲取到響應主體的內容）

let xhr = new XMLHttpRequest();
xhr.open('get', 'temp.json');
xhr.onreadystatechange = () =>{
console.log(xhr.readyState);
};
xhr.send();
// 輸出3次，結果分別是2，3 ,4

let xhr = new XMLHttpRequest();
xhr.open('get', 'temp.json');
xhr.send();
// xhr.readyState===1
xhr.onreadystatechange = () =>{
console.log(xhr.readyState);
};
// 2,3,4

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = () =>{
console.log(xhr.readyState);
};
xhr.open('get', 'temp.json');
xhr.send();
// 1,2,3,4

let xhr = new XMLHttpRequest();
// xhr.readyState===0
xhr.onreadystatechange = () =>{
console.log(xhr.readyState);
};
xhr.open('get', 'temp.json',false);
// xhr.readyState===1,AJAX特殊處理了一件事，執行OPEN狀態變為1，會主動把之前監聽的方法執行一次，然後再去執行SEND
xhr.send();
// xhr.readyState===4 AJAX任務結束，住任務佇列完成
// 1,4

實戰案例：倒計時搶購

1，結構：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script src="./1.js"></script>
</body>
</html>

2, 互動：

~ function() {
let box = document.getElementById('box');
let serverTime = null;


let fn = () => {
// 1，計算當前時間和目標時間的差值
// new Date（）：獲取的是客戶端本機時間（會受到客戶端自己調整時間的影響），重要的時間參考不能基於這個完成，不論哪一個客戶端都要基於相同的伺服器時間計算
// 每間隔一秒鐘，我們需要把第一次獲取的伺服器時間進行累加

serverTime = serverTime + 1000;


let tarTime = new Date('2018/12/22 12:00:00').getTime(),
spanTime = tarTime - serverTime;

// 2,計算差值中包含多少時分秒
if (spanTime < 0) {
// 已經錯過了搶購時間（已經開搶了）
box.innerHTML = '開槍';
clearInterval(autoTimer);
return;
}

let hours = Math.floor(spanTime / (1000 * 60 * 60));
spanTime -= hours * 3600000;
let minus = Math.floor(spanTime / (1000 * 60));
spanTime -= minus * 60000;
let seconds = Math.floor(spanTime / 1000);
hours < 10 ? hours = '0' + hours : null;
minus < 10 ? minus = '0' + minus : null;
seconds < 10 ? seconds = '0' + seconds : null;

box.innerHTML = `距離開槍還剩下 ${hours}:${minus}:${seconds}`;
};

let autoTimer = setInterval(fn, 1000);



// 從伺服器端獲取伺服器時間
let getServerTime = () => {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
// console.log(xhr.readyState);
// HEAD請求方式，狀態碼中沒有3（不需要等待響應主體內容）
if (!/^(2|3)\d{2}$/.test(xhr.status)) return;
if (xhr.readyState === 2) {
serverTime = new Date(xhr.getResponseHeader('date')).getTime();
fn();
}
};
xhr.open('head', 'temp.xml', true);
xhr.send(null);

// 1,伺服器返回的時間在響應頭就有，我們只需要獲取響應頭資訊即可，沒必要獲取響應主體內容，所以請求方式使用HEAD即可
// 2，必須使用非同步程式設計：同步程式設計我們無法再狀態為2或3的時候做一些處理，而我們獲取響應頭資訊，在狀態為2的時候就可以獲取了，所以需要使用非同步
// 3,在狀態為2的時候就把伺服器時間獲取到
// 獲取伺服器時間總會出現時間差的問題，伺服器端把時間記錄好，到客戶端獲取到時間有延遲差（例如：伺服器返回的時候記錄的是10:00，到客戶端獲取的時候已經是10:01，但是客戶端獲取的結果依然是10:00，這樣就有了1秒鐘的時間差）【儘可能的減少時間差，是我們優化的全部目的】
};

getServerTime();

}();

AJAX類庫的封裝

JQ中AJAX操作詳解

$.ajax({
url:'xxx.txt', //請求API地址
method:'get', //請求方式GET/POST...，在老版本JQ中使用的是type，使用type和method實現的是相同的效果
dataType:'json', //dataType只是我們預設獲取結果的型別，不會影響伺服器的返回，（伺服器端一般給我們返回的都是JSON格式的字串），如果我們預設的是JSON，那麼類庫中將把伺服器返回的字串轉換為JSON物件，如果我們預設的是text（預設值），我們把伺服器獲取的結果直接拿過來操作即可，我們預設的值還可以是xml等
cache：false, // 設定是否清除快取，只對GET系列請求有作用，預設是true，有快取，手動設定為false，無快取，JQ類庫會在請求URL的末尾追加一個隨機數來清除快取
data:null, //我們通過data可以把一些資訊傳遞給伺服器；GET系列請求會把data中的內容拼接在URL的末尾通過問號傳參的方式傳遞給伺服器，POST系列請求會把內容放在請求主體中傳遞給伺服器。data的值可以設定為兩種格式：字串，物件，如果是字串，設定的值是什麼傳遞給伺服器的就是什麼，如果設定的是物件，JQ會把物件變為 xxx=xxx&xxx=xxx 這樣的字串傳遞給伺服器
async：true，//設定同步或者非同步，預設是true代表非同步，false是同步
success:function(result){
// 當AJAX請求成功（readyState===4 & status是以2或者4開頭的）
// 請求成功後JQ會把傳遞的回撥函式執行，並且把獲取的結果當做實參傳遞給回撥函式（result就是我們從伺服器獲取的結果）
},
error:function(msg){}, // 請求錯誤觸發回撥函式
complete：function(){}, // 不論請求是錯誤的還是正確的都會觸發回撥函式（他是完成的意思）
})

封裝屬於自己的AJAX類庫

【支援的引數】

method/type
data
dataType
async
cache
success

~ function() {
class ajaxClass {
// SEND AJAX
init() {
// THIS:EXAMPLE
let xhr = new XMLsHttpRequest();
xhr.onreadystatechange = () => {
if (!/[23]\d{2}$/.test(xhr.status)) return;
if (xhr.readyState === 4) {
let result = xhr.responseText;
// DATA-TYPE
switch (this.dataType.toUpperCase()) {
case 'TEXT':
case 'HTML':
break;
case 'JSON':
result = JSON.parse(result);
break;
case 'XML':
result = xhr.responseXML;
}
this.success(result);
};
};

// DATA
if (this.data != null) {
this.formatData();
if (this.isGET) {
this.url += this.querySymbol() + this.data;
this.data = null;
}
}

// CACHE
this.isGET ? this.cacheFn() : null;

xhr.open(this.method, this.url, this.async);
xhr.send(this.data);
}
//把傳遞的物件格式data轉換為字串格式的data
formatData() {
// THIS:EXAMPLE
if (Object.prototype.toString.call(this.data) === '[object Object]') {
let obj = this.data,
str = ``;
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
str += `${key}=${obj[key]}&`;
}
}
str = str.replace(/&$/g, '');
this.data = str;
}
}

cacheFn() {
// THIS:EXAMPLE
!this.cache ? this.url += `${this.querySymbol()}_=${Math.random()}` : null;


}

querySymbol() {
// THIS:EXAMPLE
return this.querySymbol.indexof('?') > -1 ? '&' : '?';
}
}

// init parameters
window.ajax = function({
url = null,
method = 'GET',
type = 'null',
data = null,
dataType = 'JSON',
cache = true,
async = true,
success = null
} = {}) {
let example = new ajaxClass();
example.url = url;
example.method = type === null ? method : type;
example.data = data;
example.dataType = dataType;
example.cache = cache;
example.async = async;
example.success = typeof success === 'function' ? success : new Function();
example.isGET = /^(GET|DELETE|HEAD)$/i.test(example.method);
example.init();
return example;
};
}();
ajax({});

優化程式碼：

~ function() {
class ajaxClass {
// SEND AJAX
init() {
// THIS:EXAMPLE
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (!/[23]\d{2}$/.test(xhr.status)) return;
if (xhr.readyState === 4) {
let result = xhr.responseText;
// DATA-TYPE
try {
switch (this.dataType.toUpperCase()) {
case 'TEXT':
case 'HTML':
break;
case 'JSON':
result = JSON.parse(result);
break;
case 'XML':
result = xhr.responseXML;
}
} catch (e) {

}

this.success(result);
};
};

// DATA
if (this.data != null) {
this.formatData();
if (this.isGET) {
this.url += this.querySymbol() + this.data;
this.data = null;
}
}

// CACHE
this.isGET ? this.cacheFn() : null;

xhr.open(this.method, this.url, this.async);
xhr.send(this.data);
}
//把傳遞的物件格式data轉換為字串格式的data
formatData() {
// THIS:EXAMPLE
if (Object.prototype.toString.call(this.data) === '[object Object]') {
let obj = this.data,
str = ``;
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
str += `${key}=${obj[key]}&`;
}
}
str = str.replace(/&$/g, '');
this.data = str;
}
}

cacheFn() {
// THIS:EXAMPLE
!this.cache ? this.url += `${this.querySymbol()}_=${Math.random()}` : null;


}

querySymbol() {
// THIS:EXAMPLE
return this.querySymbol.indexof('?') > -1 ? '&' : '?';
}
}

// init parameters
window.ajax = function({
url = null,
method = 'GET',
type = 'null',
data = null,
dataType = 'JSON',
cache = true,
async = true,
success = null
} = {}) {
let _this = new ajaxClass();
['url', 'method', 'data', 'dataType', 'cache', 'async', 'success'].forEach((item) => {
if (item === 'method') {
_this.method = type === null ? method : type;
return;
}
if (item === 'success') {
_this.success = typeof success === 'function' ? success : new Function();
return;
}
_this[item] = eval(item);
});

_this.isGET = /^(GET|DELETE|HEAD)$/i.test(_this.method);
_this.init();
return _this;
};
}();
ajax({});