关于javascript:ajax-初步介绍

进入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申请的用法

不带参数的申请

<!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>

带参数的申请

<!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>

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>

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>

而后是明天的综合案例，首先是一个图书治理的页面利用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>

第二个案例是一个聊天机器人的案例，这个案例还多乏味的，实现的性能有输出内容可呈现到聊天的内容区域，对面主动回复机器人也能够对应的答复你，而后就是当聊天内容超过一页之后再发消息，会主动回弹到聊天框的底部，这个要用到一个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:ajax-初步介绍

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于javascript:ajax-初步介绍

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复