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拿到这一段后端代码之后,咱们把它运转在自己的电脑上!这样咱们就有了一个后端代码!
这儿咱们为咱们引荐一个插件: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以及相关后端的文章!让咱们一同跨步向前!
那么,咱们今日就到这啦!
个人Github:一个修远君的库 (github.com)