# Ajax的重要知识点有哪些 ## 目录 1. [Ajax概述](#ajax概述) 2. [核心工作原理](#核心工作原理) 3. [XMLHttpRequest对象详解](#xmlhttprequest对象详解) 4. [Fetch API对比分析](#fetch-api对比分析) 5. [跨域请求解决方案](#跨域请求解决方案) 6. [数据格式处理](#数据格式处理) 7. [错误处理与调试](#错误处理与调试) 8. [性能优化策略](#性能优化策略) 9. [安全注意事项](#安全注意事项) 10. [现代框架中的Ajax应用](#现代框架中的ajax应用) --- ## Ajax概述 ### 定义与历史背景 Asynchronous JavaScript and XML（Ajax）是2005年由Jesse James Garrett提出的技术概念，通过**异步通信机制**实现了网页的局部刷新，彻底改变了传统Web应用的交互模式。 ### 技术特点 - **异步数据交换**：不阻塞用户界面 - **基于标准技术**：组合使用XMLHttpRequest、DOM、JavaScript等 - **提升用户体验**：减少整页刷新带来的闪烁 ### 典型应用场景 1. 表单验证（实时校验用户名） 2. 无限滚动加载（社交媒体动态） 3. 自动补全搜索（Google搜索建议） 4. 购物车更新（电商网站） --- ## 核心工作原理 ```mermaid sequenceDiagram User->>Browser: 触发事件(点击/滚动等) Browser->>Server: 发送XHR/Fetch请求 Server-->>Browser: 返回JSON/XML数据 Browser->>DOM: 动态更新页面 const xhr = new XMLHttpRequest(); xhr.open('GET', '/api/data', true); // 异步请求 xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status === 200) { console.log(JSON.parse(xhr.responseText)); } }; xhr.send(); | 属性 | 描述 |
|---|---|
| readyState | 0-未初始化,1-连接建立,2-请求接收,3-处理中,4-完成 |
| status | HTTP状态码(200成功,404未找到等) |
| responseType | 指定响应格式(json/blob/arraybuffer) |
xhr.timeout = 3000;xhr.upload.onprogress实现文件上传进度条xhr.abort()取消进行中的请求fetch('/api/data') .then(response => { if(!response.ok) throw new Error('Network error'); return response.json(); }) .then(data => console.log(data)) .catch(error => console.error(error)); | 特性 | XMLHttpRequest | Fetch API |
|---|---|---|
| 语法范式 | 回调函数 | Promise链式调用 |
| 默认携带Cookie | 是 | 需要手动配置 |
| 请求取消 | abort() | AbortController |
| 流式读取 | 不支持 | 支持Response.body |
fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload), credentials: 'include' // 携带cookie }); 浏览器同源策略要求：协议+域名+端口三者一致
服务端响应头示例：
Access-Control-Allow-Origin: https://example.com Access-Control-Allow-Methods: GET,POST,PUT Access-Control-Allow-Headers: Content-Type function handleResponse(data) { console.log(data); } const script = document.createElement('script'); script.src = 'http://other-domain.com/api?callback=handleResponse'; document.body.appendChild(script); // 序列化特殊处理 JSON.stringify(data, (key, value) => { if(typeof value === 'number') return value.toFixed(2); return value; }); // 大文件分块处理 const chunks = []; reader.onload = e => { chunks.push(e.target.result); if(chunks.length === total) { const completeData = JSON.parse(chunks.join('')); } }; // 通过ArrayBuffer处理图片 xhr.responseType = 'arraybuffer'; xhr.onload = () => { const blob = new Blob([xhr.response]); const imgUrl = URL.createObjectURL(blob); document.getElementById('img').src = imgUrl; }; // 使用async/await包装 try { const response = await fetch(url); if(!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const data = await response.json(); } catch (error) { console.error('Fetch failed:', error); Sentry.captureException(error); // 错误上报 } Cache-Control: max-age=3600// 及时释放资源 const blobUrl = URL.createObjectURL(blob); img.onload = () => URL.revokeObjectURL(blobUrl); // 认证信息处理 fetch('/api', { headers: new Headers({ 'Authorization': `Bearer ${token}`, 'X-Requested-With': 'XMLHttpRequest' }) }); useEffect(() => { const controller = new AbortController(); axios.get('/api/data', { signal: controller.signal }) .then(res => setData(res.data)) .catch(err => { if(!axios.isCancel(err)) setError(err.message); }); return () => controller.abort(); }, []); export default { methods: { async fetchData() { this.loading = true; try { this.data = await this.$http.get('/api/data'); } finally { this.loading = false; } } } } Ajax技术经过多年发展已形成完整生态体系，现代Web开发中建议： 1. 简单场景使用Fetch API 2. 复杂需求考虑axios等封装库 3. 始终关注安全性和性能指标 4. 保持对WebSocket、GraphQL等新技术的关注 “`
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
