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请求的用法

不带参数的请求




    
    
    
    Document

带参数的请求




    
    
    
    Document

post请求




    
    
    
    Document

ajax的get post请求




    
    
    
    Document


    
    
    





    
    
    
    Document

然后是今天的综合案例，首先是一个图书管理的页面利用ajax也就是后面会说到的接口达到添加删除图书的作用，然后结构使用bootstrap实现

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

实现原理

$(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(' '+text+'')
        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(' '+msg+'')
                    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')
        }
    })
  })




    
    
    
    Document

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

ajax - 初步介绍

添加新图书

小思同学

你可能感兴趣的:(ajax - 初步介绍)