[前端请求]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)

相关推荐
衣乌安、几秒前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜几秒前
ppk谈JavaScript，悟透JavaScript，精通CSS高级Web，JavaScript DOM编程艺术，高性能JavaScript pdf
前端·javascript
低代码布道师3 分钟前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
NiNg_1_2342 小时前
SpringBoot整合SpringSecurity实现密码加密解密、登录认证退出功能
java·spring boot·后端
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张，YOLO道路事故目标检测实战训练教程！
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
Chrikk3 小时前
Go-性能调优实战案例
开发语言·后端·golang
幼儿园老大*4 小时前
Go的环境搭建以及GoLand安装教程
开发语言·经验分享·后端·golang·go
canyuemanyue4 小时前
go语言连续监控事件并回调处理
开发语言·后端·golang
杜杜的man4 小时前
【go从零单排】go语言中的指针
开发语言·后端·golang
热门推荐
01如何才能让手机厂商主动拥抱华为，接入鸿蒙系统？02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【TC3xx芯片】TC3xx芯片电源管理系统PMS详解05基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测06【经验分享】Ubuntu22.04安装微信(linux官方版)07Macbook pro M1 安装Ubuntu教程08RAG 实践- Ollama+RagFlow 部署本地知识库09Windows10安装PCL1.14.0及点云配准10文件或文件夹名称中有空格如何批量去除