JavaScript请求数据的4种方法总结（Ajax、fetch、jQuery、axios） ...

tsx81429  金牌会员 | 2024-6-21 13:44:37 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 809|帖子 809|积分 2427

JavaScript请求数据有4种主流方式，分别是Ajax、fetch、jQuery和axios。
一、Ajax、fetch、jQuery和axios的具体解释：

1、 Ajax

Ajax（Asynchronous JavaScript and XML）是一种使用JavaScript在用户的欣赏器上发送请求的技能，可以在不重新加载整个网页的情况下从服务器获取数据。它允许网页在后台与服务器进行少量数据交换，从而实现网页的异步更新。这意味着可以在不干扰用户欣赏体验的情况下，从服务器获取数据并更新网页的部门内容。
2、fetch

fetch API是今世欣赏器提供的一种用于发起网络请求的新方法。它返回一个Promise对象，可以用来更换传统的XMLHttpRequest。fetch API提供了一个更今世、更强大的方式来处理惩罚网络请求，并支持包括CORS在内的更多功能。
3、jQuery

jQuery是一种流行的JavaScript库，旨在简化HTML文档遍历和操作、事件处理惩罚、动画和Ajax操作。它提供了一组简单易用的API，使得JavaScript编程更为简单、快速和风趣。jQuery大大简化了跨欣赏器的DOM操作、事件处理惩罚和动画结果，同时它也提供了一些工具函数，使得JavaScript编程更加高效。
4、axios

axios是一个基于Promise的HTTP客户端，用于欣赏器和node.js。它提供了一种简单且灵活的方式来进行HTTP请求，包括XMLHttpRequests和HTTP请求。axios返回的是一个包罗相应数据的Promise对象，这使得异步处理惩罚更加简单和直观。axios还支持拦截请求和相应、转换请求和相应数据、取消请求等功能，使得HTTP请求的管理更加方便。
二、Ajax、fetch、jQuery和axios的紧张区别：

1、Ajax 数据请求：

原生js提供的(内置)，核心使用XMLHttpRequest对象，多个请求之间假如有先后关系的话，就会出现回调地狱。
2、fetch 数据请求：

原生js提供的(内置)，和ajax同级，使用promise形式，关注分离头脑，但兼容性不太好，所以用的不是许多。
3、jquery数据请求：

第三方库提供的，封装原生的ajax请求，使用回调形式，大概出现回调地狱。
4、axios数据请求：

第三方库提供的，封装原生的ajax请求，使用promise的形式，并且可以在请求和相应阶段进行拦截。
三、Ajax、fetch、jQuery和axios的代码详解：

在测试Ajax、fetch、jQuery和axios的示例代码之前，这里使用nodejs写一个简单的web服务器（server.js）做相应。
  1. 启动命令：node server.js
  3. ajax的get请求示例：http://127.0.0.1:8000/ajax_get.html
  5. ajax的post请求示例：http://127.0.0.1:8000/ajax_post.html
  7. fetch的get请求示例：http://127.0.0.1:8000/fetch_get.html
  9. fetch的post请求示例：http://127.0.0.1:8000/fetch_post.html
  11. jQuery的get请求示例：http://127.0.0.1:8000/jQuery_get.html
  13. jQuery的post请求示例：http://127.0.0.1:8000/jQuery_post.html
  15. axios的get请求示例：http://127.0.0.1:8000/axios_get.html
  17. axios的post请求示例：http://127.0.0.1:8000/axios_post.html
  19. axios请求（高级用法）示例：http://127.0.0.1:8000/axios_other.html
  21. axios请求（实例用法）示例：http://127.0.0.1:8000/axios_instance.html
