devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

AJAX到AXIOS常用格式汇总_axios格式

作者：羊村懒王 | 2024-05-16 12:42:37

赞

踩

axios格式

HTTP协议

  • 协议详细规定了浏览器和万维网服务器之间相互通信的规则
  • 浏览器给服务器发送，成为请求，发送的内容成为请求报文
    • 请求格式
  1. 行 ： 包含：请求类型（GET、POST等）、url路径、HTTP版本
  2. 头	： 包含很多内容，固定格式是：[名字][英文冒号][空格][体]
  3. 空行
  4. 请求体：如果是GET请求，此处为空; 如果是POST请求，此处可以不为空

  • 服务器给浏览器结果，成为响应，结果的内容成为响应报文
    • 响应报文的格式
  1. 行：包含：HTTP协议版本、响应状态码（200表示成功，404表示找不到网页）、响应状态字符串
  2. 头：格式跟请求头一样
  3. 空行
  4. 体：主要的返回内容，可以是html格式的

一般使用和演示ajax需要下载node.js和使用express框架（作为我们的前端）

node.js下载地址：Node.js

express网址：Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网

发送GET请求的基本格式

  1.     <script>
  2.         // 获取button元素
  3.         const btn = document.getElementsByTagName('button')[0];
  4.         const result = document.getElementById('result');
  5.         // 绑定点击事件
  6.         btn.onclick = function(){
  7.             // 创建对象
  8.             const xhr = new XMLHttpRequest();
  9.             // 初始化 设置请求方法和 url
  10.             xhr.open('GET','http://127.0.0.1:8000');
  11.             // 发送
  12.             xhr.send();
  13.             // 时间绑定 处理服务器端返回的结果
  14.             // 在onreadystatechange中
  15.                 // on 表示在什么的时候
  16.                 // readystate 是 xhr 对象中的属性，表示此时的状态，值有5个：0，1，2，3，4
  17.             xhr.onreadystatechange = function(){
  18.                 // 判断是否返回了全部的结果
  19.                 if(xhr.readyState === 4){
  20.                     // 判断响应状态码，200、404、403、401、500等
  21.                     // 响应状态码在200~300之间的都表示成功
  22.                     if(xhr.status >= 200 && xhr.status < 300){
  23.                         // 处理结果 四部分（行、头、空行、体）
  24.                         // console.log(xhr.status);// 状态码
  25.                         // console.log(xhr.statusText);// 状态字符串
  26.                         // console.log(xhr.getAllResponseHeaders);// 所有的响应头
  27.                         // console.log(xhr.response);// 响应体
  28.                         result.innerHTML = xhr.response;
  29.                     }
  30.                 }
  31.             }
  32.  
  33.         } 
  34.     </script>

在url里面设置参数

  • 用?连接地址和参数列表
  • 同&连接参数列表的多个参数
  • 例如我需要传递a=100;b=200;c=300这三个参数，url的书写：
  • https://www.baidu.com?a=100&b=200&c=300

ajax中引用express框架的基本格式

  1. // 引入express
  2. const express = require('express');
  3. // 创建应用对象
  4. const app = express();
  5. // 创建路由规则
  6. // requese是对请求报文的封装，response是对响应报文的封装
  7. app.get('/',(request,response)=>{
  8.     // 设置响应
  9.     response.send("hello, express");
  10. });
  11. // 监听端口启动服务
  12. app.listen(8000,()=>{
  13.     console.log("服务已经启动，8000端口监听中...");
  14. })

一般情况下还要设置跨域

