前端熟练发起ajax请求的多种方法

自我复习

2112人浏览 · 2023-07-12 08:10:23

自我复习 · 2023-07-12 08:10:23 发布

1.原生发起ajax

1.1概念：

说明：XMLHttpRequest是 JavaScript 的内置对象，用于在Web应用程序中向服务器发送HTTP请求和接收响应。通过XMLHttpRequest对象，可以实现异步加载数据，无需刷新整个页面即可更新部分内容。常用的HTTP请求方法有GET、POST等。

1.2源码解读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生发起ajax请求</title>
</head>
<body>
    <h1>原生发起ajax方法</h1>

</body>
</html>
<script>
    // 创建一个XMLHttpRequest对象
    const XML=new XMLHttpRequest()
    // 设置请求方法
    XML.open("GET","./index.json")
    // 发送请求
    XML.send()
    // 这是一个XMLHttpRequest对象的事件处理函数，
//当它的readyState状态变为4（即数据传输完成）
//并且HTTP状态码为200时（即请求成功），打印出Response的响应内容。
//其中XML是XMLHttpRequest对象的实例。
    XML.onreadystatechange=function(){
        if(this.readyState==4&&this.status==200){
            console.log(XML.response);
        }
    }
</script>

1.3前台

2.axios发起ajax

2.1概念

说明：Axios是一个基于Promise的HTTP客户端，用于浏览器和node.js中向服务器发送HTTP请求。它提供了简单易用的API，支持各种请求方式，包括GET、POST、PUT、DELETE等，并且能够自动转换请求和响应数据格式。

2.2源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios发起ajax</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <script>
      axios({
        // 请求方式
        method: "GET",
        // 请求路径
        url: "./index.json",
        // 成功回调
      })
        .then((res) => {
          console.log(res.data);
          // 失败回调
        })
        .catch((err) => {
          console.log(err);
        });
    </script>
  </body>
</html>

2.3前台

说明：axios会将json数据格式自动转变成js对象

3.juquery封装方法发起ajax

3.1概念

说明:在jQuery中，使用$.ajax()方法可以发送HTTP请求。该方法提供了丰富的配置选项，可以实现各种类型的请求，如GET、POST、PUT、DELETE等，并能够自动处理请求和响应数据格式。

3.2源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
  <script>
    $.ajax({
        // 请求类型
        type:"GET",
        // 请求路径
        url:"./index.json",
        // 请求数据
        data:{
            
        },
        //成功回调 
        success:res=>{
            console.log(res);
        },
        // 失败回调
        error:err=>{
            console.log(err);
        }
    })
  </script>
</body>
</html>

3.3 前台

4.fetch发起ajax

4.1概念

说明：Fetch是一种新的Web API，用于在Web浏览器中发起HTTP请求。它是一种用于代替XMLHttpRequest的现代化方式，使用Promise来处理异步请求响应。Fetch API有很多优点，比如支持流式操作、更好的错误处理、更加简洁易懂的API以及默认支持CORS请求等。

4.2源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fetch</title>
  </head>
  <body>
    <script>
      // 路径
      fetch("./index.json", {
        // 方法
        method: "GET",
      })
        .then((response) => response.json())  //换行后不要忘记return
        .then((res) => {
          console.log(res);
        })
        .catch((error) => console.error(error));
    </script>
  </body>
</html>

4.3前台

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模