AJAX | 接口 + 案例图书管理 + 案例聊天机器人

目录

客户端与服务器

URL地址

客户端与服务器的通信过程

基于浏览器的开发者工具分析通信过程

网页中如何请求数据

资源的请求方式

Ajax

 Ajax的典型应用场景

jQuery中的Ajax

$.get()函数的语法

$.get()发起不带参数的请求

$.get()发起带参数的请求

 $.post()函数的语法

$.post()向服务器提交数据

 $.ajax()函数的语法

使用$.ajax()发起GET请求

 使用$.ajax()发起POST请求

 接口

 通过GET方式请求接口的过程

通过POST方式请求接口的过程

使用postcode测试GET接口

使用postcode测试POST接口

 接口文档

案例 - 图书管理

渲染UI结构

 案例用到的库和插件

渲染图书列表（核心代码）

 删除图书（核心代码）

添加图书（核心代码）

案例 – 聊天机器人

将用户输入的内容渲染到聊天窗口

发起请求获取聊天消息

将机器人的聊天内容转为语音

使用回车发送消息

---

客户端与服务器

服务器：负责存放和对外提供资源的电脑，叫做服务器

客户端：负责获取和消费资源的电脑，叫做客户端

URL地址

        URL（全称是UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。

浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。

常见的URL举例：

http://www.baidu.com http://www.taobao.com http://www.cnblogs.com/liulongbinblogs/p/11649393.html

URL地址一般由三部组成：

① 客户端与服务器之间的通信协议

② 存有该资源的服务器名称

③ 资源在服务器上具体的存放位置

客户端与服务器的通信过程

•  用户打开浏览器，输入想要访问的网站地址，向服务器发起资源请求
• 服务器接收客户端发来的请求，在内部处理这些请求（找到相应资源）
• 然后响应（发送）给客户端

网页中的每一个资源，都是通过 请求 – 处理 – 响应 的方式从服务器获取回来的。

基于浏览器的开发者工具分析通信过程

• 打开 Chrome 浏览器
• Ctrl+Shift+I 打开 Chrome 的开发者工具
• 切换到 Network 面板
• 选中 Doc 页签 刷新页面，分析客户端与服务器的通信过程

网页中如何请求数据

• 如果要在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest 对象。
• XMLHttpRequest（简称 xhr）是浏览器提供的 js 成员，通过它，可以请求服务器上的数据资源
• 最简单的用法 var xhrObj = new XMLHttpRequest()

资源的请求方式

客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求。

get 请求通常用于获取服务端资源（向服务器要资源）      

例如：根据 URL 地址，从服务器获取 HTML 文件、css 文件、js文件、图片文件、数据资源等

post 请求通常用于向服务器提交数据（往服务器发送资源）      

例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作

Ajax

• Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。
• 通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。
• 用户通过交互来操作网页，网页通过Ajax来实现 网页和服务器的数据交互。

 Ajax的典型应用场景

• 用户名检测：注册用户时，通过 ajax 的形式，动态检测用户名是否被占用
• 搜索提示：当输入搜索关键字时，通过 ajax 的形式，动态加载搜索提示列表
• 数据分页显示：当点击页码值的时候，通过 ajax 的形式，根据页码值动态刷新表格的数据
• 数据的增删改查：数据的添加、删除、修改、查询操作，都需要通过 ajax 的形式，来实现数据的交互

jQuery中的Ajax

浏览器中提供的 XMLHttpRequest 用法比较复杂，并且具有兼容性。所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。

jQuery 中发起 Ajax 请求最常用的三个方法如下：  

• $.get()  
• $.post()  
• $.ajax()

$.get()函数的语法

        jQuery 中 $.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。

        $.get(url, [data], [callback])     

参数名	参数类型	是否必选	说明
url	string	是	要请求的资源地址（要从这个地址来请求获取资源）
data	object	否	请求资源期间要携带的参数
callback	function	否	请求成功后的回调函数 （响应返回的数据）

$.get()发起不带参数的请求

        使用 $.get() 函数发起不带参数的请求时，直接提供请求的 URL 地址和请求成功之后的回调函数即可

            $('#btnGET').on('click', function () {
                $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                    console.log(res); // // 这里的 res 是服务器响应返回的数据
                });
            })

XHR 用来 监听和 过滤所有的Ajax请求的

preview 可以查看美化过后的数据

$.get()发起带参数的请求

            $('#btnGETINFO').on('click', function () {
                $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) {
                    console.log(res);
                })
            })

 

 $.post()函数的语法

        $.post(url, [data], [callback])       

参数名	参数类型	是否必选	说明
url	string	是	提交数据的地址
data	object	否	要提交的数据
callback	function	否	数据提交成功时的回调函数

