Ajax初识和Axios的基本使用

zxp鹏
229 阅读5分钟

Ajax是什么？

  • Ajax就是让浏览器跟服务器交互的一套API。 它的作用就是可以让浏览器和服务器进行交互。

    • 大白话： ajax 是一种 用于向服务器请求数据的 技术

  • MDN官网传送门:developer.mozilla.org/zh-CN/docs/…

学习Ajax的目标是什么

  • 学会使用ajax 根据 接口文档 和 服务器 交互
    • 目前，我们网页所有的数据都是写死的。实际开发中，网页的数据需要从服务器获取。而ajax技术就是来实现这一功能的。

服务器介绍

什么是服务器?

  • 1.服务器 就是提供某种服务的 电脑(机器)

  • 2.如何让电脑提供某种服务呢？安装软件

    • 想让你的电脑提供 听歌 服务，需要装什么软件呢？

      • 网易云、qq音乐

    • 想让你的电脑提供 视频 服务，需要装什么软件呢？

      • 爱奇艺，优酷

    • 想让你的电脑提供 聊天 服务，需要装什么软件呢？

      • qq，微信

  • 3.综上所述，服务器就是某些安装了特殊软件，可以提供某些服务的电脑。常见的服务器有以下几种

    • 数据库服务
    • 文件服务
    • 多媒体服务(音视频)
    • 邮件服务
    • Web服务

  • 4.要想让你的电脑成为一台Web服务器，我们只需要安装对应的软件即可。

    • 由于这些软件涉及的专业知识属于后台开发领域，我们的重点是了解什么是服务器，并且我们是前端开发，所以我们主要学习如何使用前端中的软件来和服务器进行交互。那么我们前端主要使用什么软件来和服务器进行交互呢？（Chrome）

服务器交互流程

  • 为什么我们只需要在浏览器输入一个网址点击回车之后就可以看到网页呢？

  • 为什么我们修改了网页之后，需要在浏览器刷新以下才能看到最新的内容呢？

  • 为什么在浏览器输入 www.baidu.com就可以看到百度网页呢？

  • 为什么在浏览器输入 www.jd.com就可以看到京东网页呢？

  • 其实，浏览器和服务器之间的每一次交互，都是由三个部分组成

    • 请求(浏览器发起请求，服务器接收)
    • 处理（服务器处理这个请求）
    • 响应（服务器响应数据给浏览器）

浏览器访问服务器的几种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        
    </style>
</head>
​
<a href="http://192.168.137.1">点我跳转</a>
<button id="btn">点我也可以跳转哟</button>
​
<body>
    <script>
        /*几种访问服务器的方式
        1.直接在浏览器地址栏输入网址
        2.使用a标签的href属性
        3.使用window.location.href 
         */
​
        document.getElementById('btn').onclick = function(){
            window.location.href = 'http://192.168.137.1';
        };
    </script>
</body>
</html>

ajax工作流程

什么是ajax？

  • ajax：在不刷新页面的情况下向服务器请求数据==

为什么需要ajax？

  • 1.以前我的写的页面全部都是固定的假数据，其实网页的数据都是从服务器获取的，一旦服务器数据变化，网页上的内容也会发生变化
  • 2.虽然可以通过在浏览器地址栏直接输入网址（url）的方式向服务器获取数据，但是我们的网页会刷新
  • 3.学会ajax：就可以做到在不刷新网页的情况下向服务器请求数据，让网站数据内容动态变化。

ajax的工作流程

  • 1.创建XMLHttpRequest对象

    • let xhr = new XMLHttpRequest();

  • 2.设置请求

    • xhr.open('get', 'https://autumnfish.cn/api/joke');

  • 3.发送请求

    • xhr.send();

  • 4.注册回调函数

      • 这个函数不是立即执行的，而是等服务器把数据响应返回才会执行（PS：什么时候执行取决于你的网速快慢）
      • xhr.onload = function () {console.log(xhr.responseText);}
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
​
    <script src="./jquery-1.12.4.min.js"></script>
</head>
​
<body>
    <script>
      
        /* 1.ajax： 在页面不刷新的情况下向服务器请求数据
           2.XMLHttpRequest ： http请求对象，负责实现ajax技术
                （1）创建XMLHttpRequest对象
                     
                （2）设置请求
                        
                （3）发送请求
                       
                （4）注册回调函数
                        
        
         */
​
        //1.创建对象XMLHTTPRequest
        let xhr = new XMLHttpRequest();
        //2.设置请求
        xhr.open('get', 'https://autumnfish.cn/api/joke');
        //3.发送请求
        xhr.send();
        //4.注册回调函数
        /* 这个函数不是立即执行的，而是等服务器把数据响应返回才会执行（PS：什么时候执行取决于你的网速快慢） */
        xhr.onload = function () {
            console.log(xhr.responseText);
            document.body.innerText = xhr.responseText;
        };
    </script>
</body>
​
</html>

解释

  • Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
  • 说人话：ajax就是一套可以让网站跟服务器交互的一种技术，能在我们需要时，不用再刷新网页就能去服务器要一些数据回来
  • 例：www.smzdm.com 里只要网站往下滚动，就能不用刷新页面跟服务器要数据

Ajax发送get请求与post请求

get请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
​
  <body>
    <script>
      /*
        1.get传参格式： url?key=value
        2.示例： https://autumnfish.cn/api/joke/list?num=10
      */
​
      // 1.实例化ajax对象
      let xhr = new XMLHttpRequest()
      // 2.设置请求方法和地址
      // get请求的数据直接添加在url的后面 格式是 url?key=value
      xhr.open("get", "https://autumnfish.cn/api/joke/list?num=10")
      // 3.发送请求
      xhr.send()
      // 4.注册回调函数
      xhr.onload = function() {
        console.log(xhr.responseText)
      }
    </script>
  </body>
