【前端】前后端的网络通信基础操作（原生ajax, axios, fetch）

已于 2024-01-16 13:46:30 修改
阅读量1.4k 收藏 17
点赞数 22
分类专栏： 前端 文章标签： 前端 ajax javascript
于 2024-01-09 15:15:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjutkarma/article/details/135481104
版权

概述

前后端网络请求工具

  • 原生ajax
  • fetch api
  • axios

GET和POST请求

get只能发纯文本

post可以发不同类型的数据，要设置请求头，需要告诉服务器一些额外信息

测试服务器地址

有一些公共的测试 API 可供学习和测试用途。这些 API 允许你发送 HTTP 请求（GET、POST 等），并从服务器获取响应。以下是一些常用的公共测试 API：

  1. JSONPlaceholder:
    • Base URL: https://jsonplaceholder.typicode.com
    • Example Endpoints:
      • Posts: /posts
      • Comments: /comments
      • Users: /users
    • Usage Example (GET): https://jsonplaceholder.typicode.com/posts/1
  2. ReqRes:
    • Base URL: https://reqres.in
    • Example Endpoints:
      • Users: /api/users
      • Single User: /api/users/2
      • Create User: /api/users
    • Usage Example (POST): https://reqres.in/api/users

原生ajax

前端页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="ajax_get.js"></script>
</body>
</html>

GET

//原生ajax
const xhr = new XMLHttpRequest();
//xhr.open('GET', 'http://wuyou.com/common/get');
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1')
xhr.send();
xhr.onreadystatechange = function(){
    if(xhr.readyState == XMLHttpRequest.DONE && xhr.status === 200){
        console.log(JSON.parse(xhr.responseText));
    }
}

返回结果

在这里插入图片描述

POST

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts');
xhr.setRequestHeader('Content-Type', 'application/json'); // 修改 Content-Type
xhr.send(JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
}));

xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 201) {
        console.log(xhr.responseText); // 不解析 JSON，直接输出响应文本
    }
};

返回结果

请添加图片描述

Axios

前端页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="axios.min.js"></script>
<script src = 'axiosjs.js'></script>
</body>
</html>

直接传输

最简单的axios使用方式，get函数中填写请求的url

//用axios来get一个请求
axios.get('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
        console.log('GET Response:', response.data);
    })
    .catch(error => {
        console.error('GET Error:', error);
    });

返回结果

在这里插入图片描述

异步传输

用异步的方式传输，在axios中配置地址，请求/响应拦截器

//异步请求处理
//异步发送get请求
(async () => {
    try {
        const ins = axios.create({
            baseURL: 'https://jsonplaceholder.typicode.com',
        });

        // 请求拦截器
        ins.interceptors.request.use((config) => {
            console.log('发送了请求');
            return config;
        });

        // 响应拦截器
        ins.interceptors.response.use(
            (response) => {
                // 在这里可以对响应数据进行处理
                return response.data;
            },
            (error) => {
                // 在这里处理响应错误
                return Promise.reject(error);
            }
        );

        const res = await ins.get('/posts/1');

        const res2 = await ins.post('/posts', {
            title: 'foo',
            body: 'bar',
            userId: 1,
        });

        console.log('GET 的结果:', res);
        console.log('POST 的结果:', res2);
    } catch (error) {
        console.error('发生错误:', error);
    }
})();

返回结果

在这里插入图片描述

Fetch

前端页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src = 'fetch_get.js'></script>
</body>
</html>

GET请求

fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(res => {
    if(res.ok){
        return res.json()
    }
})
.then(data =>{
    console.log(data)
    }

).catch(error =>{
    console.error(error)
})

结果：
在这里插入图片描述

POST请求

在参数处需要传入一些配置项

//post在参数的地方需要传入一些配置项

const postData = {
    title: 'foo',
    body: 'bar',
    userId: 1
};
console.log("test")
fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers:{
        'Content-Type': 'application/json'
    },
    body:JSON.stringify({
        postData
    })
    }
).then(res =>{
    if(res.ok){
        return res.json()
    }
})
.then(data =>{
    console.log(data)
    }
)

结果

在这里插入图片描述

