[前端请求]Ajax知识点 Jquery接口封装 fetch原生js请求

路修远i2024-01-21 0:04

Ajax学习

大家应该都知道mysql数据库，服务器是一台机器，他的的作用就是用来存储各种数据资源，而数据库存在的意义就是帮助服务器更好得打理数据！

比如，我们的页面上有一个按钮，用户点了一下这个按钮，页面就可以通过万维网来与目标地址进行数据交互！我们的页面就会发送一个网络请求 过去，目标地址的服务器就会接受到这个请求，服务器已经封装好了一些后端代码，这个后端代码时刻运行在服务器上，后端代码就会做一些处理！去数据库中帮我们把数据取出来，再拿到这个数据，再通过网络请求 把这个数据返回给我们的页面，于是我们的页面就可以拿到这一段数据，把数据展示在页面上，当然，这其中有很多细节我们没有聊到，大概是这样一个过程！那么，这个请求该怎么发出去呢？

这就是我们今天要学的Ajax

一、Ajax基础介绍

Ajax（Async JavaScript And XML）即异步 JavaScript 和 XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，更新网页的某部分内容。

Ajax 主要包括以下几个部分：

  1. JavaScript：用于实现客户端的逻辑和与服务器的交互。
  2. XMLHttpRequest：这是 JavaScript 提供的一个对象，用于向服务器发送请求和接收响应。
  3. 服务器端脚本：通常使用服务器端语言（如 PHP、Python、Ruby 等）来处理请求并生成响应。
  4. 数据格式：Ajax 通信中常用的数据格式包括 XML 和 JSON。

使用 Ajax 技术，可以在不刷新页面的情况下，向服务器请求数据、更新网页内容、验证用户输入等。

二、Ajax实现

今天我们就拿到大佬的网易云音乐API （node）:网易云音乐 NodeJS 版 API (neteasecloudmusicapi.js.org)

**API：**应用程序编程接口。它是一组预定义的函数、方法、属性或类，用于与 JavaScript 引擎或其他 JavaScript 库进行交互。

我们在github拿到这一段后端代码之后，我们把它运行在自己的电脑上！这样我们就有了一个后端代码!

地址为：http://localhost:3000

这里我们为大家推荐一个插件：JSONVue

这个插件可以帮助我们处理这种情况：比如我们直接通过浏览器访问接口数据，看到的数据是乱的，我们就可以通过这个插件让我们的数据看起来更舒服！

比如我们拿到这个接口当中的

新歌速递

接口地址 : /top/song

调用例子 : /top/song?type=96

我们在浏览器中输入：localhost:3000/top/song?type=96

我们能看到这样一个页面就说明后台启动成功了！

接下来我们就使用一下Ajax

案例一：Ajax基本知识点-新歌速递

html 复制代码 
<body>
    <button id="btn">新歌速递</button>
    <ul id="ul">
    </ul>
    <script>
        const btn = document.getElementById("btn");
        btn.addEventListener("click",()=>{
            //创建实例
            let xhr = new XMLHttpRequest();
            //准备阶段
            xhr.open('GET','http://localhost:3000/top/song?type=7',true);
            // 接收服务器返回的数据
            xhr.onreadystatechange=()=>{
                if(xhr.readyState===4&&xhr.status===200){
                    console.log(JSON.parse(xhr.responseText));
                    let result = JSON.parse(xhr.responseText);
                    result.data.forEach((item)=>{
                        let li = document.createElement("li");
                        li.innerHTML = item.name;
                        document.getElementById("ul").appendChild(li);
                    })
                }
            }
            // 发送请求
            xhr.send();

        })
    </script>
</body>

这就是我们一个案例我们来为大家逐条分析一下！

我们要实现的效果是：通过这个新歌速递的按钮，点一下，就可以拿到后端的数据并且展示在页面上。

这里我们为这个按钮添加一个点击事件,通过传统的js语法

