AJAX 完全指南：从原理到实战

于 2025-05-27 13:15:28 发布
阅读量1.2k 收藏 12
点赞数 37
CC 4.0 BY-SA版权
分类专栏： 新手保护期，从0到1学前端 文章标签： ajax 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Liu_Zhong_Yuan/article/details/148254327

本文以 "快递配送" 类比 AJAX 通信机制，系统讲解原生 AJAX、jQuery AJAX、Fetch API 与 Axios 的使用方法，帮助零基础开发者彻底掌握异步数据交互核心技能。

一、为什么需要 AJAX？从 "快递配送" 说起

1.1 传统网页的痛点

想象你在餐厅吃饭：

  • 同步模式：点完菜后必须等服务员把菜端上来，才能继续做其他事
  • 异步模式：点完菜后不用等待，可继续喝茶聊天，服务员会在菜做好时通知你

在网页中：

<!-- 传统同步页面 -->
<form action="/submit" method="POST">
    <input type="text" name="username">
    <button type="submit">提交</button>
</form>
<!-- 提交后整个页面刷新 -->

这种模式在处理表单提交、数据加载时会导致页面闪烁、用户体验差。

1.2 AJAX 的工作原理

AJAX（Asynchronous JavaScript and XML）允许在不刷新整个页面的情况下，与服务器进行异步通信并更新部分网页。

// 原生AJAX示例
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById('result').innerHTML = xhr.responseText;
    }
};
xhr.send();

执行顺序：

  1. 创建 XMLHttpRequest 对象
  2. 打开一个请求（指定 URL 和请求方法）
  3. 设置回调函数，监听状态变化
  4. 发送请求
  5. 服务器处理请求并返回数据
  6. 回调函数根据返回状态更新页面

1.3 AJAX 的应用场景

场景示例异步必要性
表单提交注册登录、评论发布无需刷新页面，提升用户体验
数据加载分页、无限滚动减少页面加载时间，提高性能
实时更新聊天消息、股票行情动态更新数据，无需用户操作
数据验证用户名查重、表单验证即时反馈，提升用户体验

二、AJAX 核心技术详解

2.1 原生 AJAX：XMLHttpRequest 对象

2.1.1 基本用法
// 完整的原生AJAX请求
const xhr = new XMLHttpRequest();

// 监听状态变化
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) { // 请求完成
        if (xhr.status === 200) { // 请求成功
            console.log('响应数据:', xhr.responseText);
        } else {
            console.error('请求失败:', xhr.status);
        }
    }
};

// 打开请求
xhr.open('GET', 'https://api.example.com/data', true);

// 设置请求头（可选）
xhr.setRequestHeader('Content-Type', 'application/json');

// 发送请求
xhr.send();
2.1.2 处理不同类型的响应
// JSON响应处理
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        const data = JSON.parse(xhr.responseText); // 解析JSON
        console.log(data);
    }
};

// 二进制响应处理
xhr.responseType = 'blob';
xhr.onload = function() {
    const blob = xhr.response;
    // 处理二进制数据
};

2.2 jQuery AJAX：简化异步请求

2.2.1 $.ajax () 方法
$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log('成功:', data);
    },
    error: function(error) {
        console.error('失败:', error);
    }
});
2.2.2 快捷方法
// GET请求
$.get('https://api.example.com/data', function(data) {
    console.log(data);
});

// POST请求
$.post('https://api.example.com/submit', { name: 'John' }, function(data) {
    console.log(data);
});

2.3 Fetch API：现代的 AJAX 替代方案

2.3.1 基本用法
fetch('https://api.example.com/data')
    .then(response => response.json()) // 解析JSON
    .then(data => console.log(data))
    .catch(error => console.error('错误:', error));
2.3.2 发送数据
// POST请求
fetch('https://api.example.com/submit', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: 'John' })
})
.then(response => response.json())
.then(data => console.log(data));

2.4 Axios：基于 Promise 的 HTTP 客户端

2.4.1 基本用法
// GET请求
axios.get('https://api.example.com/data')
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

// POST请求
axios.post('https://api.example.com/submit', { name: 'John' })
    .then(response => console.log(response.data))
    .catch(error => console.error(error));
2.4.2 全局配置
// 设置默认配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';

// 发送请求
axios.get('/data')
    .then(response => console.log(response.data));

三、实战案例：从表单提交到图片上传