小松不菜
关注
  • 22
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端原生ajax JQueryAjax axios fetch的简单使用
panpanpanqvq的博客
12-18 201
原生ajax，现在基本已经没人使用都是用封装好的ajax var xmlhttp = new XMLHttpRequest(); const formData = new FormData(); formData.append("cardFile", file); //POST 请求的请求参数，不能拼接在地址栏后面 //发送给后台的参数不能在链接后面拼，链接属于GET请求，因此必须放在发送里面拼 xmlhttp.open("POST"
JavaScript案例-原生ajax
02-16
原生Ajax虽然功能强大，但代码相对复杂，因此在实际开发中，开发者往往会选择jQuery、axios、fetch等库或API来简化工作。然而，理解原生Ajax的工作原理对解决特定问题和优化性能具有重要意义。在"JavaScript案例-...
原生AJAX | Axios | Fetch API
weixin_74788686的博客
07-20 399
介绍三种网络请求方法AJAX,Axios,Fetch API。
【前端请求】一文总结Ajax、Axios及Fetch
qq_61834461的博客
07-09 1696
一篇文章汇总ajax axios fetch的用法及简单封装
分别使用jQuery封装的ajax、原生ajax、fetch、axios实现express前后端交互
ZengJiajia0325的博客
08-08 389
分别使用jquery封装的ajax、原生ajax、fetch、axios实现express前后端交互
请说明Ajax、Fetch、Axios三者的区别
weixin_43850639的博客
03-12 1819
队列则不同，它基于地址指针进行遍历，而且可以从头或尾部开始遍历，但不能同时遍历，无需开辟临时空间，因为在遍历的过程中不影像数据结构，速度要快的多。栈只能从头部取数据，也就最先放入的需要遍历整个栈最后才能取出来，而且在遍历数据的时候还得为数据开辟临时空间，保持数据在遍历前的一致性。看到“请说明Ajax、Fetch、Axios三者的区别”这个问题我就想起来另一个面试题：栈、队列、数组有什么区别？1、Ajax只是个技术统称，可以用XMLHttpRequest来实现Ajax，也可以用用Fetch来实现Ajax。
前端网络请求之JavaScript XHR、Fetch、Axios
原来是有理数
01-22 1980
前端网络请求之 Ajax、Fetch、Axios~ 封装 ajax、axios
探秘 | 原生ajax、jquery-ajax、axios与fetch的区别与优缺点
青春木鱼的博客
07-26 825
前端的技术发展速度非常的快，异步请求也是其重要的体现之一，从最早的原生XHR，再到JqueryAjax的统治时代，再到近来，fetch、axios等技术也开始出现并大量投入使用。其实有这么多种的请求方法和解决方案，总结一下：原生XHR几乎很少开发会用，JqueryAjax属于老当益壮的那种，虽然很老，但是很好用，Fetch是属于初生牛犊，还需要慢慢成长，axios就目前来说，算是非常好的了，无脑使用即可。
简述 Ajax、Fetch、Axios 三者有什么区别？
m0_64269288的博客
10-08 560
AJAX 全称(Async Javascript and XML) 即异步的 JavaScript 和 XML ，是⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术，可以在不重新加载整个⽹⻚的情况下，与服务器交换数据，并且更新部分⽹⻚Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后⽤ JavaScript 来操作 DOM ⽽更新⻚⾯。fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。ajax是异步请求的统称。
js_Ajax（Fetch&Axios)
weixin_44915595的博客
11-26 703
Ajax 什么是Ajax？Ajax是浏览器提供的一套方法，可以实现在不刷新页面的情况下向服务器端发送请求，从而更新数据，提高用户浏览网站应用的体验。 Ajax运行原理：Ajax相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下局部更新页面数据，从而提高用户体验。 Ajax实现原理？（使用原生js实现Ajax请求） var xhr = new XMLHttpRequest();// 创建XMLHttqRequest xhr.open('GET', '
ajax、axios、fetch区别
01-03
ajax、axios、fetch区别 ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} }); 优缺点： 本身是针对MVC的编程,不符合现在前端MVVM的...
Javascript原生ajax请求代码实例
10-15
然而，现代Web开发中，通常会使用像jQuery、axios或fetch这样的库来简化Ajax操作，因为它们提供了更多的功能和更好的浏览器兼容性。但了解原生实现有助于理解这些库的工作原理，对于进行更底层的问题排查和优化很有...
基于原生ajax与封装的ajax使用方法(详解)
10-19
**Ajax技术概述** Ajax，全称Asynchronous JavaScript and XML（异步JavaScript和XML），是一种创建动态网页的技术，...在实际项目中，开发者通常会结合前端库（如jQuery、axios或fetch API）来进一步简化Ajax操作。
浅谈JS原生Ajax,GET和POST
11-23
JavaScript中的AJAX（Asynchronous JavaScript and XML）技术是网页实现异步数据交换的关键，它允许在不刷新整个页面的情况下与服务器进行通信。...然而，了解原生AJAX的工作原理对于理解网络请求的底层机制非常重要。
WEB渗透Web突破篇-SSRF
最新发布
qq_59468567的博客
08-03 439
转码服务 在线翻译 获取超链接的标题等内容进行显示 请求远程服务器资源的地方，图片加载与下载(通过URL地址加载或下载图片) 图片、文章收藏功能 对外发起网络请求的地方，网站采集、网页抓取的地方。 头像 (远程加载头像) 一切要你输入网址的地方和可以输入ip的地方。 数据库内置功能(mongodb的copyDatabase函数) 邮件系统 文件处理 在线处理工具 从URL关键字中寻找：share、wap、url、link、src、source、target、u、3g、display、sourceURl、im
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1432
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
探索WebKit之巅：开启现代网页应用的高效与兼容之旅
weixin_67239318的博客
08-03 152
随着现代网页应用的快速发展，WebKit作为先进的浏览器引擎，其在高效性和兼容性上的表现显得尤为重要。本文深入探讨了WebKit的架构和渲染机制，揭示了其在支持Web标准和提升浏览体验方面的关键技术。通过分析WebKit如何处理DOM操作、JavaScript执行与图形渲染等挑战，我们了解到优化WebKit性能不仅关乎算法和硬件的优化，还涉及网络协议和安全框架的理解。此外，本文讨论如何通过WebKit应对多设备和分辨率下的兼容性问题。掌握这些关键因素，对于开发者来说，是打造高效、兼容的现代网页应用的基础。
高德地图离线版 使用高德地图api的方法
m0_62336925的博客
08-02 338
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
原生ajax、axios、fetch的区别
05-13
原生ajax是一种在浏览器中使用JavaScript发送异步HTTP请求的技术。它可以通过XMLHttpRequest对象来实现。它的优点是可以直接操作HTTP请求和响应，缺点是使用起来复杂，需要手动处理很多细节。 axios是一个基于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值