Ajax的重要知识点有哪些

发布时间:2021-12-29 09:34:02 作者:iii
来源:亿速云 阅读:215
# 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: 动态更新页面

关键技术组成

  1. 通信载体:XMLHttpRequest对象或Fetch API
  2. 数据传输格式:JSON(占90%现代应用)、XML、Text等
  3. 事件驱动模型:onreadystatechange、Promise等

XMLHttpRequest对象详解

基础使用流程

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)

高级功能


Fetch API对比分析

基本语法示例

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));

与XHR的主要差异

特性 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
});

跨域请求解决方案

CORS机制详解

浏览器同源策略要求:协议+域名+端口三者一致

服务端响应头示例

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET,POST,PUT
Access-Control-Allow-Headers: Content-Type

开发环境解决方案

  1. 代理服务器:webpack-dev-server配置proxy
  2. JSONP原理
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最佳实践

// 序列化特殊处理
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;
};

错误处理与调试

常见错误类型

  1. 网络错误DNS解析失败、连接超时
  2. 状态码错误:500服务器错误、401未授权
  3. 解析错误:JSON格式不合法

调试技巧

// 使用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); // 错误上报
}

性能优化策略

请求优化方案

  1. 合并请求:GraphQL替代多个REST请求
  2. 缓存控制Cache-Control: max-age=3600
  3. 延迟加载:滚动到视口再触发请求

内存管理

// 及时释放资源
const blobUrl = URL.createObjectURL(blob);
img.onload = () => URL.revokeObjectURL(blobUrl);

安全注意事项

防护措施

  1. CSRF防护
    • 验证Origin/Referer头
    • 使用SameSite Cookie属性
  2. XSS防御
    • 始终对动态内容进行转义
    • 设置Content Security Policy

敏感数据处理

// 认证信息处理
fetch('/api', {
    headers: new Headers({
        'Authorization': `Bearer ${token}`,
        'X-Requested-With': 'XMLHttpRequest'
    })
});

现代框架中的Ajax应用

React示例

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();
}, []);

Vue示例

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等新技术的关注 “`

推荐阅读:
  1. rman duplicate 比較重要的知识点
  2. jquery学习之重要知识点

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

ajax

上一篇:JavaScript中wrap指的是什么意思

下一篇:Python如何处理运动员信息的分组与聚合

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》