3.1 案例一：表单异步提交

<!DOCTYPE html>
<html>
<head>
    <title>AJAX表单提交</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="username" placeholder="用户名">
        <input type="password" name="password" placeholder="密码">
        <button type="submit">登录</button>
    </form>
    <div id="result"></div>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(e) {
            e.preventDefault(); // 阻止表单默认提交

            const formData = new FormData(this);

            // 使用Fetch API发送表单数据
            fetch('/api/login', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('result').innerHTML = data.message;
            })
            .catch(error => {
                document.getElementById('result').innerHTML = '登录失败';
            });
        });
    </script>
</body>
</html>
👉 效果示意图：

3.2 案例二：数据分页加载

// 分页加载数据
let currentPage = 1;
const loadMoreBtn = document.getElementById('loadMore');

loadMoreBtn.addEventListener('click', function() {
    currentPage++;
    loadData(currentPage);
});

function loadData(page) {
    axios.get(`/api/posts?page=${page}`)
        .then(response => {
            const posts = response.data;
            renderPosts(posts);
        })
        .catch(error => {
            console.error('加载失败:', error);
        });
}

3.3 案例三：图片上传预览

// 图片上传预览
const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');

fileInput.addEventListener('change', function() {
    const file = this.files[0];
    if (file) {
        const reader = new FileReader();
        
        reader.onload = function(e) {
            preview.src = e.target.result;
        }
        
        reader.readAsDataURL(file);
        
        // 上传图片
        uploadImage(file);
    }
});

