Ajax与Axios学习笔记（一）

最新推荐文章于 2025-11-04 16:55:09 发布
原创 最新推荐文章于 2025-11-04 16:55:09 发布 · 723 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #javascript #前端

本文深入探讨Ajax的特点，包括其无需刷新页面通信和更新部分页面内容的能力，同时指出其跨域和SEO的挑战。详细讲解了HTTP协议的请求报文和响应报文结构，并通过实例展示了原生Ajax的get和post请求，以及处理超时、取消请求的方法。此外，还介绍了axios库的使用，包括get、post操作和配置，并涉及跨域问题。

目录

一、Ajax特点

二、HTTP协议

1.请求报文

1.1请求行

1.2请求头

1.3请求空行（necessary）

1.4请求体

2.响应报文

3.get请求

4.post请求

三、原生Ajax

1.express基本使用

2.ajax请求基本步骤

3.ajax方式get请求

4.ajax发送post请求

5.服务端响应json数据

6.IE浏览器缓存问题

7.网络异Ajax请求超时与常处理

8.取消请求 

四、axios

1.axios的配置

2.get的基本使用

3.post的基本使用

4.更新数据

5. 其他使用方法

6.axios默认配置

五、跨域

1.Ajax同源策略

一、Ajax特点

优点：

1.可以无需刷新页面与服务器进行通信

2.允许根据用户事件来更新部分页面内容

缺点：

1.没有浏览历史，不能回退

2.存在跨域问题(同源)

3.SEO（搜索引擎优化）不友好

二、HTTP协议

1.请求报文

1.1请求行

请求类型：GET、POST

url路径

HTTP协议版本

1.2请求头

host: mting.com
cookie: name = zmt
content - type: application / x - www - form - urlencoded

1.3请求空行（necessary）

1.4请求体

如果是get请求，请求体为空

如果是post请求， 请求体可为空可不为空

2.响应报文

响应行

HTTP协议版本

响应状态码（200， 404， 403， 500， 401等）

响应状态字符串

响应头

响应空行

响应体

3.get请求

const xhr = new XMLHttpRequest();
// 初始化，设置请求方法和url
xhr.open('GET', 'http://127.0.0.1:8000/server');

4.post请求

const xhr = new XMLHttpRequest();
// 初始化，设置请求方法和url
xhr.open('POST','http://127.0.0.1:8000/server');

三、原生Ajax

1.express基本使用

const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
app.get('/',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin')
    // 设置响应
    response.send('HELLO EXPRESS')
});

app.all('/delay',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    // 设置响应
    setTimeout(()=>{
        response.send('HELLO EXPRESS')
    },3000);
});
// 4.监听端口启动服务
app.listen(8000,()=>{
    console.log('服务已经启动，8000端口监听中...');
})

2.ajax请求基本步骤

 1.创建对象

 2.初始化 设置请求方法和url

 3.发送

 4.事件绑定 处理服务端返回的结果

3.ajax方式get请求

<script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');
        btn.onclick = function () {
            // 1.创建对象
            const xhr = new XMLHttpRequest();
            // 初始化，设置请求方法和url
            xhr.open('GET', 'http://127.0.0.1:8000/server?');
            // 3.发送
            xhr.send();
            // 4.事件绑定 处理服务端返回的结果
            // on  when   当……时候
            // readyState 是xhr对象中的属性，表式状态0 1 2 3 4 
            // change  改变
            xhr.onreadystatechange = function () {
                // 判断响应状态码 200 404 403 401 500
                if (xhr.readyState === 4) {
                    // 判断响应状态码 200 404 403 401 500
                    // 2xx  成功

                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理结果 行 头 空行 体
                        // 1.响应行
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders);//所有响应头
                        // console.log(xhr.response);//响应体
                        result.innerHTML = xhr.response;
                    } else {

                    }
                }
            }

        }
        
    </script>

