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

参考《图解HTTP》P182
参考《JavaScript高级程序设计》(第3版)P573~P579
参考《ES6标准入门》(第3版) P276

javascript --- 使用ajax与服务器进行通信相关推荐

[转]掌握Ajax 第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 [IBM]
转自:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步 ...
掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
【JavaScript】Ajax
文章目录 1. 前后端交互 2. Ajax 2.1 Ajax概述 2.2 Ajax如何工作 2.3 XMLHttpRequest对象 2.4 使用Ajax eg:使用ajax实现页面的数据通过Node ...
[js点击]JavaScript之Ajax技术02
事件监听接口 XMLHttpRequest第一版,只能对onreadystatechange这一个事件指定回调函数.该事件对所有情况作出响应. XMLHttpRequest第二版允许对更多的事件指定回 ...
[js点击]JavaScript之Ajax技术之02
事件监听接口 XMLHttpRequest第一版,只能对onreadystatechange这一个事件指定回调函数.该事件对所有情况作出响应. XMLHttpRequest第二版允许对更多的事件指定回 ...
jquery的Ajax技术和PHP通信
jquery的Ajax技术和PHP通信为了更好的用户体验和实时交互,有时候我们需要要到ajax技术来实现和后台服务器的数据交换.而jQuery的ajax技术是我认为是最简单的,在开发过程中 ...
前端3DOM编程3——Ajax和服务端通信
1.通信基础 2.HTTP协议 3.Ajax 4.cookie 六.Ajax和服务端通信 1.通信基础 (1)Web服务器搭建服务器是一台24h不断电.不关机,提供某种服务(文件. ...
使用$.ajax向服务器发送请求
使用$.ajax向服务器发送请求 html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
promise的应用和在VUE中使用axios发送AJAX请求服务器
promise 用promise对函数封装: 原来的代码: <!DOCTYPE html> <html> <head><title>vue demo&l ...

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

javascript --- 使用ajax与服务器进行通信相关推荐

最新文章

热门文章