[前端请求]Ajax知识点 Jquery接口封装 fetch原生js请求
qiyuwang 2024-10-07 15:23 23 浏览 0 评论
Ajax学习
大家应该都知道mysql数据库，服务器是一台机器，他的的作用就是用来存储各种数据资源，而数据库存在的意义就是帮助服务器更好得打理数据！
比如，我们的页面上有一个按钮，用户点了一下这个按钮，页面就可以通过万维网来与目标地址进行数据交互！我们的页面就会发送一个网络请求过去，目标地址的服务器就会接受到这个请求，服务器已经封装好了一些后端代码，这个后端代码时刻运行在服务器上，后端代码就会做一些处理！去数据库中帮我们把数据取出来，再拿到这个数据，再通过网络请求把这个数据返回给我们的页面，于是我们的页面就可以拿到这一段数据，把数据展示在页面上，当然，这其中有很多细节我们没有聊到，大概是这样一个过程！那么，这个请求该怎么发出去呢？
这就是我们今天要学的Ajax
一、Ajax基础介绍
Ajax（Async JavaScript And XML）即异步 JavaScript 和 XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，更新网页的某部分内容。
Ajax 主要包括以下几个部分：
- JavaScript：用于实现客户端的逻辑和与服务器的交互。
- XMLHttpRequest：这是 JavaScript 提供的一个对象，用于向服务器发送请求和接收响应。
- 服务器端脚本：通常使用服务器端语言（如 PHP、Python、Ruby 等）来处理请求并生成响应。
- 数据格式：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基本知识点-新歌速递
<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语法
const btn = document.getElementById("btn");
btn.addEventListener("click",()=>{}接下来就开始我们的AJax操作了
let xhr = new XMLHttpRequest();这是js封装好的用于发送http请求的类,用这个类发送http请求，就相当于用浏览器发http请求，xhr就是我们拿到一个实例对象！
xhr.open('GET','http://localhost:3000/top/song?type=7',true);open方法用来做请求的准备工作！
第一个参数为请求的类型,'GET'是一种请求类型，这是常见的一种请求方式，请求方式有很多种：POST PUT DELETE 等等，用的最多是GET 和 POST
ajax请求的方式有以下几种：
- GET：向服务器请求获取数据，通常用于请求静态资源。
- POST：向服务器提交数据，通常用于提交表单数据或上传文件。
- PUT：向服务器更新数据，通常用于更新资源的全部内容。
- DELETE：向服务器删除数据，通常用于删除资源。
- HEAD：向服务器请求获取资源的头部信息，通常用于检查资源是否存在或检查资源的更新时间等。
- OPTIONS：向服务器请求获取可用的请求方法，通常用于跨域请求或预检请求。
第二个参数就是我们的接口地址了！这里我们用的是'http://localhost:3000/top/song?type=7'
第三个参数是一个布尔值 ture||false 表示是否异步请求 (一般我们用异步,使用同步的话假如遇到网络情况不好的时候，会阻塞后面代码的运行！)
xhr.send();用于发送网络请求
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);
})
}
}这里负责接收服务器返回的数据！并且把数据展示在页面上！
if(xhr.readyState===4&&xhr.status===200){}一般我们要加上这样一个判断条件，其中readyState 4 表示请求已经完成，status 200 表示请求成功
readyState表示的是Ajax的状态
- 0 -- xhr刚刚创建，请求还没发
- 1 -- open准备完成
- 2 -- 请求已经发送，客户端接收到了响应头
- 3 -- 接收到服务器返回的响应体（数据包），正在解析
- 4 -- 解析完成
status表示的是http的状态码,下面是一些常见的状态码:
- 200 OK：请求成功，服务器成功返回了请求的资源。
- 301 Moved Permanently：永久重定向，请求的资源已永久移动到新的位置。
- 302 Found：临时重定向，请求的资源临时移动到新的位置。
- 400 Bad Request：客户端请求有错误，服务器无法理解请求。
- 401 Unauthorized：请求未经授权，客户端需要进行身份验证。
- 403 Forbidden：服务器拒绝了请求，客户端没有权限访问该资源。
- 404 Not Found：服务器找不到请求的资源。
- 500 Internal Server Error：服务器内部发生错误，无法完成请求。
- 502 Bad Gateway：代理服务器从上游服务器收到了无效的响应。
- 503 Service Unavailable：服务器当前无法处理请求，可能是因为维护或过载。
console.log(JSON.parse(xhr.responseText));responseText 就是后台的数据 返回的数据是一个JSON 字符串 我们要处理一下数据，将数据转换为对象JSON.parse(xhr.responseText)把字符串转为对象。
let result = JSON.parse(xhr.responseText);使用result存储转为对象后的数据.
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>
<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封装接口来进行与后端的数据交互
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>这里是jquery的引入！当然方式不止这一种，还有很多种方式，我们只是拿到其中的一种而已，接下来我们就在在按钮的点击事件中直接使用jquery的语法
// jquery的语法 异步代码
$.ajax(
{
url:'http://localhost:3000/top/song?type=7',
method:'GET',
dataType: 'json',
success:function(data){
// success回调 拿到数据响应的时候操作
// 要放在里面，因为请求是异步的，我们要拿到数据之后，才能操作数据
console.log(data);
}
})
我们可以直接使用$.ajax对ajax进行封装，在$.ajax()的括号中加入一个对象{}
{
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)
<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>这里还是通过点击事件
fetch("http://localhost:3000/top/song?type=7")这是官方的fetch方法，其中带一个形参,接收的就是你的接口地址！
并且，在后面可以接.then()，这说明fetch是一个异步函数，并且会返回一个new promise对象，（返回了new promise才能接.then），并且会把后端返回的数据通过resolve抛出这个数据！
then(data=>{
// data是整个响应体 data可以调用json()方法 得到一个promise对象
return data.json();
})这是第一个.then，在这里我们拿到的data是整个响应体，我们可以返回data.json()之后再接.then，注意这里.json是这个请求体能调用的方法,能得到一个promise对象
.then((res)=>{
console.log(res);
})这里是第二个.then这里我们就能拿到请求体抛出的数据了！接收一个形参res这个就是我们拿到的数据!
我们来看看打印的结果！
最后
各位老铁都看到这里了！coding不易，给我点上一个小小的赞吧！
后续我还会大家持续输出vue3，Element-ui以及相关后端的文章！让我们一起跨步向前！
那么，我们今天就到这啦！
作者：Aidan路修远i
链接：https://juejin.cn/post/7325724706140225577
相关推荐
- 在Word中分栏设置页码一页两个页码的技巧!
-
施老师：在正常情况下，Word文档中一页只会出现一个页码。但在某种情况下，比如说：用了分栏后，我们希望一页中出现两个页码，那应该如何实现呢？今天，就由宁双学好网施老师来为大家讲一下，利用域来实现一页两...
- 如何在关键时刻向上自荐（如何在关键时刻做出正确选择）
-
抓住机会，挺身而出有种时刻叫“关键时刻”，关键时刻，作为一个认为自己有能力的、训练有素的人，应该考虑挺身而出，甚至应该不考虑就挺身而出。...
- WPS Word:跨页的文档表格，快速调整为一页。#Excel
-
如何快速将跨页的文档表格调整为一页？需要根据两种情况分别处理。如果表格所有行的行高相同，调整为一页的方法有两种。第一种方法是将光标移动到表格内，然后将鼠标移动到表格右下角的方框处，按住鼠标左键向上拖动...
- word文档插入下一页分节符（word下一页分页符）
-
在word文档中，对文档页面进行分页是特别常见的操作，其中的下一页分节符也是用得比较多的，但是一些人不太清楚在哪里设置，也不知道它具体能实现的功能是什么。接下来看看如何在word文档中插入下一页分节符...
- word文档如何设置某一页纸张的方向
-
word文档页面方向有横向和纵向，纵向是默认的纸张方向，有时我们需要将页面设置为横向，或只设置其中某一页方向，应该怎么操作呢？一起来看看下面的详细介绍第一步：...
- word怎么单独设置一页为横向（word2019怎样设置单独一页为横向）
-
word里面其中一页可以改为横向的吗？经过实际操作发现是完全可以的。...
- Word如何设置分栏，如何一页内容同时显示一栏和两栏
-
我们使用Word文档，有时需要用到两栏的排版，甚至一页内容同时包含一栏和两栏的排版，这种格式怎么设置呢？具体步骤如下：首先是两栏排版的设置，直接点击Word文件上方工具栏【布局】，选择【分栏】下面的【...
- Word怎么分页?这三个方法可以帮到你
-
我们不仅可以利用Word编辑文档，还可以编辑文集呢。但是有时候会出现两个部分的文章长短不一，我们需要对文档进行分页处理。这样可以方便我们对文档进行其他操作。那么Word怎么分页呢？大家可以采用下面这...
- Word内容稍超一页，如何优化至单页打印?
-
如何将两页纸的内容，缩到一页打印呢？有时候一页纸多一点内容，我们完全可以缩一下，放到一页来打印。...
- [word] word 表格如何跨行显示表头、标题
-
word表格如何跨行显示表头、标题在Word中的表格如果过长的话，会跨行显示在另一页，如果想要在其它页面上也显示表头，更直观的查看数据。难道要一个个复制表头吗？当然不是，教你简单的方法操作设置Wo...
- Word表格跨页如何续上表?（word如何让表格跨页不断掉）
-
长文档的表格跨页时，你会发现页末空白太多了，这时要怎么调整？选中整张表格，右击【表格属性】，点击【行】选项，之后勾选【允许跨页断行】，点击确定即可解决空白问题。...
- Word怎么连续自动生成页码，操作步骤来了!
-
Word怎么连续自动生成页码，操作步骤来了!...
- word文档怎么把两页合并成一页内容?教你4种方法
-
word怎么把两页合并成一页？word怎么把两页合并成一页？用四种方法演示一下。·方法一：把这一个文档合并成一页，按ctrl加a全选文档，然后右键点击段落，弹出的界面行距改成固定值，磅值可以改小一点，...
- 如何将Word中的一页的纸张方向设置为横向?这里提供详细步骤
-
默认情况下，MicrosoftWord将页面定向为纵向视图。虽然这在大多数情况下都很好，但你可能拥有在横向视图中看起来更好的页面或页面组。以下是实现这一目标的两种方法。无论使用哪种方法，请注意，如果...
- Word横竖混排你会玩吗?（word横排竖排混合）
-
我们在用Word排版的时候，一般都是竖版格式，但偶尔会需要到一些特殊的版式要求，比如文档中插入的一个表格，横向的内容比较多，这时就需要用到横版，否则表格显示不全。这种横竖版混排的要求，在Word20...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)