Ajax: (Asynchronous JavaScript and XML,異步JavaScript與XML技術)是一種有效利用JavaScript和DOM的操作.
與傳統HTTP請求的區別: Ajax允許只更新頁面的一部分,因此減少了響應中傳輸的數據量
Ajax的API: Ajax與服務器進行通信,可以使用JavaScript中原生的XMLHttpRequest對象.
使用ajax從服務器獲取數據:
let xhr = new XMLHttpRequest();
let url = 'http://192.168.1.13:8080/PowePlant...';xhr.onreadystatechange = () => {if( xhr.readyState == 4) {console.log(xhr.status);console.log(xhr.responseText);}
}
xhr.open("post", url, true);
xhr.send(null);
上面是在本地運行的網頁中請求的數據,請求的數據在另外一臺主機(192.168.1.13,端口8080)
屬于跨域請求:
// 注:在Firefox3.5+、Safari 4+、Chrome、IOS版的Safari和Android平臺中的Webkit都通過XMLHttpRequest對象實現了對
// CORS(跨域資源共享)的原生支持,只用在xhr.open()方法中傳入絕對URL即可.
使用post像服務器傳遞參數:
let xhr = new XMLHttpRequest();
let url = "http://192.168.1.13:8080/path"
xhr.onreadystatechange = () => {if(xhr.readyState === 4) {console.log(xhr.responseText)} else {console.log('Request was unsuccessful: " + xhr.status)}
}
xhr.open("post", url, true);
// 創建請求的參數
let myData= new FormData();
myData.append("year", "2019");
myData.append("month", "6");// 發送請求
xhr.send(myData);
注意到,以上的例子中有好多代碼是重復的,并且模式是固定的。故可以做如下封裝:
let myPost = (url, params) => {let promise = new Promise(( resolve, reject) => {// 處理參數let myData = new FormData();for (let key of Object.keys(params)) {myData.append(key, params[key]);}let xhr = new XMLHttpRequest();xhr.onreadystatechange = () => {if (xhr.readyState !== 4) { // 此時會有4個狀態,當為4時,表示成功return } else { // 請求成功if(JSON.parse(xhr.responseText).code === 200) {resolve(xhr.responseText)} else {reject(xhr.status);}}}xhr.open("post", url, true);xhr.send(myData);})return promise
}// 使用定義的myPost
let url = "http://192.168.1.13:8080/....";
let params = {year: "2019",month: "7",powerPlantId: "010102"
}
myPost(url, params).then(function(res) {console.log("i promise: ", res);
}, function(err) {console.err("i`m not promise: ", err):
})
參考《圖解HTTP》P182
參考《JavaScript高級程序設計》(第3版)P573~P579
參考《ES6標準入門》(第3版) P276