复制代码
代码如下：
  1. const http = require('http');
  2. const path = require('path');
  3. const url = require('url')
  4. const fs = require('fs');
  6. const server = http.createServer()
  7. server.on('request',(req,res)=>{
  8.     const urlObj = url.parse(req.url, true);
  9.     if(urlObj.pathname === '/test'){
  11.         if(req.method === 'GET'){
  12.             const str = JSON.stringify(urlObj.query);
  13.             res.end(str);
  14.         }
  15.         if(req.method === 'POST'){
  16.             let params = '';
  17.             req.on('data', chunk=>{
  18.                 params += chunk;
  19.             });
  20.             req.on('end', ()=>{
  21.                 res.end(params);
  22.             });
  23.         }
  24.     }else{
  25.         fs.readFile(path.join(__dirname, urlObj.pathname), 'utf8', function(err, dataStr){
  26.             if(err){
  27.                 return console.log(err.message)
  28.             }
  29.         res.setHeader('Content-type', 'text/html; charset=utf-8');
  30.         res.end(dataStr);
  31.          })
  32.     }
  33. })
  34. server.listen(8000, ()=>{
  35.     console.log('server running at http://127.0.0.1:8000')
  36. })
复制代码

1、Ajax请求

Ajax使用五个步调：
步调1：创建一个XMLHttpRequest对象
var xmlhttp=new XMLHttpRequest();
步调2：设置请求方式和请求地址（使用open(method,url,async)方法）
method：请求方式，get大概post。（默以为get）
url：请求路径,文件在服务器上的位置
async：是否为异步请求。（默以为true，异步请求）
步调3：发送send() 请求
若为post方式时需要使用setRequestHeader()来添加http头
步调4：监听状态的变化
每当readyState状态改变时，就会触发 onreadystatechange事件，执行回调函数。readyState存有XMLHttpRequest的5种状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理惩罚中
4: 请求已完成，且相应已就绪
步调5：处理惩罚返回的结果
根据请求服务器返回状态码(status)，大于200，小于300，或便是304，则表现请求乐成, 否则服务器请求失败。获取服务器中相应，使用XMLHttpRequest对象的responseText或responseXML属性。
responseText：得到字符串形式的相应数据。
responseXML：得到 XML 形式的相应数据。
ajax的get请求示例代码：
  1. <button>ajax的get请求</button>
  2. <script>
  3. const btn = document.querySelector("button");
  4. btn.onclick = function () {
  5.     var xmlhttp = new XMLHttpRequest();
  6.     xmlhttp.open("GET", "http://127.0.0.1:8000/test?param1=ajax&param2=get&param3=公众号：愤怒的it男", true);
  7.     xmlhttp.send();
  8.     xmlhttp.onreadystatechange = function () {
  9.         if (xmlhttp.readyState === 4) {
  10.             if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
  11.                 console.log(JSON.parse(xmlhttp.responseText));
  12.             } else {
  13.                 console.log("没有接收到服务器的数据");
  14.             }
  15.         }
  16.     }
  17. }
  18. </script>
复制代码
ajax的post请求示例代码：
  1. <button>ajax的post请求</button>
  2. <script>
  3. const btn = document.querySelector("button");
  4. btn.onclick = function () {
  5.     var xmlhttp=new XMLHttpRequest();
  6.     xmlhttp.open("POST","http://127.0.0.1:8000/test",true);
  7.     xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  8.     xmlhttp.send(JSON.stringify({'param1':'ajax','param2':'post','param3':'公众号：愤怒的it男'}));
  9.     xmlhttp.onreadystatechange=function () {
  10.         if (xmlhttp.readyState === 4) {
  11.             if (xmlhttp.status>=200 && xmlhttp.status<300 ||xmlhttp.status===304 ){
  12.                 console.log(JSON.parse(xmlhttp.responseText));
  13.             }else{
  14.                 console.log("没有接收到服务器的数据");
  15.             }
  16.         }
  17.     }
  18. }
  19. </script>
复制代码
2、fetch请求

（1）POST请求的2种内容类型：
  1. //如果是application/x-www-form-urlencoded，body请求体内容为FormData对象：
  2. var formData = new FormData()
  3. formData.append('param1','fetch')
  4. formData.append('param1','post')
  5. formData.append('param1','公众号：愤怒的it男')
  6. //如果是application/json，body请求体内容为JSON字符串：
  7. JSON.stringify({'param1':'fetch','param2':'post','param3':'公众号：愤怒的it男'})
