网站首页 > 技术文章正文

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

hmc789 2024-11-14 16:36:01 技术文章 2 ℃

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

上一篇： Python Web全栈之旅09--Web前端●CSS浮动
下一篇：「前端」线上紧急问题排查工具「前端」线上紧急问题排查工具免费版

网站首页 > 技术文章 正文