4.ajax发送post请求

    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');
        result.addEventListener('mouseover',function(){
            // 1.创建对象
            const xhr = new XMLHttpRequest();
            // 初始化，设置请求方法和url
            xhr.open('POST','http://127.0.0.1:8000/server');
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.setRequestHeader('name','zmt')
             // 3.发送
            xhr.send('a=100&b:200')
            
            // xhr.send('a:100&b:300');
            // 4.事件绑定 处理服务端返回的结果
            // on  when   当……时候
            // readyState 是xhr对象中的属性，表式状态0 1 2 3 4 
            // change  改变
            xhr.onreadystatechange = function(){
                // 判断响应状态码 200 404 403 401 500
                if(xhr.readyState === 4){
                    // 判断响应状态码 200 404 403 401 500
                    // 2xx  成功
                    
                    if(xhr.status >= 200 && xhr.status <300){
                        
                        result.innerHTML = xhr.response;
                    }
                }
            }
            
        });
        
    </script>

5.服务端响应json数据

<script>
        const result = document.querySelector('.result');
        window.onkeydown = function(){
            const xhr = new XMLHttpRequest();
            xhr.responseType = 'json'; 
            xhr.open('GET', 'http://127.0.0.1:8000/json-server');
            // 发送
            xhr.send();
            // 事件绑定
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                        
                    }
                }
            }
        }
</script>

6.IE浏览器缓存问题

解决方法： 在url路径最后加上时间戳，他就不会走缓存路线 

