ajax半遮面-1

阿福冲冲冲

已于 2022-04-22 22:49:39 修改

阅读量1.3k

点赞数

分类专栏： ajax 文章标签： javascript ajax

于 2022-04-22 22:41:09 首次发布

本文链接：https://blog.csdn.net/gongsixing1998/article/details/124355811

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ajax是什么？

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。 [3] 在这里插入图片描述
以上是我百度到的页首内容，
直接说吧，ajax这玩意儿能干什么？

举个例子

在这里插入图片描述
这个页面刷过吧？你往下翻看，到一个点它会延迟一下下，马上加载出内容呈现给你，并且此时你所在的页面并没有跳转刷新，这就是ajax的用法之一，也就是说，AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

ajax工作原理（直接上代码）

/* 
        1. ajax技术 :  可以在网页不跳转的情况下 向服务器发送请求
            * 应用 ： 局部刷新
        2. ajax语法 : 使用内置对象XMLHttpRequest发送ajax请求
            (1)创建xhr对象
                * let xhr = new XMLHttpRequest()
            (2)设置请求方法和地址
                * xhr.open('method','url')
            (3)发送请求
                * xhr.send()
            (4)注册响应事件 : 不是立即执行，而是等服务器响应数据才会执行
                * xhr.onload = function(){}
        */
        

        //(1)创建XMLHttpRequest对象(小黄人)
        let xhr = new XMLHttpRequest()

        //(2)设置请求方法和请求地址
        xhr.open('get','https://autumnfish.cn/api/joke')

        //(3)发送请求
        xhr.send()

        //(4)注册响应回调事件
        /*这个事件不是立即执行，而是过一会儿执行。 取决于很多因素 : 带宽、天气、服务器、运营商 */
        xhr.onload = function(){
            console.log( xhr.responseText )
        }

看一下注册用户的接口文档

注册用户

请求地址：https://autumnfish.cn/api/user/register
请求方法：post
请求参数：username

参数名	参数说明	备注
username	用户名	不能为空,通过 send 方法传递，格式为 key=value

xhr.send('username=xxx')

响应内容：注册成功或失败

post实现用户注册

          //ajax发送post请求.
    //固定步骤

    //post请求参数写在send方法中.
    //格式: key1=value1&key2=value2

    //a.创建请求对象
    let xhr = new XMLHttpRequest();
    //b.调用open方法,设置请求方式和请求地址
    xhr.open('post', 'https://autumnfish.cn/api/user/register');
    //c.设置请求头
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //d.设置请求成功后的回调函数
    xhr.onload = function () {
      console.log(xhr.response);
    }
    //e.调用send方法.
    xhr.send('username=小明');

随机获取笑话的接口

请求地址：https://autumnfish.cn/api/joke/list
请求方法：get
请求参数：num
- 示例：https://autumnfish.cn/api/joke/list?num=10

参数名	参数说明	备注
num	笑话条数	类型为数字,不要给错了

响应内容：JSON

get请求提交参数

 /*
     ajax发送get请求,如何传递参数.
     拼接在url地址上
     格式: url地址?key=value
           url地址?key1=value1&key2=value2
    */

    //1.创建请求对象
    let xhr = new XMLHttpRequest();
    //2.调用open方法,设置请求方式和请求地址
    xhr.open('get','https://autumnfish.cn/api/joke/list?num=10');
    //3.设置请求成功后执行的回调函数
    xhr.onload = function(){
      //如何拿到响应回来的数据呢?
      let obj = JSON.parse(xhr.response)
      console.log(obj);
    }
    //4.调用send方法
    xhr.send();

以上是基本语法，我们更多的还是使用框架——axios
基本语法：

axios语法 :
        axios
         .get('url')
         .then( res=>{ //请求成功 } )
         .catch( err=>{ //请求错误} )
         .then( ()=>{ //请求完成 } )

基本使用

 <!-- 导入axios -->
  <script src="./axios.js"></script>

  <script>
      axios
        .get('https://autumnfish.cn/api/joke/list?num=10')
        .then(res => {
          // res : 是axios库对响应数据做了一层包装
          console.log(res)
          // res.data : 才是服务器响应的数据, axios库自动把json转js
          console.log(res.data)
        })
        .catch(err => {
          //网络错误 :  (1)url路径写错了   (2)网络错误
          console.log(err + '111')
        }).then(() => {
          //本次请求完成，无论成功失败
          console.log('本次请求完成')
        })
  </script>

发送get请求

<!-- 导入axios -->
  <script src="./axios.js"></script>

  <script>
      axios.get('https://autumnfish.cn/api/joke/list', {
          params: {
            num: 10
          }
        })
        .then(res => {
          console.log(res)
        })
  </script>

发送post请求

<!-- 导入axios -->
  <script src="./axios.js"></script>

  <script>
      axios.post('http://www.liulongbin.top:3009/api/login', {
        username: 'sfs',
        password: 'adada'
      }).then(res => {
        console.log(res)
      })
  </script>

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>
      /* 
      axios语法 :
        axios
         .get('url')
         .then( res=>{ //请求成功 } )
         .catch( err=>{ //请求错误} )
         .then( ()=>{ //请求完成 } )

      axios常用语法 :
        axios({
          method:'请求方法',
          url:'请求路径',
          params : { get参数 },
          data : { post参数 }
        }).then( res=>{} )
      */
      
      //基本使用
      document.querySelector(".btn1").onclick = function() {
        axios({
          method:'get',
          url:'https://autumnfish.cn/api/joke/list?num=10'
        }).then(res=>{
          console.log( res )
        })
      }
      //点我发送get请求
      document.querySelector(".btn2").onclick = function() {
        axios({
          method:'get',
          url:'https://autumnfish.cn/api/joke/list',
          params:{ num:10 }
        }).then(res=>{
          console.log(res)
        })
      }

      //点我发送post请求
      document.querySelector(".btn3").onclick = function() {
        axios({
          method:'post',
          url:'http://www.liulongbin.top:3009/api/login',
          data:{ username:'admin',password:'123456' }
        }).then(res=>{
          console.log(res)
        })
      }
    </script>
  </body>
</html>

看到上面的axios.get().then().catch();的用法，来了解一下js链式语法原理

<!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>
        /*
            了解一下链式编程思想.
            axios.get().then().catch();
            axios.post().then().catch();
            axios().then().catch();
        */
        // 定义一个对象obj
        let obj = {
            name: '波波',
            age: 18,
            gender: '男'
        }

        //给对象添加方法.
        obj.setName = function (str) {
            this.name = str;
            /* ====================================================
            重点在于这个 return this;它可以让obj.setName('老波')的返回值为this，
            而此时的this又是obj，所以obj.setName('老波').setAge(48)相当于是obj.setAge(48) 
            ======================================================================*/
            return this;
        }
        obj.setAge = function (num) {
            this.age = num;
            return this;
        }
        obj.setGender = function (sex) {
            this.gender = sex;
            return this;
        }

        //调用obj的方法
        // obj.setName('小波');
        // obj.setAge(16);
        // obj.setGender('女');

        //我希望这样做.
        obj.setName('老波').setAge(48).setGender('未知')

        console.log(obj);
    </script>
</body>

</html>

阿福冲冲冲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax半遮面-1

ajax是什么？Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户
复制链接

扫一扫