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

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以及相关后端的文章！让咱们一同跨步向前！

那么，咱们今日就到这啦！

个人Github：一个修远君的库 (github.com)

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

Ajax学习

一、Ajax基础介绍

二、Ajax完结

事例一：Ajax根本知识点-新歌速递

事例二、Jquery接口封装 -新歌速递

事例三、fetch()原生js自带的办法-新歌速递

最后

相关文章

【SkyWalking】Java服务从零接入全链路追踪解决方案

我的2022，我的首个N+1，我的新工作、新城市、新希望

从零开始写一个操作系统 —— 4.qemu

最强 LeetCode 会员（教育版）

作者信息