function uploadImage(file) {
    const formData = new FormData();
    formData.append('image', file);
    
    axios.post('/api/upload', formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
    .then(response => {
        console.log('上传成功:', response.data);
    })
    .catch(error => {
        console.error('上传失败:', error);
    });
}

四、AJAX 常见错误与解决方案

4.1 跨域请求问题

错误信息：

Access to XMLHttpRequest at 'https://api.other.com' from origin 'http://localhost' has been blocked by CORS policy

解决方案：

  1. 在服务器端设置 CORS 头：
// Node.js示例
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  1. 使用 JSONP（仅适用于 GET 请求）
  2. 使用代理服务器

4.2 错误处理

// 统一错误处理
axios.interceptors.response.use(
    response => response,
    error => {
        if (error.response) {
            // 请求已发送，服务器返回状态码非200
            console.log('状态码:', error.response.status);
            console.log('数据:', error.response.data);
            console.log('请求头:', error.response.headers);
        } else if (error.request) {
            // 请求已发送，但没有收到响应
            console.log('请求未响应:', error.request);
        } else {
            // 请求设置时出错
            console.log('错误信息:', error.message);
        }
        return Promise.reject(error);
    }
);

五、AJAX 面试高频问题

  1. 什么是 AJAX？它的优缺点是什么？

    • AJAX 是异步的 JavaScript 和 XML，允许在不刷新整个页面的情况下与服务器进行异步通信
    • 优点：提升用户体验、减少页面加载时间
    • 缺点：SEO 不友好、可能导致过多的 HTTP 请求

  2. AJAX 请求有哪些步骤？

    • 创建 XMLHttpRequest 对象
    • 打开请求
    • 设置请求头
    • 发送请求
    • 监听状态变化
    • 处理响应

  3. GET 和 POST 请求的区别？

    • GET 请求将参数附加在 URL 后面，POST 请求将参数放在请求体中
    • GET 请求有长度限制，POST 请求没有
    • GET 请求比 POST 请求更不安全
    • GET 请求通常用于获取数据，POST 请求通常用于提交数据

六、技术笔记：AJAX 速查表

6.1 各种 AJAX 实现对比

技术优点缺点适用场景
原生 XMLHttpRequest无需依赖库，兼容性好代码复杂旧项目或需要精确控制的场景
jQuery AJAX简单易用，兼容性好需要引入 jQuery 库使用 jQuery 的项目
Fetch API现代 API，基于 Promise兼容性较差，错误处理不够直观现代项目
Axios基于 Promise，自动转换 JSON，拦截器功能强大需要引入额外库大型项目或需要高级功能的场景

6.2 常用 API

API功能示例
XMLHttpRequest原生 AJAX 对象const xhr = new XMLHttpRequest();
jQuery.ajax()jQuery AJAX 方法$.ajax({ url: '/api', success: function() {...} });
fetch()现代 AJAX APIfetch('/api').then(response => response.json());
axios基于 Promise 的 HTTP 客户端axios.get('/api').then(response => console.log(response.data));
ajax使用示例
一行一步的博客
08-16 4745
$.ajax({ async:true, type: ‘get’, url:“demo_test.txt”, contentType:‘application/x-www-form-urlencoded’, data:{ name : ‘name’,password:‘password’}, dataType:‘application/x-www-form-urlencoded’, succes...
【AJAX 全栈开发实战指南：从原理到工程实践】基于Ajax的前后端交互技术详解：表单提交、模板引擎及跨域解决方案了文档的主要内容
最新发布
06-05
本资源为 AJAX 技术的系统性学习手册，深度解析浏览器与服务器的异步交互机制，结合实战案例构建从基础原理到复杂项目的开发体系。涵盖 XMLHttpRequest 核心接口、跨域解决方案、数据交互协议及工程化实践，适配 Web...
Ajax的基本使用
weixin_67235801的博客
05-04 7962
Ajax的基本使用，无刷新登录，使用Ajax实现搜索自动提示
Ajax的用法示例
Venus熊的博客
09-12 389
Ajax的作用是实现页面与后台服务器之间的异步传输，下卖弄我们就来看一下具体怎么实现的。 第一步 创建一个xhl的实例对象 var httpRequest = new XMLHttpReuest(); 第二步 打开一个http连接 httpRequest,open('get','http://203.195.240.58:8888/index/category/findAll'); 注意：如果有需要则设置参数 var obj = { page:1, pageSize:10, } //将js字符串转换
Ajax的使用（最详细！！！）
2401_84150165的博客
04-12 1032
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往获取》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**[外链图片转存中…(img-D3eLHlmw-1712864683413)][外链图片转存中…(img-KYWdmD5f-1712864683413)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
Ajax保姆级使用攻略
2501_90226218的博客
01-16 794
其次，即使请求时间过长，用户不会有任何感知。最后，AJAX可以根据服务器的响应信息局部的修改页面，而不需要整个页面刷新。
AJAX开发指南：技术原理与实战示例
本文档由作者柯自聪撰写，主要介绍AJAX开发的基础知识和技术要点。AJAX全称为Asynchronous ...综上，本文档是AJAX开发的基础指南，涵盖了技术原理、实际应用和开发实践，对提升Web开发人员的AJAX技能具有很高的价值。
AJAX开发指南：技术原理与实战应用
AJAX开发简略技术文档是一份由作者柯自聪编写的关于AJAX技术的详细介绍，旨在帮助...这份AJAX开发简略文档为初学者和经验丰富的开发者提供了AJAX技术的入门指南和实践参考，帮助他们提升Web应用的交互性和用户体验。
探索Ajax高级编程：从原理到实战应用
本书以循序渐进的方式，从Ajax的基本概念和原理开始，引领读者探索其在现代Web应用中的重要角色。 第1章首先介绍了Ajax的起源和发展历程，讲述了Web从静态页面向动态、异步交互转变的过程，以及Ajax遵循的原则，如...
Ajax初学者指南：从理论到实战的全面教学
- **数据获取**：从服务器获取数据，例如获取最新新闻、天气信息等，并动态地显示在网页上。 - **内容更新**：用户与页面上的元素交互时（比如点击一个按钮），动态地从服务器获取新的内容，并替换旧内容。 ### ...
Ajax的使用
2301_79693363的博客
05-24 660
ajax的简短介绍
ajax示例
while(life)++；
03-03 893
目录1、ajax以form形式发送数据1.1 ajax代码1.2 后端代码2、ajax以JSON形式发送数据2.1 ajax代码2.2 后端代码3、ajax以form形式发送list数据3.1 ajax代码3.2 后端代码 1、ajax以form形式发送数据 1.1 ajax代码 这里的contentType值是application/x-www-form-urlencoded，是默认的，不写也...
Ajax 异步通信详解
jclee95的个人博客
07-15 766
Ajax异步通信基础。
ajax详细用法
热门推荐
qq_39897978的博客
07-30 1万+
一、基础知识 1、首先让我们了解ajax----------------        通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 2、ajax的核心步骤： 创建XMLHttpRequest对象 发送（异步）请求 接收相应请求，并且执...
Ajax的基础使用
jakelihua
01-11 975
ajax的基本使用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北泽别胡说

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值