js 复制代码 
const btn = document.getElementById("btn");
btn.addEventListener("click",()=>{}

接下来就开始我们的AJax操作了

js 复制代码 
 let xhr = new XMLHttpRequest();

这是js封装好的用于发送http请求的类,用这个类发送http请求，就相当于用浏览器发http请求，xhr就是我们拿到一个实例对象！

js 复制代码 
xhr.open('GET','http://localhost:3000/top/song?type=7',true);

open方法用来做请求的准备工作！

第一个参数为请求的类型,'GET'是一种请求类型，这是常见的一种请求方式，请求方式有很多种：POST PUT DELETE 等等，用的最多是GET 和 POST

ajax请求的方式有以下几种：

  1. GET：向服务器请求获取数据，通常用于请求静态资源。
  2. POST：向服务器提交数据，通常用于提交表单数据或上传文件。
  3. PUT：向服务器更新数据，通常用于更新资源的全部内容。
  4. DELETE：向服务器删除数据，通常用于删除资源。
  5. HEAD：向服务器请求获取资源的头部信息，通常用于检查资源是否存在或检查资源的更新时间等。
  6. OPTIONS：向服务器请求获取可用的请求方法，通常用于跨域请求或预检请求。

第二个参数 就是我们的接口地址了！这里我们用的是'http://localhost:3000/top/song?type=7'

第三个参数是一个布尔值 ture||false 表示是否异步请求 (一般我们用异步,使用同步的话假如遇到网络情况不好的时候，会阻塞后面代码的运行！)

js 复制代码 
xhr.send();

用于发送网络请求

js 复制代码 
xhr.onreadystatechange=()=>{
    if(xhr.readyState===4&&xhr.status===200){
        console.log(JSON.parse(xhr.responseText));
        let result = JSON.parse(xhr.responseText);
        result.data.forEach((item)=>{
            let li = document.createElement("li");
            li.innerHTML = item.name;
            document.getElementById("ul").appendChild(li);
        })
    }
}

这里负责接收服务器返回的数据！并且把数据展示在页面上！

js 复制代码 
 if(xhr.readyState===4&&xhr.status===200){}

一般我们要加上这样一个判断条件，其中readyState 4 表示请求已经完成，status 200 表示请求成功

readyState表示的是Ajax的状态

  1. 0 -- xhr刚刚创建，请求还没发
  2. 1 -- open准备完成
  3. 2 -- 请求已经发送，客户端接收到了响应头
  4. 3 -- 接收到服务器返回的响应体（数据包），正在解析
  5. 4 -- 解析完成

status表示的是http的状态码,下面是一些常见的状态码:

  1. 200 OK：请求成功，服务器成功返回了请求的资源。
  2. 301 Moved Permanently：永久重定向，请求的资源已永久移动到新的位置。
  3. 302 Found：临时重定向，请求的资源临时移动到新的位置。
  4. 400 Bad Request：客户端请求有错误，服务器无法理解请求。
  5. 401 Unauthorized：请求未经授权，客户端需要进行身份验证。
  6. 403 Forbidden：服务器拒绝了请求，客户端没有权限访问该资源。
  7. 404 Not Found：服务器找不到请求的资源。
  8. 500 Internal Server Error：服务器内部发生错误，无法完成请求。
  9. 502 Bad Gateway：代理服务器从上游服务器收到了无效的响应。
  10. 503 Service Unavailable：服务器当前无法处理请求，可能是因为维护或过载。
js 复制代码 
console.log(JSON.parse(xhr.responseText));

responseText 就是后台的数据 返回的数据是一个JSON 字符串 我们要处理一下数据，将数据转换为对象JSON.parse(xhr.responseText)把字符串转为对象。

js 复制代码 
let result = JSON.parse(xhr.responseText);

使用result存储转为对象后的数据.

js 复制代码 
result.data.forEach((item)=>{
    let li = document.createElement("li");
    li.innerHTML = item.name;
    document.getElementById("ul").appendChild(li);
})

使用js中的forEach将数据中的歌曲名称展示在页面上！我们来看看效果！

案例二、Jquery接口封装 -新歌速递

我们在上述案例的基础上，转换为jquery的封装

推荐一个网站：BootCDN前端工具网站BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

jquery引入（script）:<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

html 复制代码 
<body>
    <button id="btn">新歌速递</button>
    <ul id="ul">
    </ul>
    <!-- jquery 的引入-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
        const btn = document.getElementById("btn");
        btn.addEventListener("click",()=>{
            // jquery的语法 异步代码
            $.ajax({
                url:'http://localhost:3000/top/song?type=7',
                method:'GET',
                dataType: 'json',
                success:function(data){
                    // success回调 拿到数据响应的时候操作
                    // 要放在里面，因为请求是异步的，我们要拿到数据之后，才能操作数据
                    console.log(data);
                }
            })

        })
    </script>
</body>

这里我们使用的是jquery封装接口来进行与后端的数据交互

html 复制代码 
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

这里是jquery的引入！当然方式不止这一种，还有很多种方式，我们只是拿到其中的一种而已，接下来我们就在在按钮的点击事件中直接使用jquery的语法

js 复制代码 
// jquery的语法 异步代码
$.ajax(
    {
    url:'http://localhost:3000/top/song?type=7',
    method:'GET',
    dataType: 'json',
    success:function(data){
        // success回调 拿到数据响应的时候操作
        // 要放在里面，因为请求是异步的，我们要拿到数据之后，才能操作数据
        console.log(data);
    }
})

我们可以直接使用$.ajax对ajax进行封装，在$.ajax()的括号中加入一个对象{}

js 复制代码 
{
    url:'http://localhost:3000/top/song?type=7',
    method:'GET',
    dataType: 'json',
    success:function(data){
    	console.log(data);
    }
}

其中

url:是接口的地址，method:是请求的类型，dataType:告诉后端数据返回的类型

success:success回调,是拿到数据后，我们要进行的操作！要放在这个对象里面，因为请求是异步的，我们要拿到数据之后，才能操作数据。

我们来看看打印

案例三、fetch()原生js自带的方法-新歌速递

你可以在MDN前端字典网站中找到它！MDN Web Docs (mozilla.org)

html 复制代码 
<body>
    <button id="btn">新歌速递</button>
    <ul id="ul">
    </ul>
    <!-- jquery 的引入-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
        const btn = document.getElementById("btn");
        btn.addEventListener("click",()=>{
            // 说明fetch是一个异步函数,会返回一个new promise 并且会把后端返回的数据通过resolve抛出这个数据
        fetch("http://localhost:3000/top/song?type=7")
        .then(data=>{
            // data是整个响应体 data可以调用json()方法 得到一个promise对象
            return data.json();
        })
        .then((res)=>{
            console.log(res);
        })
        })
    </script>
</body>

这里还是通过点击事件

js 复制代码 
fetch("http://localhost:3000/top/song?type=7")

这是官方的fetch方法，其中带一个形参,接收的就是你的接口地址！

并且，在后面可以接.then()，这说明fetch是一个异步函数，并且会返回一个new promise对象，（返回了new promise才能接.then），并且会把后端返回的数据通过resolve抛出这个数据！

js 复制代码 
then(data=>{
    // data是整个响应体 data可以调用json()方法 得到一个promise对象
    return data.json();
})

这是第一个.then，在这里我们拿到的data是整个响应体，我们可以返回data.json()之后再接.then，注意 这里.json是这个请求体能调用的方法,能得到一个promise对象

js 复制代码 
.then((res)=>{
    console.log(res);
})

这里是第二个.then这里我们就能拿到请求体抛出的数据了！接收一个形参res这个就是我们拿到的数据!

我们来看看打印的结果！

最后

各位老铁都看到这里了！coding不易，给我点上一个小小的赞吧！

后续我还会大家持续输出vue3，Element-ui以及相关后端的文章！让我们一起跨步向前！

那么，我们今天就到这啦！

个人Github：一个修远君的库 (github.com)

相关推荐
web前端神器2 分钟前
指定阿里镜像原理
前端
枷锁—sha6 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha8 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
ldj202020 分钟前
SpringBoot为什么使用new RuntimeException() 来获取调用栈？
java·spring boot·后端
超龄超能程序猿21 分钟前
Spring 应用中 Swagger 2.0 迁移 OpenAPI 3.0 详解：配置、注解与实践
java·spring boot·后端·spring·spring cloud
群联云防护小杜24 分钟前
深度隐匿源IP：高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
江南一点雨28 分钟前
Tokenizer 和 BPE
后端
风象南33 分钟前
SpringBoot配置属性热更新的轻量级实现
java·spring boot·后端
洛阳泰山34 分钟前
Spring Boot 整合 Nacos 实战教程：服务注册发现与配置中心详解
java·spring boot·后端·nacos
DanB2437 分钟前
html复习
javascript·microsoft·html
热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02Cursor Claude 模型无法使用的解决方法03KGG转MP3工具|非KGM文件|解密音频04【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致05【无标题】06集群聊天服务器---MySQL数据库的建立07突破限制：使用 Claude Code Proxy 让 Claude Code 自由连接任意模型08绿色建筑新态势：楼宇自控助力能效提升，推动成本优化新路径09使用Ruby接入实时行情API教程10Claude Code 最新版已经支持 Windows 安装使用！