发送POST请求的基本格式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>POST 请求</title>
  8.     <style>
  9.         #result{
  10.             width: 200px;
  11.             height: 200px;
  12.             border: 1px solid #903;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div id="result">
  18.         <!--当把鼠标放在这个div上时，发送POST请求，将返回结果在div里面展示-->
  19.     </div>
  20.  
  21.     <script>
  22.         // 获取元素
  23.         const result = document.getElementById('result');
  24.         // 绑定事件
  25.         result.addEventListener('mouseover',function(){
  26.             // 创建对象
  27.             const xhr = new XMLHttpRequest();
  28.             // 初始化 设置请求类型和url】
  29.             xhr.open('POST','http://127.0.0.1:8000');
  30.             // 发送
  31.             xhr.send('a=100&b=200&c=300');
  32.             // 事件绑定
  33.             xhr.onreadystatechange = function(){
  34.                 // 判断状态
  35.                 if(xhr.readyState === 4){
  36.                     if(xhr.status >= 200 && xhr.status < 300){
  37.                         // 处理返回结果
  38.                         result.innerHTML = xhr.response;
  39.                     }
  40.                 }
  41.             }
  42.         })
  43.     </script>
  44. </body>
  45. </html>

POST设置参数的格式比较灵活，但是在服务端一定要与之对应的处理方式

需要写在send的括号里面

上述三种均可

json数据响应式处理

在开发中，我们常常会遇到像

{'name':'ayguigfu'};

这样的数据，它就是一个对象！但是处理起来很不方便。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>3-json</title>
  8.     <style>
  9.         #result{
  10.             width: 200px;
  11.             height: 100px;
  12.             border: 1px solid #903;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div id="result"></div>
  18.     <script>
  19.         const result = document.getElementById('result');
  20.         window.onkeydown = function(){
  21.             // 创建对象
  22.             const xhr = new XMLHttpRequest();
  23.             // 自动转换数据需要的设置响应数据的类型
  24.             xhr.responseType = 'json';
  25.             // 初始化
  26.             xhr.open('GET','http://127.0.0.1:8000/json-server');
  27.             // 发送
  28.             xhr.send();
  29.             // 事件绑定
  30.             xhr.onreadystatechange = function(){
  31.                 if(xhr.readyState === 4){
  32.                     if(xhr.status >= 200 && xhr.status < 300){
  33.                        // 手动对数据做一个转换
  34.                     //    let data = JSON.parse(xhr.response);
  35.                     //    console.log(data);
  36.                     //    result.innerHTML = data.name;
  37.                     // console.log(xhr.response);
  38.                     result.innerHTML = xhr.response.name;
  39.                     }
  40.                 }
  41.             }
  42.  
  43.         }
  44.     </script>
  45. </body>
  46. </html>

在server.js文件里面我们设置了专门的路径和响应数据

  1. app.get('/json-server',(request,response)=>{
  2.   // 设置允许跨域
  3.   response.setHeader('Access-Control-Allow-Origin', '*');
  4.   // 响应一个数据
  5.   const data = {
  6.     name : 'atguigu'
  7.   }
  8.   // send 里面只能结束字符穿类型的，因此对data对象进行转换
  9.   let str = JSON.stringify(data);
  10.   // 设置响应体
  11.   response.send(str);
  12. });

网络超时和网络异常的处理

因为各种各样的原因，我们的请求总是会遇到问题，为了用户的体验，我们不能不管

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>网络超时和异常</title>
  8.     <style>
  9.         #result{
  10.             width: 200px;
  11.             height: 200px;
  12.             border: 1px solid #394;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <button>点我发送请求</button>
  18.     <div id="result"></div>
  19.     <script>
  20.         const btn = document.getElementsByTagName('button')[0];
  21.         const result = document.getElementById('result');
  22.  
  23.         btn.addEventListener('click',function(){
  24.             const xhr = new XMLHttpRequest();
  25.             // 请求超时设置 2s
  26.             xhr.timeout = 2000;
  27.             // 超时回调
  28.             xhr.ontimeout = function(){
  29.                 alert('网络异常,请稍后重试');
  30.             }
  31.             // 网络异常回调
  32.             xhr.onerror = function(){
  33.                 alert('您的网络似乎出了一点问题');
  34.             }
  35.             xhr.open('GET','http://127.0.0.1:8000/e');
  36.             xhr.send();
  37.             xhr.onreadystatechange = function(){
  38.                 if(xhr.readyState === 4){
  39.                     if(xhr.status >= 200 && xhr.status < 300){
  40.                         result.innerHTML = xhr.response;
  41.                     }
  42.                 }
  43.             }
  44.         })
  45.     </script>
  46. </body>
  47. </html>

