辽宁省朝阳市做网站,网站建设的项目说明书,网上注册公司流程及费用,网站开发调研问卷文章目录 Ajax 核心知识点全面总结一、Ajax 基础概念1、定义2、核心特点 二、Ajax 工作原理与核心组件1、工作流程2、XMLHttpRequest#xff08;XHR#xff09;对象 三、Ajax 请求方法与参数1、常见请求方法2、请求参数处理 四、Ajax 异步与错误处理1、异步处理2、错误处理 五… 文章目录 Ajax 核心知识点全面总结一、Ajax 基础概念1、定义2、核心特点 二、Ajax 工作原理与核心组件1、工作流程2、XMLHttpRequestXHR对象 三、Ajax 请求方法与参数1、常见请求方法2、请求参数处理 四、Ajax 异步与错误处理1、异步处理2、错误处理 五、跨域资源共享CORS与解决方案1、跨域问题2、解决方案 六、Ajax 与现代替代方案1、Fetch APIES62、Axios第三方库 七、Ajax 最佳实践与性能优化八、Ajax 安全性考虑九、经典 Ajax 示例原生 JavaScript十、Ajax 封装全局 API Ajax 核心知识点全面总结
一、Ajax 基础概念
1、定义
AjaxAsynchronous JavaScript and XML是一种 无需重新加载整个网页即可通过 JavaScript 与服务器异步交换数据的技术用于创建更流畅、响应更快的 Web 应用。
2、核心特点
异步通信客户端与服务器通信时不阻塞页面渲染用户可继续交互。数据驱动更新仅更新页面部分内容减少带宽消耗。多技术融合结合 JavaScript、XML或 JSON、HTML/CSS 等技术。
二、Ajax 工作原理与核心组件
1、工作流程
客户端通过 JavaScript 发起请求浏览器创建 XMLHttpRequestXHR 对象与服务器通信服务器处理请求并返回数据XML、JSON 等JavaScript 接收数据并更新页面 DOM。
2、XMLHttpRequestXHR对象
创建方式const xhr new XMLHttpRequest(); 关键方法
open(method, url, async)设置请求方法、URL 和异步模式默认 true。send(data)发送请求data 为请求体GET 请求时可为 null。abort()取消请求。
关键属性
readyState请求状态0 - 未初始化1 - 已调用 open2 - 已接收响应头3 - 处理中4 - 请求完成。statusHTTP 状态码如 200 成功404 未找到。responseText/responseXML返回的文本 / XML 数据。
事件监听
onreadystatechange状态变化时触发常用于检查 readyState 4 且 status 200。
三、Ajax 请求方法与参数
1、常见请求方法
方法用途特点GET获取资源参数附在 URL 后如 ?keyvalue有长度限制浏览器会缓存。POST提交数据参数在请求体中无长度限制不会缓存。DELETE删除资源删除指定资源需服务器支持。PUT更新资源覆盖式更新需服务器支持。
2、请求参数处理
GET 请求url ?param1value1param2value2POST 请求需设置请求头 Content-Type如
xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);
xhr.send(param1value1param2value2);或发送 JSON 数据
xhr.setRequestHeader(Content-Type, application/json);
xhr.send(JSON.stringify({ param1: value1, param2: value2 }));四、Ajax 异步与错误处理
1、异步处理
传统回调通过 onreadystatechange 监听请求完成。Promise 封装现代方式
function fetchData(url) {return new Promise((resolve, reject) {const xhr new XMLHttpRequest();xhr.open(GET, url);xhr.onload () resolve(xhr.response);xhr.onerror () reject(new Error(请求失败));xhr.send();});
}2、错误处理
onerror 事件处理网络错误如服务器不可达。状态码判断
if (xhr.status 200 xhr.status 300) {// 成功处理
} else {// 错误处理如 404、500 等
}五、跨域资源共享CORS与解决方案
1、跨域问题
同源策略限制浏览器禁止不同域名协议、域名、端口任一不同的请求交互。常见错误Access-Control-Allow-Origin 缺失。
2、解决方案
服务器配置 CORS在响应头中添加
Access-Control-Allow-Origin: * 允许所有域名生产环境建议指定域名
Access-Control-Allow-Methods: GET, POST, PUT代理服务器前端请求本地代理由代理转发至目标服务器如 Node.js 中间件。JSONP利用 script 标签跨域特性仅支持 GET 请求
function loadScript(url, callback) {const script document.createElement(script);script.src url ?callback${callback.name};window[callback.name] callback;document.body.appendChild(script);
}六、Ajax 与现代替代方案
1、Fetch APIES6
优点更简洁的 Promise 接口支持流式响应。示例
fetch(https://api.example.com/data).then(response response.json()).then(data console.log(data)).catch(error console.error(error));2、Axios第三方库
优点支持 Promise、请求 / 响应拦截、自动转换 JSON、浏览器与 Node 通用。
axios.get(https://api.example.com/data).then(response console.log(response.data)).catch(error console.error(error));七、Ajax 最佳实践与性能优化
请求优化
合并多个小请求为大请求减少 HTTP 连接开销。使用 GET 请求缓存数据设置 Cache-Control 头。
防抖与节流避免频繁请求如搜索联想功能。
超时处理设置 xhr.timeout 和 ontimeout 事件。 请求取消使用 AbortControllerFetch API或 xhr.abort()。
八、Ajax 安全性考虑
XSS跨站脚本攻击对用户输入数据进行转义避免直接插入 DOM。CSRF跨站请求伪造使用 token 验证请求来源或设置 SameSite cookie。敏感数据传输使用 HTTPS 加密通信。
九、经典 Ajax 示例原生 JavaScript
// 发送 GET 请求
const xhr new XMLHttpRequest();
xhr.open(GET, https://api.example.com/users, true);
xhr.onreadystatechange function() {if (xhr.readyState 4 xhr.status 200) {const users JSON.parse(xhr.responseText);document.getElementById(users-list).innerHTML users.map(user li${user.name}/li).join();}
};
xhr.send();// 发送 POST 请求
const xhrPost new XMLHttpRequest();
xhrPost.open(POST, https://api.example.com/login, true);
xhrPost.setRequestHeader(Content-Type, application/json);
xhrPost.onload function() {if (xhrPost.status 200) {alert(登录成功);}
};
xhrPost.send(JSON.stringify({ username: user, password: pass }));十、Ajax 封装全局 API
/*** 通用 AJAX 请求工具* 封装了 GET、POST、PUT、DELETE 等常用 HTTP 请求方法*/
const HttpUtils {/*** 发送 GET 请求* param {string} url - 请求URL* param {Object} params - 请求参数* param {Object} options - 额外配置选项* returns {PromiseObject} - 返回Promise对象*/get(url, params {}, options {}) {return this.request(GET, url, params, null, options);},/*** 发送 POST 请求* param {string} url - 请求URL* param {Object} data - 请求数据* param {Object} options - 额外配置选项* returns {PromiseObject} - 返回Promise对象*/post(url, data {}, options {}) {return this.request(POST, url, {}, data, options);},/*** 发送 PUT 请求* param {string} url - 请求URL* param {Object} data - 请求数据* param {Object} options - 额外配置选项* returns {PromiseObject} - 返回Promise对象*/put(url, data {}, options {}) {return this.request(PUT, url, {}, data, options);},/*** 发送 DELETE 请求* param {string} url - 请求URL* param {Object} params - 请求参数* param {Object} options - 额外配置选项* returns {PromiseObject} - 返回Promise对象*/delete(url, params {}, options {}) {return this.request(DELETE, url, params, null, options);},/*** 发送 HTTP 请求* param {string} method - HTTP方法* param {string} url - 请求URL* param {Object} params - 请求参数* param {Object} data - 请求数据* param {Object} options - 额外配置选项* returns {PromiseObject} - 返回Promise对象*/request(method, url, params, data, options) {// 处理URL参数if (params Object.keys(params).length 0) {const queryString Object.entries(params).map(([key, value]) ${encodeURIComponent(key)}${encodeURIComponent(value)}).join();url (url.includes(?) ? : ?) queryString;}// 创建基础配置const config {method,headers: {Content-Type: application/json,...options.headers},credentials: options.credentials || same-origin,...options};// 添加请求体if (data (method POST || method PUT)) {config.body JSON.stringify(data);}// 返回Promise对象return new Promise((resolve, reject) {fetch(url, config).then(response {// 检查HTTP状态码if (!response.ok) {throw new Error(HTTP error! Status: ${response.status});}// 根据Content-Type解析响应const contentType response.headers.get(Content-Type);if (contentType contentType.includes(application/json)) {return response.json();} else if (contentType contentType.includes(text/)) {return response.text();} else {return response.blob();}}).then(result resolve(result)).catch(error {console.error(Request failed:, error);reject(error);});});}
};export default HttpUtils; 以上代码封装了常用的 AJAX 请求方法支持 GET、POST、PUT、DELETE 四种 HTTP 方法。该工具使用原生的 Fetch API 实现返回 Promise 对象以便于使用 async/await 语法。主要特点
支持请求参数自动序列化自动处理响应内容类型解析JSON、文本、二进制统一的错误处理机制支持自定义请求头和其他配置选项
在你的项目中可以将此文件保存为 http-utils.js然后通过 import 语句在需要的地方引入使用例如
import HttpUtils from ./http-utils.js;// 使用示例
async function fetchData() {try {// GET 请求示例const result await HttpUtils.get(/api/users, { page: 1, size: 10 });console.log(GET 请求结果:, result);// POST 请求示例const newUser { name: John, age: 30 };const createResult await HttpUtils.post(/api/users, newUser);console.log(POST 请求结果:, createResult);} catch (error) {console.error(请求出错:, error);}
}
