AJAX
AJAX是什么
AJAX = Asynchronous JavaScript And XML.
使用AJAX可以
- 与Web 服务器交换数据
- 在不重新加载页面的情况下更新网页
有2种API实现AJAX
- XMLHttpRequest（XHR）
- fetch
XMLHttpRequest
js
function request({ method, url, data, headers, onSuccess, onError }) {
const xhr = new XMLHttpRequest()
xhr.open(method, url, true) //初始化一个请求
// 设置请求头
if (headers) {
for (const key in headers) {
xhr.setRequestHeader(key, headers[key])
}
}
// 设置回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) { //响应已完成
if (xhr.status == 200) {
onSuccess(xhr.response)
} else {
onError(xhr.status, xhr.statusText)
}
}
}
// 发送请求
xhr.send(data)
}xhr.open(method, url, async, user, password)xhr.response
取值可能类型：ArrayBuffer、Blob、Document、Object、String。通过xhr.responseType指定类型xhr.send(body)
fetch
在浏览器端任何环境可用，在Node.js端使用需安装node-fetch库。
语法：
ts
interface FetchOptions {
method?: string
headers?: HeadersInit;
body?: BodyInit;
mode?: string;
cache?: string;
credentials?: string;
redirect?: string;
referrer?: string;
referrerPolicy?: string;
integrity?: string;
signal?: AbortSignal;
}
fetch(
url: string | Request,
options?: FetchOptions
) : Promise<Response>