再server.js里面我们写一个单独的规则

  1. // 针对超时和网络异常
  2. app.get('/e',(request,response)=>{
  3.     response.setHeader('Access-Control-Allow-Origin', '*');
  4.     // 设置响应体(3s之后再响应)
  5.     setTimeout(()=>{
  6.         response.send("延时响应");
  7.     },3000);
  8. });

手动取消请求

重复请求问题

同一个用户和不同的用户之前，可能不停的重复发送同样的请求，这样对我们的服务器很不友好

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>重复请求问题</title>
  8.     <style>
  9.     </style>
  10. </head>
  11. <body>
  12.     <button>点我发送请求</button>
  13.     <script>
  14.         const btn = document.getElementsByTagName('button')[0];
  15.         const result = document.getElementById('result');
  16.         let isSending = false; // 标识是否正在发送请求
  17.         let xhr = null;
  18.  
  19.         btn.addEventListener('click',function(){
  20.             if(isSending == true) xhr.abort();
  21.             xhr = new XMLHttpRequest();
  22.             isSending = true;
  23.             xhr.open('GET','http://127.0.0.1:8000/e');
  24.             xhr.send();
  25.             xhr.onreadystatechange = function(){
  26.                 if(xhr.readyState === 4){
  27.                     isSending = false;
  28.                     if(xhr.status >= 200 && xhr.status < 300){
  29.                         result.innerHTML = xhr.response;
  30.                     }
  31.                 }
  32.             }
  33.         })
  34.     </script>
  35. </body>
  36. </html>

JQuery发送请求

相比于原生ajax请求，JQuery封装的方法会更加方便

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>重复请求问题</title>
  8.     <style>
  9.     </style>
  10. </head>
  11. <body>
  12.     <button>点我发送请求</button>
  13.     <script>
  14.         const btn = document.getElementsByTagName('button')[0];
  15.         const result = document.getElementById('result');
  16.         let isSending = false; // 标识是否正在发送请求
  17.         let xhr = null;
  18.  
  19.         btn.addEventListener('click',function(){
  20.             if(isSending == true) xhr.abort();
  21.             xhr = new XMLHttpRequest();
  22.             isSending = true;
  23.             xhr.open('GET','http://127.0.0.1:8000/e');
  24.             xhr.send();
  25.             xhr.onreadystatechange = function(){
  26.                 if(xhr.readyState === 4){
  27.                     isSending = false;
  28.                     if(xhr.status >= 200 && xhr.status < 300){
  29.                         result.innerHTML = xhr.response;
  30.                     }
  31.                 }
  32.             }
  33.         })
  34.     </script>
  35. </body>
  36. </html>

JQuery发送ajax的通用格式

  1. $('button').eq(2).click(function(){
  2.             $.ajax({
  3.                 url: "http://127.0.0.1:8000/JQuery",
  4.                 type: 'GET',
  5.                 timeout: 5000,
  6.                 // data: {
  7.                 //     "username": username,
  8.                 //     "password": passerword,
  9.                 // },
  10.                 dataType: "text",
  11.                 success: function(data){
  12.                     alert("请求成功");
  13.                     console.log(data);
  14.                 },
  15.                 error: function(){
  16.                     alert("请求失败");
  17.                 }
  18.             })
  19.         })

axios发送请求的通用格式

  1. btns[2].onclick = function(){
  2.             axios({
  3.                 method: 'POST',
  4.                 // url
  5.                 url: 'http:// 127.0.0.1:8080/axios-server',
  6.                 // url参数
  7.                 params: {
  8.                     vip:10,
  9.                     level:30,
  10.                 },
  11.                 // 请求体参数
  12.                 data: {
  13.                     username:'admin',
  14.                     password: 'admin'
  15.                 }
  16.             })
  17.         }

官方跨域解决方案

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/578785
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号