关于javascript:ajax-初步介绍

61次阅读

共计 8388 个字符，预计需要花费 21 分钟才能阅读完成。

进入 ajax 了，想要进入 vue 还有一个前提就是要把 ajax 给相熟一下，看一看客户端与服务器之间是怎么一个通信的过程，第一天次要是先理解了一下 ajax 的一些介绍，ajax 嘛，在进入之前，必定是要理解一下客户端与服务器之间的一个通信过程，其实不论是申请还是发送都遵循的一个准则，即申请、解决、响应，如何来申请服务器上的数据，须要用到 XMLHttpRequest 对象，也就是申明一个对象实例 var xhrObj = new XMLHttpRequest（）。

咱们通常所说的资源申请形式次要是分为两种，一种是 get 申请向服务器所求资源，一种是 post 向服务器发送资源。

持续看到什么事 ajax？能够简略了解为用到了 xhr，那他就是 ajax，那么为什么要学习 ajax？因为它能够轻松实现网页与服务器之间的数据交互，次要利用在如检测用户名是否被占用、加载搜寻提醒列表、依据页码刷新表格数据等。

咱们这部分先以 jQuery 为例对 ajax 做一些操作，因为浏览器提供的 xhr 用法比较复杂，就先用 jq 来实现，jq 外面次要是就是分为三种 $.get() $.post() $.ajax() 这三种，其中前两种的用法是（url，【data】，【callback】），url 使咱们要申请的资源地址，data 是咱们的参数，callback 是申请胜利后的回调函数，他们两个能够带参申请也能够不带参申请，而后 $.ajax() 它是既能够实现 get 也能够实现 post，

（{type :‘get or post’，url：‘’，data：{}，success：}）type 就是申请形式，url 申请地址，data 参数，success 是执行胜利的回调

上面就是一些 jq 别离利用 ajax 的 get 以及 post 申请的用法

1.

不带参数的申请 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<button>
    发动不带参数的申请
</button>
<body>
    <script src="./lib/jquery.js"></script>
    <script>
    $('button').on('click', () =>  $.get('http://www.liulongbin.top:3006/api/getbooks', res => console.log(res)))        
    </script>
</body>
</html>

2.

带参数的申请 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<button>
    发动带参数的申请
</button>
<body>
    <script src="./lib/jquery.js"></script>
    <script>
        $('button').click(() => {$.get('http://www.liulongbin.top:3006/api/getbooks',{id : 2},res => console.log(res))
        })
    </script>
</body>
</html>

3.

post 申请 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button> 提交 </button>
    <script src="./lib/jquery.js"></script>
    <script>
        $('button').on('click',function() {$.post('http://www.liulongbin.top:3006/api/addbook', {bookname:'水浒传',author:'施耐庵',publisher:'上海图书出版社'},res => console.log(res))
        })
    </script>
</body>
</html>

4.

ajax 的 get post 申请 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>get</button>
    <script src="./lib/jquery.js"></script>
    <script>
        $('button').on('click', function() {
            $.ajax({
                type : 'get',
                url : 'http://www.liulongbin.top:3006/api/getbooks',
                data : {bookname : '红楼梦'},
                success : res => console.log(res)
            })
        })

    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>post</button>
    <script src="./lib/jquery.js"></script>
    <script>
        $('button').on('click', function() {
            $.ajax({
                type : 'post',
                url : 'http://www.liulongbin.top:3006/api/addbook',
                data : {
                    bookname : '红楼梦',
                    author : '吴承恩',
                    publisher: '出清图书出版社'
                },
                success : res => console.log(res)
            })
        })

    </script>
</body>
</html>

5.

而后是明天的综合案例，首先是一个图书治理的页面利用 ajax 也就是前面会说到的接口达到增加删除图书的作用，而后构造应用 bootstrap 实现 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <script src="./lib/jquery.js"></script>
</head>
<body style="padding: 15px;">
    <!-- 增加图书的面板 -->
    <!-- 1.primary 示意蓝色的意思 先设置一个面板蓝色 -->
    <div class="panel panel-primary">
          <div class="panel-heading">
                <h3 class="panel-title"> 增加新图书 </h3>
          </div>
          <!-- 2.1 这里有个留神点 加了一个类名 form-inline 为 form 加可使外面的子元素为 display inline block -->
          <div class="panel-body form-inline">
              <!-- 2. 在面板 body 外面增加 input 表单 bs3-input-text 这个 而后批改值 -->
              <div class="input-group">
                  <div class="input-group-addon"> 书名 </div>
                  <input type="text" class="form-control" id="iptBookname" placeholder="请输出书名">
              </div>
              <div class="input-group">
                <div class="input-group-addon"> 作者 </div>
                <input type="text" class="form-control" id="iptAuthor" placeholder="请输出作者">
            </div>
            <div class="input-group">
                <div class="input-group-addon"> 出版社 </div>
                <input type="text" class="form-control" id="iptshiper" placeholder="请输出出版社">
            </div>
            <button id="btnAdd" class="btn btn-primary"> 增加 </button>
          </div>
    </div>
    <!-- 图书的表格 -->
    
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th> 书名 </th>
                <th> 作者 </th>
                <th> 出版社 </th>
                <th> 操作 </th>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
    </table>
    <script>
        // 1. 获取图书列表
        function getData() {
            $.get('http://www.liulongbin.top:3006/api/getbooks',res => {if (res.status == 500) {return alert('获取数据失败')
            }else {
                // 1.1 这里有个很厉害很厉害的点我搞了半天终于发现问题所在了，之前始终找不到 数据，就是这里循环的时候，他不是像原生 js 一样
                // 能够只写一个参数值，jq 的如同是要把索引和参数都写上才行！！！let arr = []
                $.each(res.data, (i, item) => {
                    arr.push(`<tr>
                        <td>${item.id}</td>
                        <td>${item.bookname}</td>
                        <td>${item.author}</td>
                        <td>${item.publisher}</td>
                        <td><a href="javascript:;" data-id="${item.id}" > 删除 </a></td>
                        </tr>`)
                }) 
                $('tbody').empty().append(arr.join(''))
            }
        })
        }
        getData()
        // 1.2 为每个删除按钮增加删除性能 首先还是要明确一个点，这里的 a 标签是后加的，所以才采纳事件委托才行
        $('tbody').on('click', 'a', function () {var id = $(this).attr('data-id')
        $.get('http://www.liulongbin.top:3006/api/delbook', { id: id}, function (res) {if (res.status !== 200) return alert('删除图书失败！')
          getData()})
      })
    //   1.3 增加图书性能
    $('#btnAdd').on('click', function() {let bookname = $('#iptBookname').val()
        let author = $('#iptAuthor').val()
        let shiner = $('#iptshiper').val()
        if (!bookname || !author || !shiner) {
            alert('请输出残缺内容')
        }else {
            $.post('http://www.liulongbin.top:3006/api/addbook', {
                bookname : bookname,
                author : author,
                publisher : shiner
            }, function(res) {if(res.status == 500) return alert('请输出残缺内容')
                getData()})
        }
    })
    </script>