7.网络异Ajax请求超时与常处理

 <script>
        const btn = document.querySelector('button');
        const result = document.querySelector('.result');
        btn.addEventListener('click',function(){
            // console.log('test');
            const xhr = new XMLHttpRequest();
            // 超时设置2s设置
            xhr.timeout = 2000;
            // 超时回调
            xhr.ontimeout = function(){
                alert('网络异常，请稍后重试！');
            }
            // 网络异常问题
            xhr.onerror = function(){
                alert('您的网络似乎出了一些问题！');
            }
            xhr.open('GET','http://127.0.0.1:8000/delay');
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4) {
                    if(xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>

8.取消请求 

<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        const btns = document.querySelectorAll('button');
        let x = null;
        btns[0].onclick = function(){
            x = new XMLHttpRequest();
            x.open('GET','http://127.0.0.1:8000/delay');
            x.send();
        }

        // abort 
        btns[1].onclick = function(){
            x.abort();
        }
    </script>
</body>

四、axios

1.axios的配置

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.get的基本使用

btn1.onclick = function(){
    axios({
      method:'GET',
      url:'http://localhost:3000/posts/2'
   }).then(response => {
       console.log(response);
     });
};

3.post的基本使用

btn2.onclick = function(){
            axios({
                method:'POST',
                url:'http://localhost:3000/posts',
                data:{
                    id:3,
                    title:'The weather is comfortable today!',
                    author:'mting'
                }
            }).then(response => {
                console.log(response);
            });
        };

4.更新数据

btn3.onclick = function(){
            axios({
                method:'PUT',
                url:'http://localhost:3000/posts/3',
                data:{
                    id:3,
                    title:'The weather is comfortable today!',
                    author:'professor'
                }
            }).then(response => {
                console.log(response);
            });
        };

5. 其他使用方法

btns[0].onclick = function(){
            axios.request({
                method:'GET',
                url:'http://localhost:3000/comments'
            }).then(response =>{
                console.log(response);
            })
        };
        btns[1].onclick = function(){
            axios.post(
                'http://localhost:3000/comments',
                {
                   'body':'喜大普奔',
                   'postId':2
            }).then(response =>{
                console.log(response);
            })
        }

6.axios默认配置

 <script>
        const btns = document.querySelectorAll('button');
        axios.defaults.method = 'GET';
        axios.defaults.baseURL = 'http://localhost:3000';
        btns[0].onclick = function(){
            axios({
                url:'/posts'
            }).then(response =>{
                console.log(response);
            })
        }
    </script>

7.请求取消

<body>
    <button>发送请求</button>
    <button>取消请求</button>
    <script>
        const btns = document.querySelectorAll('button');
        let cancel = null;
        btns[0].onclick = function(){
            if(cancel !==null){
                cancel();
            }
            axios({
                method:'GET',
                url:'http://localhost:3000/posts',
                cancelToken: new axios.CancelToken(function(c) {
                        // 将c的值赋值给cancel
                        cancel = c;
                        
                })
            }).then(response=>{
                console.log(response);
                cancel = null;
            })
        };
        btns[1].onclick = function(){
            cancel();
        }
    </script>
</body>

五、跨域

1.Ajax同源策略

同源策略是浏览器的一种安全策略，违背同源策略就是跨域

同源：协议，域名，端口号必需完全相同

其他问题：ajax中在控制台输入nodemon server.js报错

解决方法：在控制台输入npx nodemon server.js

axios使用文档：axios中文文档|axios中文网 | axios

json-server使用文档：GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

Ajax入门与Axios实战：计算机科学与技术本科生网课带刷实录笔记
吾为热爱计科，致力于知识分享的践行者，此博客是我在这条道路上留下的足迹。
06-13 411
本次学习的是Tlias教学管理系统项目实战全套视频教程，从需求分析、设计、前后端开发、测试、程序优化到项目部署一应俱全。本节课聚焦于Ajax入门和Axios库的应用，帮助前端开发者掌握异步请求的核心概念和实践技巧。：异步的JavaScript和XML，是一种用于创建快速动态网页的技术。主要作用：在不重新加载整个页面的情况下，实现局部刷新数据，提升用户体验。Axios 是对原生 Ajax 的封装，简化了异步请求的书写方式，解决了浏览器兼容性问题，适用于现代前端开发。
AJAX介绍、axios、VUE、Element
weixin_43584531的博客
03-20 1178
AJAX介绍 AJAX异步的 JavaScript 和 XML。 1.与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器。 2.异步交互：可以在==不重新加载整个页面==的情况下，与服务器交换数据并==更新部分网页==的技术。 ...
尚硅谷 Ajax与Axios的使用与关键源码 笔记
LiuKairui的博客
06-16 1046
文章目录Ajax概述原生Ajax尝试请求的发送与请求头配置JSON支持IE缓存问题请求的取消与重发jQuery的Ajax使用Axios发送Ajax[简易]使用fetch发送请求Ajax跨域JSONP解决跨域问题CORS解决跨域问题Axios的理解与使用JSON Server的使用Axios基本使用拦截器取消请求Axios源码分析目录结构实现axios,使得既可以axios()也可以axios.xx()Axios类的实现手写一个简易版的axios请求发送函数请求取消函数总结(八股) Ajax概述 Ajax简介
Axios完整学习笔记
最新发布
2303_80433826的博客
11-04 623
作为前端开发工程师，在后端接口未就绪时，我们可以使用 json-server 快速搭建 Mock 服务。 1.2 创建 Mock 数据 创建 文件： 1.3 启动 Mock 服务 服务启动后，会自动生成 RESTful API：什么是 Axios？核心特点✅ 基于 Promise 的异步处理 ✅ 浏览器和 Node.js 环境通用 ✅ 支持请求/响应拦截器 ✅ 支持请求取消 ✅ 自动转换 JSON 数据 ✅ 客户端支持防御 XSRF ✅ 批量发送多个请求 2.3 基本使用 2.3.1 发送 GET 请求
AJAX & Axios 总结
机械工程跑路哥
01-22 1531
通过AJAX可以给服务器**发送**请求，并**接收**服务器响应的数据； 即通过AJAX可以将服务器返回的数据传给浏览器，而html、javaScript做不到从服务器获取数据，如服务器查询了数据，无法通过javaScript将数据交给浏览器；
Axios的学习
m0_53874326的博客
07-20 280
在学习axios之前，我们首先应该已经接触到了Ajax。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。而我们只需要修改页面的一部分内容，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。异步网络请求。Ajax能够让页面无刷新的请求数据。实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。
深入学习Axios：现代前端HTTP请求利器
李长渊的博客
04-23 1717
Axios是一个基于Promise的HTTP客户端，用于浏览器和node.js环境。它已经成为现代前端开发中最流行的HTTP请求库之一，因其简洁的API和强大的功能而广受开发者喜爱。本文将全面介绍Axios的核心特性和使用方法。
AJAX技术入门学习笔记
05-31
内容概要：本文档《AJAX入门学习笔记.pdf》主要介绍了AJAX的基础概念、使用方法以及相关工具的应用。首先概述了AJAX的核心——通过XMLHttpRequest对象实现浏览器与服务器之间的异步通信，支持多种数据格式传输并在不...
【学习笔记】Axios、Promise
Eddie_hyh的博客
05-29 2122
Axios、Promise
AJax 学习笔记一(XMLHTTPRequest对象)
12-10
XMLHttpRequest对象是AJAX（Asynchronous JavaScript and XML）技术的核心组成部分，它允许JavaScript与服务器进行异步通信，无需刷新整个页面就能更新网页内容，从而极大地提升了用户体验。在本文中，我们将深入...
尚硅谷axios笔记——入门学习
weixin_53317758的博客
11-26 1400
取消请求，axios的基本使用、拦截器、axios.get、axios.post、设置请求体等等
axios学习
qq_50797036的博客
04-10 762
)​})
细谈Axios中那些不为人知的秘密！一文读懂Axios
纸飞机博客
08-19 1万+
Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。Axios支持Promise API，拦截请求与响应，转换请求数据和响应数据，取消请求自动转换JSON数据客户端，支持防御XSRF。
【axios】使用json-server 搭建REST API - 使用axios - 自定义axios - 取消请求 - 拦截器
YK菌的博客
03-04 1万+
文章目录1. 自己创建一个API1.1 API 的分类1.2 使用json-server 搭建REST API2.9.1 json-server 是什么?2.9.2 使用json-server2.9.3 使用浏览器访问测试2.9.4 使用axios 访问测试4. XHR 的 ajax 封装 (简单版axios)4.1 特点4.2 编码实现4.3 使用测试6 axios 的理解和使用6.1 axios 是什么?6.2 axios 特点6.3 axios 常用语法6.4 难点语法的理解和使用6.4.1 axio
Axios基础学习（未完）
qq_43108224的博客
01-20 1260
初步入门axios,后续完善中
【学习笔记】Axios学习笔记
无知的圆的博客
07-01 717
文章目录1 axios的理解和使用1.1 axios是什么？1.2 axios的特点1.3 axios常用语法2 axios源码分析2.1 源码目录结构2.2 源码分析2.2.1 axios与Axios的关系2.2.2 instance 与 axios 的区别?2.2.3 响应拦截器的执行顺序问题2.2.4 axios 运行的整体流程?2.2.5 axios 的请求/响应拦截器是什么？2.2.6. axios 的请求/响应数据转换器是什么?2.2.7 response 的整体结构2.2.8 error 的整
vue基础-axios详解
热门推荐
weixin_40017062的博客
07-19 2万+
Axios是一个基于的 HTTP 库，可以用在浏览器和 node.js 中, 也是 vue 官方推荐使用的 http 库；封装axios，一方面为了以后维护方便，另一方面也可以对请求进行自定义处理。
axios 的学习
学习记录和总结
10-11 923
前端最流行的 ajax 请求库 axios的使用和介绍
axios
小白的学习路
03-25 564
1. 第 1 章:axios 的理解和使用 1.1. axios 是什么? 前端最流行的 ajax 请求库 react/vue 官方都推荐使用 axios 发 ajax 请求 文档: https://github.com/axios/axios 1.2. axios 特点 基于 xhr + promise 的异步 ajax 请求库 浏览器端/node 端都可以使用 支持请求/响应拦截器 支持请求取消 请求/响应数据转换
深入了解Ajax技术：学习笔记源代码解析
根据提供的文件信息，文件标题和描述中提及的知识点主要集中在“ajax 学习笔记源代码”。 AJAX（Asynchronous JavaScript and XML）是一种广泛使用的技术，用于在不重新加载整个页面的情况下，与服务器交换数据并...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值