复制代码
（2）response返回的3种数据格式：
  1. //如果是json格式
  2. fetch(url [,options]).then(rsp => {return rsp.json()}).then(data => {console.log(data)})
  3. //如果是文本格式
  4. fetch(url [,options]).then(rsp => {return rsp.text()}).then(data => {console.log(data)})
  5. //如果是二进制流
  6. fetch(url [,options]).then(rsp => {return rsp.blob()}).then(data => {console.log(data)})
复制代码
fetch的get请求示例代码：
  1. <button>fetch的get请求</button>
  2. <script>
  3.     const btn = document.querySelector("button");
  4.     btn.onclick = function() {
  5.         fetch('http://127.0.0.1:8000/test?param1=fetch&param2=get&param3=公众号：愤怒的it男', {
  6.             'method': 'GET',
  7.             'body': null,
  8.             'headers': {
  9.               "accept": "*/*",
  10.               "sec-fetch-dest": "empty",
  11.               "sec-fetch-mode": "cors",
  12.               "sec-fetch-site": "none",
  13.               'content-type': 'application/json, text/plain, */*'
  14.             }
  15.         }).then(res => {return res.json()}).then(data => {
  16.           console.log(data)
  17.         });
  18.     }
  19. </script>
复制代码
fetch的post请求示例代码：
  1. <button>fetch的post请求</button>
  2. <script>
  3.     const btn = document.querySelector("button");           
  4.     btn.onclick = function() {
  5.         fetch('http://127.0.0.1:8000/test', {
  6.             'method': 'POST',
  7.             'body': JSON.stringify({'param1':'fetch','param2':'post','param3':'公众号：愤怒的it男'}),
  8.             'headers': {
  9.               "accept": "*/*",
  10.               "sec-fetch-dest": "empty",
  11.               "sec-fetch-mode": "cors",
  12.               "sec-fetch-site": "none",
  13.               'content-type': 'application/json; charset=UTF-8'
  14.             }
  15.         }).then(res => {return res.json()}).then(data => {
  16.           console.log(data)
  17.         });
  18.     }
  19. </script>
复制代码
3、jQuery请求

jQuery的get请求示例代码：
  1. <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  2. <button>jQuery的get请求</button>
  3. <script>
  4.     const btn = document.querySelector("button");
  5.     btn.onclick = function() {
  6.         $.get("http://127.0.0.1:8000/test?param1=jQuery&param2=get&param3=公众号：愤怒的it男",function(data,status){
  7.             console.log(JSON.parse(data));
  8.         });
  9.     }
  10. </script>
复制代码
jQuery的post请求示例代码：
  1. <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  2. <button>jQuery的post请求</button>
  3. <script>
  4.     const btn = document.querySelector("button");           
  5.     btn.onclick = function() {
  6.         data = JSON.stringify({'param1':'fetch','param2':'post','param3':'公众号：愤怒的it男'});
  7.         $.post("http://127.0.0.1:8000/test", data, function(data,status){
  8.             console.log(JSON.parse(data));
  9.         });
  10.     }
  11. </script>
复制代码
$.get等价于jQuery.get，$.post等价于jQuery.post。
4、axios请求

axios的get请求底子使用示例代码：
  1. <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  2. <button>axios的get请求</button>
  3. <script>
  4.     const btn = document.querySelector("button");
  5.     btn.onclick = function() {
  6.         axios.get("http://127.0.0.1:8000/test?param1=axios&param2=get&param3=公众号：愤怒的it男").then(response => {
  7.             console.log(response.data)
  8.         });
  9.     }
  10. </script>
复制代码
axios的post请求底子使用示例代码：
  1. <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  2. <button>axios的post请求</button>
  3. <script>
  4.     const btn = document.querySelector("button");           
  5.     btn.onclick = function() {
  6.         data={
  7.             param1:'axios',
  8.             param2:'post',
  9.             param3:'公众号：愤怒的it男'
  10.         }
  11.         axios.post('http://127.0.0.1:8000/test',data).then(response => {
  12.             console.log(response.data)
  13.         });
  14.     }
  15. </script>