$.post()向服务器提交数据

            $('#btnPOST').on('click', function () {
                $.post('http://www.liulongbin.top:3006/api/addbook', { bookname: '啦啦啦', author: '啦啦啦作者', publisher: '不知道出版社1' }, function (res) {
                    console.log(res);
                })
            })

 $.ajax()函数的语法

$.ajax({    

        type: '', // 请求的方式，例如 GET 或 POST    

        url: '',  // 请求的 URL 地址    

        data: { },// 这次请求要携带的数据     只要是参数写到data里面

        success: function(res) { } // 请求成功之后的回调函数

})

使用$.ajax()发起GET请求

                $.ajax({
                    type: 'GET',  // 请求的方式
                    url: 'http://www.liulongbin.top:3006/api/getbooks', // 请求的地址
                    data: {
                        id: 1
                    },  // 这次请求要携带的数据
                    success: function (res) {  // 请求成功之后的回调函数
                        console.log(res);
                    }
                })

 使用$.ajax()发起POST请求

                $.ajax({
                    type: 'POST',
                    url: 'http://www.liulongbin.top:3006/api/addbook',
                    data: {  // 要提交给服务器的数据
                        bookname: '水浒传',
                        author: '施耐庵',
                        publisher: '上海图书出版社'
                    },
                    success: function (res) {
                        console.log(res);
                    }
                })

 接口

        使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式（get 拿数据或者post 提交数据）。

例如：

http://www.liulongbin.top:3006/api/getbooks  获取图书列表的接口(GET请求) http://www.liulongbin.top:3006/api/addbook   添加图书的接口（POST请求）

 通过GET方式请求接口的过程

• 用户对网页进行一个交互效果的时候，希望从服务器获取数据
• 网页中的Ajax对服务器发起了get数据请求，然后服务器进行处理请求
• 服务器响应get请求到网页中
• 然后Ajax把数据给到用户

通过POST方式请求接口的过程

•  用户对网页进行交互效果的时候，希望向服务器提交数据
• 网页中的阿贾克斯就向服务器发起post数据请求
• 服务器进行处理请求
• 处理请求完毕的时候，服务器响应post请求 返回到网页中
• Ajax拿到请求结果，然后将结果返回给用户

使用postcode测试GET接口

vscode 插件 postcode

步骤：

• 选择请求的方式
• 填写请求的URL地址
• 填写请求的参数
• 点击 Send 按钮发起 GET 请求
• 查看服务器响应的结果

使用postcode测试POST接口

步骤：

• 选择请求的方式
• 填写请求的URL地址
• 选择 Body 面板并勾选数据格式
• 填写要发送到服务器的数据
• 点击 Send 按钮发起 POST 请求
• 查看服务器响应的结果

 接口文档

        接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。

接口文档的组成部分

        接口文档可以包含很多信息，也可以按需进行精简，不过，一个合格的接口文档，应该包含以下6项内容，从而为接口的调用提供依据：  

• 接口名称：用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。  
• 接口URL：接口的调用地址。  
• 调用方式：接口的调用方式，如 GET 或 POST。  
• 参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。  
• 响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容。  
• 返回示例（可选）：通过对象的形式，例举服务器返回数据的结构。

接口文档示例

 

案例 - 图书管理

渲染UI结构

 案例用到的库和插件

• 用到的 css 库 bootstrap.css
• 用到的 javascript 库 jquery.js
• 用到的 vs code 插件 Bootstrap 3 Snippets

渲染图书列表（核心代码）

• 首先是获取图书列表数据调用方式是get请求
• 首先定义rows存储tbody里面的tr行，然后用each()来遍历res.data数据
• 将便利得到的数据都加到rows里面rows.push()
• 遍历玩以后，清空tbody里面的子元素 empty（），然后把遍历的rows数组转换成字符串join('')，放到tbody里（append()）

            // 获取图书列表数据
            function getBookList() {
                $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                    if (res.status !== 200) { // 获取列表是否成功
                        return alert('获取数据失败');
                    } else {
                        var rows = []; // 存储所有的tr行
                        $.each(res.data, function (i, item) { // 遍历res.data数据
                            // push末尾添加数组元素
                            rows.push('' + item.id + '' + item.bookname + '' + item.author + '' + item.publisher + '删除')
                        })
                        // 先清空tbody里面empyt(),然后把内容放到tbody里面  join()把数组转换成字符串，用''分隔开
                        $('#tb').empty().append(rows.join(''));
                    }
                })
            }
            getBookList();

 

 删除图书（核心代码）

