欢迎大家来到IT世界,在知识的湖畔探索吧!
Ajax学习
大家应该都知道mysql数据库，服务器是一台机器，他的的作用就是用来存储各种数据资源，而数据库存在的意义就是帮助服务器更好得打理数据！
比如，我们的页面上有一个按钮，用户点了一下这个按钮，页面就可以通过万维网来与目标地址进行数据交互！我们的页面就会发送一个网络请求过去，目标地址的服务器就会接受到这个请求，服务器已经封装好了一些后端代码，这个后端代码时刻运行在服务器上，后端代码就会做一些处理！去数据库中帮我们把数据取出来，再拿到这个数据，再通过网络请求把这个数据返回给我们的页面，于是我们的页面就可以拿到这一段数据，把数据展示在页面上，当然，这其中有很多细节我们没有聊到，大概是这样一个过程！那么，这个请求该怎么发出去呢？
![[前端请求]Ajax知识点 Jquery接口封装 fetch原生js请求](https://itzsg.com/wp-content/themes/justnews/themer/assets/images/lazy.png "[前端请求]Ajax知识点 Jquery接口封装 fetch原生js请求插图1")
这就是我们今天要学的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>欢迎大家来到IT世界,在知识的湖畔探索吧!
这就是我们一个案例我们来为大家逐条分析一下！
我们要实现的效果是：通过这个新歌速递的按钮，点一下，就可以拿到后端的数据并且展示在页面上。
这里我们为这个按钮添加一个点击事件,通过传统的js语法
欢迎大家来到IT世界,在知识的湖畔探索吧!const btn = document.getElementById("btn"); btn.addEventListener("click",()=>{}
接下来就开始我们的AJax操作了
let xhr = new XMLHttpRequest();这是js封装好的用于发送http请求的类,用这个类发送http请求，就相当于用浏览器发http请求，xhr就是我们拿到一个实例对象！
欢迎大家来到IT世界,在知识的湖畔探索吧!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以及相关后端的文章！让我们一起跨步向前！
那么，我们今天就到这啦！
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/89277.html
