什么是ajax：Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）
ajax如何工作：
- 网页中发生一个事件（页面加载、按钮点击）
- 由 JavaScript 创建 XMLHttpRequest 对象
- XMLHttpRequest 对象向 web 服务器发送请求
- 服务器处理该请求
- 服务器将响应发送回网页
- 由 JavaScript 读取响应
- 由 JavaScript 执行正确的动作（比如更新页面）
ajax的作用：在不刷新界面的的情况下从服务器请求数据，返回浏览器局部刷新界面，而不需要重新加载整个页面。
简单的实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax</title>
</head>
<body>
<script type="module">
// 先撸一个简单的
function ajax(url, onSuccess, onFailed) {
// 1. 创建 xhr
const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
// 2. 连接服务器
xhr.open('GET', url, true);
// 3. 发送
xhr.send();
// 4. 默认带上 cookie
// xhr.withCredentials = true;
// 5. 接收
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
onSuccess && onSuccess(xhr.responseText);
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
//getResponseHeader() 方法返回来自服务器响应的特定头部信息
document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
//getAllResponseHeaders() 方法返回所有来自服务器响应的头部信息。
}
}
else {
onFailed && onFailed();
}
}
}
}
// ajax('http://127.0.0.1:5500/demo.json', e => console.log(e));
// fetch('http://127.0.0.1:5500/demo.json')
// .then(res => res.json())
// .then(res => console.log(res));
let cc = null;
const mitt = {
cache: {},
on(name, func) {
this.cache[name] = func;
},
emit(name, data) {
const fn = this.cache[name];
fn && fn(data);
}
}
function adaptor(config) {
return new Promise((resolve, reject) => {
let request = new XMLHttpRequest();
request.open(
config.method.toUpperCase(),
config.url,
true
)
request.send();
request.timeout = config.timeout;
request.onabort = function () {
reject('[abort] request is abort.');
request = null;
}
if (config.cancel) {
mitt.emit('abort', function onCancel() {
request.abort();
request = null;
reject('【abort】current request is abort.')
})
}
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
setTimeout(() => resolve(request && request.responseText), 10000);
}
else {
reject('request error');
}
}
}
})
}
function dispatchRequest(config) {
return adaptor(config).then(function (response) {
return response;
}, function (reason) {
return Promise.reject(reason);
})
}
// 撸一个复杂一丢丢的
function req(config = {}) {
// 如何实现拦截
const chain = [dispatchRequest, undefined];
if (config.interceptor) {
chain.unshift(
config.interceptor.fullfilled,
config.interceptor.rejected
)
}
if (config.cancel) {
mitt.on('abort', function (cancel) {
config.cancel(cancel);
})
}
if (config.adaptor) {
chain.push(
config.adaptor.fullfilled,
config.adaptor.rejected
)
}
// [拦截器成功，拦截器失败，请求成功，请求失败，响应成功，响应失败]
// promise 链
let promise = Promise.resolve(config);
while (chain.length) {
promise = promise.then(chain.shift(), chain.shift());
}
return promise;
}
req({
url: 'http://127.0.0.1:5500/demo.json',
method: 'get',
interceptor: {
fullfilled: e => {
console.log('请求拦截成功', e);
return e;
}
},
adaptor: {
fullfilled: e => {
console.log('响应拦截成功', e);
return e;
}
},
cancel(onCancel) {
cc = onCancel;
}
})
setTimeout(() => cc && cc(), 2000);
</script>
</body>
</html>
XMLHttpRequest 对象方法
| 方法 | 描述 |
|---|---|
| new XMLHttpRequest() | 创建新的 XMLHttpRequest 对象 |
| abort() | 取消当前请求 |
| getAllResponseHeaders() | 返回头部信息 |
| getResponseHeader() | 返回特定的头部信息 |
| open(method, url, async, user, psw) |
规定请求
|
| send() | 将请求发送到服务器，用于 GET 请求 |
| send(string) | 将请求发送到服务器，用于 POST 请求 |
| setRequestHeader(header, value) |
向请求添加 HTTP 头部
|
XMLHttpRequest 对象属性
| 属性 | 描述 |
|---|---|
| onreadystatechange | 定义当 readyState 属性发生变化时被调用的函数 |
| readyState |
保存 XMLHttpRequest 的状态。
|
| responseText | 以字符串返回响应数据 |
| responseXML | 以 XML 数据返回响应数据 |
| status |
返回请求的状态号
|
| statusText | 返回状态文本（比如 "OK" 或 "Not Found"） |