•  我们点击小a的时候就删除这一行
• 因为a链接是后面加上的，所以我们用事件委托的方式为动态添加的元素来绑定点击事件
• 删除图书的调用方式是get请求，参数是必须要写的就是图书id
• 然后回调函数里面用if语句来判断是否删除成功
• 如果删除成功的话就再次执行  渲染图书列表

            // a链接是后面才加上的，我们用事件委托（代理）的方式为动态添加的元素绑定点击事件
            $('#tb').on('click', '.del', function () {
                var id = $(this).attr('data-id'); // 触发对象是链接a
                // 删除图书
                $.get('http://www.liulongbin.top:3006/api/delbook', { id: id }, function (res) {
                    if (res.status !== 200) {
                        return alert('删除失败');
                    } else {
                        getBookList();
                    }
                })
            })

添加图书（核心代码）

• trim() 可以去除字符串两端的空格

•  首先当点击添加按钮时就添加图书那一行，给按钮绑定一个点击事件
• 获取每一个文本框的值， If语句如果当它们的长度小于等于零时，return添加失败
•  Else语句，添加图书的调用方式是post请求，带上URL地址和三个参数，然后回调函数，if (res.status !== 201) { return alert('添加图书失败')
• 成功的话就再次重新渲染图书列表，然后把文本框的val值清空

            // 添加图书
            $('#btnAdd').on('click', function () { // 给添加按钮绑定一个点击事件
                // 获取每一个文本框的值
                var bookname = $('#iptBookname').val().trim();
                var author = $('#iptAuthor').val().trim();
                var publisher = $('#iptPublisher').val().trim();
                if (bookname.length <= 0 || author.length <= 0 || publisher.length <= 0) {
                    return alert('请填写完整的图书信息');
                } else {
                    $.post('http://www.liulongbin.top:3006/api/addbook', {
                        bookname: bookname,
                        author: author,
                        publisher: publisher
                    }, function (res) {
                        if (res.status !== 201) {
                            return alert('添加图书失败')
                        } else {
                            getBookList();
                            $('#iptBookname').val('');
                            $('#iptAuthor').val('');
                            $('#iptPublisher').val('');
                        }
                    }
                    )
                }
            })

案例 – 聊天机器人

 

将用户输入的内容渲染到聊天窗口

• 为发送按钮绑定鼠标点击事件
• 获取输入框里面的val值
• 如果用户输入流内容，就将内容追加到页面上显示append()
• 追加完成后重置滚动条的位置 resetui()

    // 为发送按钮绑定鼠标点击事件
    $('#btnSend').on('click',function(){
        var text = $('#ipt').val().trim(); // 获取输入框里面的值
        if(text.length <= 0){
            return $('#ipt').val(''); // 清空里面的内容
        }
        //  如果用户输入了聊天内容，将聊天内容追加到页面上显示
        $('.talk_list').append('
 ' + text + '
');
        $('#ipt').val('');
        // 追加完成以后重置滚动条的位置
        resetui();
    })

发起请求获取聊天消息

• 定义一个函数用来获取聊天机器人发送回来的消息
• 用ajax()来请求接口
• 请求成功接收聊天信息，将res里面data的info里面的text定位msg（机器人的语言）
• 然后在ul后面append()添加li为机器人的说的话
• 重置滚动条的位置

    // 获取聊天机器人发送回来的消息
    function getMsg(text){
        $.ajax({
            method:'GET',
            url:'http://www.liulongbin.top:3006/api/robot',
            data:{
                spoken:text
            },
            success:function(res){
                if(res.message == 'success'){
                    // 请求成功,接收聊天消息
                    var msg = res.data.info.text;
                    $('.talk_list').append('
 ' + msg + '
')
                    resetui(); // 重置滚动条的位置
                }
            }
        })
    }

将机器人的聊天内容转为语音

• 如果请求成功，将audio的地址改为res.voiceUrl
• html中的audio指定了新的src属性，并且autoplay可以自动播放，记得隐藏起来

    // 将机器人的聊天内容转换为语音
    function getVoice(msg){
        $.ajax({
            method:'GET',
            url:'http://www.liulongbin.top:3006/api/synthesize',
            text:msg,
            success:function(res){
                if(res.status == 200){
                    // 播放语音
                    $('#voice').attr('src',res.voiceUrl);
                }
            }
        })
    }

使用回车发送消息

    // 使用回车发送消息
    $('#ipt').on('keyup',function(e){
        // e.keyCode 可以获取到当前按键的编码
        if(e.keyCode === 13 ){
            // 调用按钮元素的 click 函数，可以通过编程的形式触发按钮的点击事件
            $('#btnSend').click();
        }
    })

client and server
Server: A computer responsible for storing and providing resources to the outside world, called a server

Client: A computer responsible for acquiring and consuming resources, called a client

URL address