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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的javascript --- 使用ajax与服务器进行通信的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。