</body>
</html>

6.

第二个案例是一个聊天机器人的案例，这个案例还多乏味的，实现的性能有输出内容可呈现到聊天的内容区域，对面主动回复机器人也能够对应的答复你，而后就是当聊天内容超过一页之后再发消息，会主动回弹到聊天框的底部，这个要用到一个 scrol.js 调用一下外面的 resetui（）即可，总体步骤分为先将用户输出内容渲染到聊天框，而后获取到用户输出内容并且发送到服务器获取机器人的回复内容并渲染到聊天界面，再通过一个接口将回复的音讯转为语音播放，最初通过输入框的键盘事件检测是否按下回车来点击发送按钮一次 

 <!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" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
    <title> 聊天机器人 </title>
  </head>

  <body>
    <div class="wrap">
      <!-- 头部 Header 区域 -->
      <div class="header">
        <h3> 小思同学 </h3>
        <img src="img/person01.png" alt="icon" />
      </div>
      <!-- 两头 聊天内容区域 -->
      <div class="main">
        <ul class="talk_list" style="top: 0px;">
          <li class="left_word">
            <img src="img/person01.png" /> <span> 你好 </span>
          </li>
        </ul>
        <div class="drag_bar" style="display: none;">
          <div
            class="drager ui-draggable ui-draggable-handle"
            style="display: none; height: 412.628px;"
          ></div>
        </div>
      </div>
      <audio style="display: none;" autoplay id="voice"></audio>
      <!-- 底部 音讯编辑区域 -->
      <div class="footer">
        <img src="img/person02.png" alt="icon" />
        <input type="text" placeholder="说的什么吧..." class="input_txt" />
        <input type="button" value="发 送" class="input_sub" />
      </div>
    </div>
    <script type="text/javascript" src="js/scroll.js"></script>
    <script src="./js/chat.js">
     
    </script>
  </body>
</html>

实现原理 

$(function(){
    // 初始化右侧滚动条
    // 这个办法定义在 scroll.js 中
    // 该办法的作用是一发音讯就定位到聊天框的最底部
    resetui()
    // 1. 将用户输出内容渲染到聊天窗口
    var text = ''$('.input_sub').on('click',function() {var text = $('.input_txt').val()  
      if(text == '') {return $('.input_txt').val('')
      } else {$('.talk_list').append('<li class="right_word"><img src="img/person02.png"/> <span>'+text+'</span></li>')
        resetui()
        $('.input_txt').val('')
        getMsg(text)
      }
    })
    // 2. 发情申请获取聊天音讯
    function getMsg(text) {
        $.ajax({
            type : 'get',
            url : 'http://www.liulongbin.top:3006/api/robot',
            data : {spoken : text},
            success : function(res) {if (res.message == 'success') {
                    let msg = res.data.info.text
                    $('.talk_list').append('<li class="left_word"><img src="img/person01.png"/> <span>'+msg+'</span></li>')
                    resetui()
                    getAudio(msg)
                }
            }
        })
    }
    // 3. 将回复信息转为语音播放
    function getAudio(msg) {
        $.ajax({
            type : 'get',
            url : 'http://www.liulongbin.top:3006/api/synthesize',
            data : {text : msg},
            success : function(res) {if (res.status == 200) {$('#voice').attr('src', res.voiceUrl)
                }
            }
        })
    }
    // 4. 应用回车发送音讯
    $('.input_txt').on('keyup', function(e) {console.log(e.keyCode);
        if (e.keyCode == 13) {$('.input_sub').trigger('click')
        }
    })
  })    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<button>
    发动不带参数的申请
</button>
<body>
    <script src="./lib/jquery.js"></script>
    <script>
    $('button').on('click', () =>  $.get('http://www.liulongbin.top:3006/api/getbooks', res => console.log(res)))        
    </script>
</body>
</html>

前端爱好者，望大佬给个内推机会！！！

正文完
javascript
发表至： javascript
2022-10-16
 0
关于javascript:JS深挖异步方案发展史-回调函数Promise和asyncawait
关于javascript:栈内存-堆内存-数据类型间的存储区别
关于javascript:Day-39100-React-Hook之useEffect基本用法
初识vue ssr(nuxt.js)