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