</html>
​

post请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
​
  <body>
    <script>
      /* 
        请求方法get和post区别： 传参方式不同
            get请求： 直接在url后面拼接参数
                * 参数在url中，安全性不高
            post请求：
                1.需要设置请求头（固定语法）：xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
                    * 注意：这是固定格式，错一个字母都不行，强烈建议复制粘贴
                2.使用xhr的send方法发送参数： xhr.send('参数名=参数值');
                    * 注意：不要加前面的? 
      */
     
      //(1).实例化ajax对象
      let xhr = new XMLHttpRequest()
      //(2).设置请求方法和地址
      xhr.open("post", "https://autumnfish.cn/api/user/register")
      //(3).设置请求头（post请求才需要设置）
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
      //(4).发送请求 ： 参数格式  'key=value'
      xhr.send("username=admin")
      //(5).注册回调函数
      xhr.onload = function() {
        console.log(xhr.responseText)
      }
    </script>
  </body>
</html>
​

什么是接口文档

  • 1.接口：Web服务器提供的，让ajax请求的网络地址称之为接口，简称API

  • 2.接口文档 ：为了方便开发人员使用，我们的后台小伙伴会提供一种专门的文档，称之为接口文档

    • 接口文档，又称为API文档，可以理解为接口的使用说明书

      • 接口文档的本质 ：其实就是后台开发（如php）他们写的函数注释。后台在处理请求的时候一般都会写一些函数

  • 3.一个标准的接口文档至少要包含以下三种信息（只能多，不能少）

    • a.请求的地址 （url）
    • b.请求的方法 （get或者post）
    • c.请求的参数

  • 4.以下是我们这个阶段可能会用到的接口文档，实际开发中为了避免你的url地址，方法,参数写错，一般强烈建议直接复制粘贴

axios框架使用

  • axios官网 : www.axios-js.com/

    1. axios是什么 ： 一个js框架，用于发送ajax请求（底层使用XMLHttpRequest）
    1. 为什么要学习axios : 我们使用axios发送ajax请求,实际开发也是使用axios发送ajax请求

axios基本使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
​
  <body>
    <button class="btn1">基本使用</button>
    <button class="btn2">点我发送get请求</button>
    <button class="btn3">点我发送post请求</button>
​
    <!-- 导入axios -->
    <script src="./axios.js"></script>
    <script>
      //基本使用
      document.querySelector(".btn1").onclick = function() {
        /* 
        get() : 写url和请求参数
        then(res=>{}) : 成功回调， 相当于以前jq的success
        catch(err=>{}):失败回调，   一般可以省略不写
        then(()=>{}):完成回调，  表示请求完成，无论成功失败都会执行。一般可以省略不写
        */
        axios
          .get("https://autumnfish.cn/api/joke/list?num=10")
          .then(res => {
            //请求成功
            console.log(res)
          })
          .catch(err => {
            //请求失败 : (1)网址写错了  (2)网络出问题了
            console.log(err)
          })
          .then(() => {
            //请求完成
            console.log("本次请求完成")
          })
      }
​
      //get请求
      document.querySelector(".btn2").onclick = function() {
        //get方法第一个参数是url
        //get方法第二个参数是对象类型  { params:{get参数对象}  }
        axios
          .get("https://autumnfish.cn/api/joke/list", {
            params: {
              num: 10
            }
          })
          .then(res => {
            //请求成功
            console.log(res)
          })
      }
​
      //post请求
      document.querySelector(".btn3").onclick = function() {
        //post方法第一个参数是url
        //post方法第二个参数是对象类型  { post参数对象  }
        axios
          .post("http://www.liulongbin.top:3009/api/login", {
            username: "admin",
            password: "123456"
          })
          .then(res => {
            //请求成功
            console.log(res)
          })
          .catch(err => {
            //请求失败
            console.log(err)
          })
      }
    </script>
  </body>
</html>
​

axios推荐用法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
​
  <body>
    <button class="btn1">基本使用</button>
    <button class="btn2">点我发送get请求</button>
    <button class="btn3">点我发送post请求</button>
​
    <!-- 导入axios -->
    <script src="./axios.js"></script>
    <script>
      /*
        1.axios其他使用方式
        2.学习路线 ：
            (1)介绍的两种方式
                axios.get().then()
                axios.post().then()
            (2)介绍第三种使用方式
                axios({
                    url:'请求路径',
                    method:'请求方式',
                    data:{ post请求参数 },
                    params:{ get请求参数 }
                }).then(res=>{
                    //成功回调
                    //console.log(res)
                });
        */
​
      //基本使用
      document.querySelector('.btn1').onclick = function() {
        axios({
          url: "https://autumnfish.cn/api/joke/list?num=10",
          method: "get"
        }).then(res => {
          console.log(res)
        })
      }
​
      //get请求
      document.querySelector('.btn2').onclick = function() {
        axios({
          url: `https://autumnfish.cn/api/joke/list`,
          method: "get",
          params:{
              num:10
          }
        }).then(res => {
          console.log(res)
        })
      }
​
      //post请求
      document.querySelector('.btn3').onclick = function() {
        axios({
          url: "http://www.liulongbin.top:3009/api/login",
          method: "post",
          data: {
            username: "admin",
            password: "123456"
          }
        }).then(res => {
          console.log(res)
        })
      }
    </script>
  </body>
</html>
​
avatar
文章
阅读
粉丝