Ajax学习

咱们应该都知道mysql数据库,服务器是一台机器,他的的作用便是用来存储各种数据资源,而数据库存在的意义便是帮助服务器更好得打理数据!

比方,咱们的页面上有一个按钮,用户点了一下这个按钮,页面就能够经过万维网来与方针地址进行数据交互!咱们的页面就会发送一个网络恳求曩昔,方针地址的服务器就会接受到这个恳求,服务器现已封装好了一些后端代码,这个后端代码时刻运转在服务器上,后端代码就会做一些处理!去数据库中帮咱们把数据取出来,再拿到这个数据,再经过网络恳求把这个数据回来给咱们的页面,于是咱们的页面就能够拿到这一段数据,把数据展现在页面上,当然,这其间有许多细节咱们没有聊到,大概是这样一个进程!那么,这个恳求该怎么宣布去呢?

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

这便是咱们今日要学的Ajax

一、Ajax基础介绍

Ajax(Async JavaScript And XML)即异步 JavaScript 和 XML,是一种在无需从头加载整个网页的情况下,能够更新部分网页的技能。经过在后台与服务器进行少数数据交换,Ajax 能够使网页完结异步更新。这意味着能够在不从头加载整个网页的情况下,更新网页的某部分内容。

Ajax 主要包含以下几个部分:

  1. JavaScript:用于完结客户端的逻辑和与服务器的交互。
  2. XMLHttpRequest:这是 JavaScript 供给的一个目标,用于向服务器发送恳求和接纳呼应。
  3. 服务器端脚本:一般运用服务器端言语(如 PHP、Python、Ruby 等)来处理恳求并生成呼应。
  4. 数据格式: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知识点 Jquery接口封装 fetch原生js恳求

接下来咱们就运用一下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恳求的办法有以下几种:

  1. GET:向服务器恳求获取数据,一般用于恳求静态资源。
  2. POST:向服务器提交数据,一般用于提交表单数据或上传文件。
  3. PUT:向服务器更新数据,一般用于更新资源的全部内容。
  4. DELETE:向服务器删去数据,一般用于删去资源。
  5. HEAD:向服务器恳求获取资源的头部信息,一般用于查看资源是否存在或查看资源的更新时间等。
  6. 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的状况

  1. 0 — xhr刚刚创建,恳求还没发
  2. 1 — open预备完结
  3. 2 — 恳求现已发送,客户端接纳到了呼应头
  4. 3 — 接纳到服务器回来的呼应体(数据包),正在解析
  5. 4 — 解析完结

status表明的是http的状况码,下面是一些常见的状况码:

  1. 200 OK:恳求成功,服务器成功回来了恳求的资源。
  2. 301 Moved Permanently:永久重定向,恳求的资源已永久移动到新的位置。
  3. 302 Found:暂时重定向,恳求的资源暂时移动到新的位置。
  4. 400 Bad Request:客户端恳求有过错,服务器无法理解恳求。
  5. 401 Unauthorized:恳求未经授权,客户端需求进行身份验证。
  6. 403 Forbidden:服务器拒绝了恳求,客户端没有权限访问该资源。
  7. 404 Not Found:服务器找不到恳求的资源。
  8. 500 Internal Server Error:服务器内部发生过错,无法完结恳求。
  9. 502 Bad Gateway:代理服务器从上游服务器收到了无效的呼应。
  10. 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);
    }
})

咱们能够直接运用$.ajaxajax进行封装,在$.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)

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

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

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

那么,咱们今日就到这啦!

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