复制代码
axios支持多请求并发，可以添加全局或局部设置，也可以添加请求拦截器和相应拦截器。拦截器会在发生相应请求之前和收到相应数据之后第一时间被调用，此中请求拦截器是先发的请求先拦截，而相应拦截器则是先发的请求后拦截。如下代码涉及axios的多个高级用法：
  1. <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  2. <button>axios请求（高级用法）</button>
  3. <script>
  4.     const btn = document.querySelector("button");
  5.     btn.onclick = function() {
  6.         // 全局配置baseURL和timeout
  7.         axios.defaults.baseURL = 'http://127.0.0.1:8000';
  8.         axios.defaults.timeout = 3000;
  9.         // 添加请求拦截器
  10.         axios.interceptors.request.use(config =>{   
  11.             console.log(config);
  12.             return config;
  13.         },err => {
  14.             console.log(err);
  15.         })
  16.         // 添加响应拦截器
  17.         axios.interceptors.response.use(res=>{
  18.             console.log(res);
  19.             return res;
  20.         },err=>{
  21.             console.log(err);
  22.         })
  23.         // 多个请求并发
  24.         axios.all([
  25.             axios({
  26.                 method:"get",        // 请求方式不写则默认为get请求
  27.                 //单个axios配置baseURL和timeout
  28.                 //baseURL:'http://127.0.0.1:8000',
  29.                 //timeout:3000,
  30.                 url:"/test",
  31.                 params:{        // get请求中，url后面的参数可以分开单独放在params中
  32.                     param1:'axios1',
  33.                     param2:'get',
  34.                     param3:'公众号：愤怒的it男'
  35.                 }
  36.             }),
  37.             axios({
  38.                 method:"post",
  39.                 //单个axios配置baseURL和timeout
  40.                 //baseURL:'http://127.0.0.1:8000',
  41.                 //timeout:3000,
  42.                 url:"/test",
  43.                 data:{
  44.                     param1:'axios2',
  45.                     param2:'post',
  46.                     param3:'公众号：愤怒的it男'
  47.                 }
  48.             }),
  49.         ]).then(response => {
  50.             console.log(response[0].data);
  51.             console.log(response[1].data);
  52.         });
  53.     }
  54. </script>
复制代码
输出结果如下：

有时候请求不想使用全局的设置大概拦截器，则我们可以创建axios实例，在该axios实例中设置大概添加拦截器，则之后只在该实例内有效。具体示例代码如下：
  1. <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  2. <button>axios请求（实例用法）</button>
  3. <script>
  4.     const btn = document.querySelector("button");
  5.     btn.onclick = function() {
  6.         // 创建实例并为实例配置
  7.         const instance = axios.create({
  8.             baseURL:'http://127.0.0.1:8000',
  9.             timeout:3000,
  10.         });
  11.         // 为实例添加请求拦截器
  12.         instance.interceptors.request.use(config =>{   
  13.             console.log(config);
  14.             return config;
  15.         },err => {
  16.             console.log(err);
  17.         });
  18.         // 为实例添加响应拦截器
  19.         instance.interceptors.response.use(res=>{
  20.             console.log(res);
  21.             return res;
  22.         },err=>{
  23.             console.log(err);
  24.         });
  25.         // 发起get请求
  26.         instance({
  27.             method:"get",
  28.             url:"/test",
  29.             params:{
  30.                 param1:'axios1',
  31.                 param2:'get',
  32.                 param3:'公众号：愤怒的it男'
  33.             }
  34.         }).then(response => {
  35.             console.log(response.data);
  36.         });
  37.         // 发起post请求
  38.         instance({
  39.             method:"post",
  40.             url:"/test",
  41.             data:{
  42.                 param1:'axios2',
  43.                 param2:'post',
  44.                 param3:'公众号：愤怒的it男'
  45.             }
  46.         }).then(response => {
  47.             console.log(response.data);
  48.         });
  49.     }
  50. </script>
复制代码
输出结果如下：

   
 更多爬虫知识以及实例源码，可关注微信公众号【愤怒的it男】


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

tsx81429

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表