javascript --- 使用ajax与服务器进行通信

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):
})

在这里插入图片描述