### Ajax全称```Async Javascript And XML``` * async:指Ajax能够创建异步的HTTP线程请求到服务器,Ajax的核心价值。 * javascript:Ajax技术实现的载体平台,js内置对象```XMLHttpRequest```操作Ajax。 * xml:一种数据格式,用来客户端和服务器交互数据,现在更多的使用json。
客户端创建Ajax并发送HTTP请求
//创建一个请求对象实例,使用ajax发送请求到服务器,执行验证并获取返回的结果
const xhr = new XMLHttpRequest;
// 请求结束后执行 获取服务器返回的数据
xhr.onloadend = function() {
const result = xhr.responseText; // 服务器返回的结果
}
// 和服务器建立连接:type请求类型(get/post),url地址,async是否为异步(默认为true 异步的)
xhr.open(type,url,async);
// 设置HTTP头: option头部,calue值 (没有要求设置,可跳过)
xhr.setRequestHeader(option,value);
// 发送HTTP请求,设置请求体数据:data数据,GET请求则为null
xhr.send(data);
监听ajax请求方式
在服务端处理的过程,ajax中需要监听,有2种方式,
一、分别监听各个阶段的事件
xhr.onloadstart = function() {} // 1 发送请求时
xhr.onprogress = function() {} // 2,3 服务端处理请求时
xhr.onloadend = function() {} // 4 请求完成时
二、监听所有请求阶段
通过xhr.readState可获取当前阶段值
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) { // 只是请求完成不一样成功
if (xhr.status == 200) { //请求成功
// status 200 ok
console.log(xhr.responseText) // 请求数据结果
} else { // 不成功
}
} else {
// 请求中...
}
}
get请求数据在地址栏传输,外部可视,安全性低,数据容量有限,使用轻便
发送一个带有参数的get请求
- get请求的参数就直接在url后面进行拼接
const xhr = new XMLHttpRequest;
// 直接在url后面加"?",然后以键值对形式拼接,参数之间以"&"分割
xhr.onloadend = function() {
// 获取服务端返回的数据
const data = xhr.responseText;
}
xhr.open("get","./data.php?a=100&b==200");
xhr.send(null);
post请求一般要借助表单来完成,表单中的数据在提交时会自动保存在请求体中,外部不可见,数据安全性高,容量大。
发送带有参数的post请求
- post请求的参数时携带在请求体中,所以不需要在url后面拼接
- post请求中需要设置
Content-Type
头的文档类型,用来告知服务端post传的数据是如何组装的,以便解析。如果是url拼接的文本内容,需要设置为application/x-www-form-urlencoded
.
const xhr = new XMLHttpRequest;
// 监听请求状态改变
xhr.onreadystatechange = function () {
// 确保请求结束
if (xhr.readyState == 4) {
// 确保请求成功
if(xhr.status == 200) {
const data = xhr.responseText;
}
}
}
// 请求行
xhr.open("post","login.php);
// 请求头 在ajax中必须明确指定post数据的编码格式
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 请求体 数据 和 编码格式一致
xhr.send(`uname=${uname}&password=${password}`);
Promise
Promise代表了一个异步操作的最终完成或者失败,支持链式调用和并行多异步操作,解决回调地狱问题
Promise是es6新增技术,一个构造函数,它可以以同步代码的方式去执行异步业务。有时需要前几个请求完成再执行就可以Promise来管理,确保之前请求完成后执行。
Promise本意"承诺信任",意思是只会执行一种,要不调用成功,要不调用失败,不会同时出现。
一个异步是持续一段事件,在Promise中分为3种状态:
- 初始化时 pending
- 完成时 fulfilled,对应执行resolve回调
- 被拒绝时 rejected,对应执行reject回调
使用Promise
// 给promise套上函数可保证页面执行时promise不会立即执行
function f(url) {
return new Promise(function (resolve, reject) {
const xhr = new XMLHttpRequest;
xhr.onloadend = () => {
if (xhr.status == 200) {
resolve(xhr.responseText)
} else {
reject("数据请求失败!")
}
}
xhr.open("get", url);
xhr.send(null);
})
}
链式调用
then()函数中的返回值能在下一个then()中获取到,这就是链式调用。如果不在then中放入参数,例Promise.then().then()
,那么后面的then()依旧可以得到之前then返回的值。
then()函数会返回一个和原来不同的新的Promise,并把上一个then()的返回结果传给这个新的Promise的then方法
f("./demo.php").then(resolve => {
console.log(`请求成功!数据;${resolve}`);
return f("./6.demo.php")
}, reject => {
console.log(reject);
return f("./6.demo.php")
}).then(resolve => {
console.log(`请求成功!数据;${resolve}`);
}, reject => {
console.log(reject);
})
Promise中的catch方法是.then(null,reject)
类似,用于发生错误时回调
f("./demo.php").catch(error => {
// 用于捕获错误
})
Promise.all
Promise.all([promise1,promise2])
并行,等待所有promise成功。
如果都成功了,则all对应的promise也成功;如果有一个失败了,则all对应的promise失败
Promise.race
Promise.race([promise1,promise2])
,返回一个promise,里面那个结果获取的快,就返回那个结果,不管结果本身是成功状态还是失败状态。
Promise.resolve()
promise.resolve()
可以将对象转换为promise对象;
promise.resolve()
等价于new Promise(resolve => resolve('foo'))