Ajax 入门

一、Ajax概念

Ajax(Asynchronous JavaScript and XML) 是一种在不刷新整个页面的情况下,与服务器进行异步通信并更新部分网页的技术。尽管名称中包含 "XML",但现代 Ajax 更多使用 JSON 作为数据格式。

二、核心概念

  1. 异步通信:无需刷新整个页面,可在后台与服务器交换数据。
  2. 核心技术
    • XMLHttpRequest(XHR):原生 JavaScript API(旧版)
    • Fetch API:现代 JavaScript 替代方案
    • 第三方库 :jQuery、Axios(最常用)

2.1 传统 XMLHttpRequest 用法(了解即可)

javascript 复制代码
const xhr = new XMLHttpRequest();

// 初始化请求
xhr.open('GET', '/api/data', true); // true 表示异步

// 监听状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText); // 处理响应数据
  }
};

// 发送请求
xhr.send();

2.2 现代 Fetch API(原生替代方案)

javascript 复制代码
// GET 请求
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// POST 请求
fetch('/api/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 30 })
})
  .then(response => response.json())
  .then(data => console.log(data));

2.3 使用 Axios(推荐)

javascript 复制代码
// GET 请求
axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

// POST 请求
axios.post('/api/submit', { name: 'John', age: 30 })
  .then(response => console.log(response.data));
Ajax 请求流程
  1. 触发事件:用户点击按钮、滚动页面等。
  2. 创建请求:使用 XHR、Fetch 或 Axios 初始化请求。
  3. 发送数据:将请求发送到服务器(可选携带参数)。
  4. 处理响应:服务器返回数据后,更新部分 DOM。

三、对比XMLHttpRequest VS Fetch VS Axios

特性 XMLHttpRequest Fetch API Axios
语法复杂度
Promise 支持 不支持 支持 支持
自动转换 JSON 需手动
拦截器
取消请求 复杂 需 AbortController 简单
浏览器兼容性 全支持 IE 不支持 IE 11+

四、Axios介绍

4.1、Axios概念

Axios 是一个基于 Promise 的 HTTP 客户端,专为浏览器和 Node.js 设计。相比原生 Fetch API,它提供了更强大的功能和更友好的 API,成为现代前端开发中处理 HTTP 请求的首选工具。

Axios官网:Axios中文文档 | Axios中文网

4.2、Axios 请求方法别名

HTTP 方法 Axios 别名 参数格式 用途
GET axios.get(url[, config]) url(必选),config(可选) 获取资源(如列表、详情)
POST axios.post(url[, data[, config]]) url(必选),data(可选),config(可选) 创建新资源(如提交表单、上传文件)
PUT axios.put(url[, data[, config]]) 同上 全量更新资源(替换整个对象)
DELETE axios.delete(url[, config]) url(必选),config(可选) 删除资源
PATCH axios.patch(url[, data[, config]]) 同上 部分更新资源(仅修改指定字段)
HEAD axios.head(url[, config]) 同上 获取响应头(不返回响应体)
OPTIONS axios.options(url[, config]) 同上 获取服务器支持的请求方法和 CORS 配置(预检请求)

4.3、 Axios使用

  1. 引入Axios文件(如果网络不通畅,可以使用离线的已经下载好的js文件)
  1. 点击按钮时,使用Axios发送请求
html 复制代码
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--导入axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <h1>Axios GET/POST Request</h1>
    <button onclick="makeRequest()">获取GET请求</button>
    <button onclick="makePostRequest()">获取POST请求</button>

    <script>
        // 使用axios发送GET请求
        function makeRequest() {
            axios.get('https://jsonplaceholder.typicode.com/posts')
                .then(function (response) {
                    console.log(response.data);
                })
                .catch(function (error) {
                    console.error('Error:', error);
                });
                console.log('----------->GET请求已发送');
        }
        // 使用axios发送POST请求
        function makePostRequest() {
            axios.post('https://jsonplaceholder.typicode.com/posts', {
                title: 'foo',
                body: 'bar',
                userId: 1
            })
                .then(function (response) {
                    console.log(response.data);
                })
                .catch(function (error) {
                    console.error('Error:', error);
                });
        }
    </script>

</body>

</html>
  1. 运行效果
相关推荐
大模型真好玩3 分钟前
深入浅出LangChain AI Agent智能体开发教程(四)—LangChain记忆存储与多轮对话机器人搭建
前端·人工智能·python
帅夫帅夫27 分钟前
深入理解 JWT:结构、原理与安全隐患全解析
前端
Struggler28136 分钟前
google插件开发:如何开启特定标签页的sidePanel
前端
爱编程的喵1 小时前
深入理解JSX:从语法糖到React的魔法转换
前端·react.js
代码的余温1 小时前
CSS3文本阴影特效全攻略
前端·css·css3
AlenLi1 小时前
JavaScript - 策略模式在开发中的应用
前端
xptwop1 小时前
05-ES6
前端·javascript·es6
每天开心1 小时前
告别样式冲突:CSS 模块化实战
前端·css·代码规范
wxjlkh1 小时前
powershell 批量测试ip 端口 脚本
java·服务器·前端
海底火旺1 小时前
单页应用路由:从 Hash 到懒加载
前端·react.js·性能优化