XMLHttpRequest
get请求使用
const xhr = new XMLHttpRequest();
xhr.open("GET", "/data/test.json", true);
xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {alert(xhr.responseText);} else {console.log("其他情况");}}
};xhr.send(null);
post请求
const xhr = new XMLHttpRequest();
xhr.open("POST", "/data/test.json", true);
xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {alert(xhr.responseText);} else {console.log("其他情况");}}
};const postData = {userName: "zhangsan",password: "xxx",
};xhr.send(JSON.stringify(postData));
xhr.readyState
用的最多的还是4
xhr.status
手写AJAX
function myAjax(url, method = "GET", data = null, headers = {}) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.open(method, url, true);for (const [key, value] of Object.entries(headers)) {xhr.setRequestHeader(key, value);}xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {try {const response = xhr.responseText? JSON.parse(xhr.responseText): null;resolve(response);} catch (error) {reject(new Error("JSON解析失败"));}} else {const errorMap = {400: "请求参数错误",401: "未授权",403: "禁止访问",404: "资源未找到",500: "服务器内部错误",};reject(new Error(errorMap[xhr.status] || `请求失败，状态码：${xhr.status}`));}}};xhr.send(method.toUpperCase() === "GET" ? null : data);});
}
ajax的常见使用
-
传统 XMLHttpRequest：兼容性好，适合旧项目。
-
Fetch API：现代、简洁，推荐用于新项目。
-
Axios：功能强大，适合企业级应用。
存储
cookie
缺点
localStorage和sessionStorage
区别
