08-Ajax

最新推荐文章于 2022-11-04 16:30:16 发布

人俗� 话不多

最新推荐文章于 2022-11-04 16:30:16 发布

阅读量498

点赞数

文章标签： ajax javascript

本文链接：https://blog.csdn.net/slf13754951386/article/details/123315965

版权

服务器相关概念

1. 客户端与服务器

服务器 : 上网过程中，负责 存放或对外提供资源 的电脑，叫做服务器

客户端 : 在上网过程中，负责 获取和消费资源 的电脑，叫做客户端

2. URL地址的概念&组成⭐️

1.URL的概念

URL（全称是 UniformResourceLocator）中文叫 统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源

2. URL的组成

URL地址一般由三部分组成:

协议 , 主机名 , 端口号 , 路径

客户端与服务器之间的 通信协议
存有该资源的 服务器名称（主机名）
端口号0-65535之间的整数 , 主要作用表示一台计算机中的特定进程所提供的服务(通过端口号 , 访问百度下的 ,网站A,网站B)
资源在服务器上 具体的存放位置（请求路径）

端口号

端口号 80 可以省略不写

3. 客户端与服务器通信过程

客户端与服务器之间的通讯过程，分为： 请求-处理-响应 三个步骤

4. 资源的请求方式

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

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

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

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

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

5. 网页中如何请求数据

（1）通过地址栏发送请求

（2）通过表单发送请求

（3）通过ajax对象发送请求

了解Ajax

什么是Ajax

Ajax 的全称是 Asynchronous JavaScript And XML（异步 JavaScript 和 xml）

通俗理解：在网页中利用 XMLHttpRequest (是DOM 内置的一个API )对象和服务器进行数据交互的方式，就是Ajax。

之前所学的技术，只能把网页做的更美观漂亮，或添加一些动画效果，但还是，Ajax能让我们轻松实现网页与 服务器之间的 数据交互

Ajax应该用场景

场景一：用户名检测 : 检测用户名是否被占用

场景二：搜索提示 : 动态加载搜索提示列表

场景三：数据无刷新分页显示 : 根据页码值动态刷新表格的数据

场景四：数据的无刷新增删改查 : 数据的添加、删除、修改、查询操作

jQuery中的Ajax

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

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

$.get() get方式请求，用于**获取(下载)**数据
$.post() post方式请求，用于提交(上传)数据
$.ajax() 比较综合，既可以获取数据，又可以提交数据**(获取&提交)**

url 地址错误

$.get() 函数介绍

用于**获取(下载)**数据

get 请求，从而将服务器上的资源请求到客户端来进行使用

$.get(url,[data],[callback]) []:可选参数

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

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

      $(function () {
   
        $.get("http://www.liulongbin.top:3006/api/getbooks", function (res) {
   
          console.log(res);
        });
      });

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

使用$.get() 发起携带参数的请求，那么携带的参数应该写在第二个参数的位置

      $(function () {
   
        $.get("http://www.liulongbin.top:3006/api/getbooks", {
    bookname: "三国演义", author: "罗贯中" }, function (res) {
   
          console.log(res);
        });
      });

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

用于提交(上传)数据

      $(function () {
   
        $("button").on("click", function () {
   
          $.post(
            "http://www.liulongbin.top:3006/api/addbook",
            {
   
              bookname: "啊飞的一天",
              author: "阿飞",
              publisher: "黑马",
            },
            function (res) {
    // 成功后的回调函数
              console.log(res);
            }
          );
        });
      });

$.ajax() 函数介绍

$.ajax() 注意事件

get : 请求方式
url : 数据的接口
data : 数据
success : 成后返回的值

$.ajax()发起 get 请求

只需要将 type 属性的值设置为 ‘GET’ 即可

        // ajax-不带参数请求
        $("#btn1").on("click", function () {
   
          $.ajax({
   
            type: "get",
            url: "http://www.liulongbin.top:3006/api/getbooks",
            data: {
   },
            success: function (res) {
   
              console.log(res);
            },
          });
        });

        // -----------------------------

        // ajax - 携带参数请求;
        $("#btn2").on("click", function () {
   
          console.log(11);
          $.ajax({
   
            type: "get",
            url: "http://www.liulongbin.top:3006/api/getbooks",
            data: {
    bookname: "三国演义" },
            success: function (res) {
   
              console.log(res);
            },
          });
        });

$.ajax 发起 post 请求

只需要把 type属性的值设置为 ‘post’ 即可

 // ajax-post请求
        $("#btn3").on("click", function () {
   
          $.ajax({
   
            type: "post",
            url: "http://www.liulongbin.top:3006/api/addbook",
            data: {
   
              bookname: "程序员自我修养",
              author: "阿飞",
              publisher: "黑马",
            },
            success: function (res) {
   
              console.log(res);
            },
          });
        });
      });

接口

1. 接口的概念

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

例如：

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

2. 接口的请求过程

GET方式请求接口的过程

POST方式请求接口的过程

3. 接口文档

ajax课程的在线接口文档：https://www.showdoc.com.cn/ajaxapi?page_id=3753323218792173

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

接口文档的组成部分

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

接口文档示例

参数格式

响应格式

返回示例

4. 接口测试工具

1. 什么是接口测试工具

为了验证接口是否被正常被访问，我们常常需要使用接口测试工具，来对数据接口进行检测

**好处：**接口测试工具能让我们在 不写任何代码 的情况下，对接口进行调用和测试

常用的就是：PostMan

2. 了解 Postman 界面结构

3. 使用`PostMan`测试GET接口

4. 使用`PostMan`测试POST接口

5. 错误提示

url 地址错误

Cannot GET/api/addbook 请求地址 , 请求方式错误

两个案例

图书管理

`UI`界面搭建

需要使用到的库和插件

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

搭建步骤

Panel面板搭建
- 创建panel板（快捷键：bs3-panel:primary）
- 在 panel-body 里面，创建3个对应的输入框（快捷键：bs3-input:addon:text），对应修改标题
- 在 panel-body 最后面，创建 button按钮（快捷键：bs3-button:primary）,修改内容
图书的表格
- 创建 table（快捷键：bs3-table:bordered）
- 在里面创建对应5个td，填写里面内容

内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。

1. 获取渲染图书列表数据

ajax课程的在线接口文档：https://www.showdoc.com.cn/ajaxapi?page_id=3753323218792173

步骤：

查阅资料中的接口文档，找到获取图书列表的接口
定义 script 标签，创建入口函数
利用 $.get() 方法，传入相应的url，和成功之后的回调函数
在回调函数中获取到请求成功的数据

        // [1] 渲染列表
        getBookList();
        function getBookList() {
   
          // (1)调接口,获取所有的图书馆数据
          $.ajax({
   
            type: "get",
            url: "http://www.liulongbin.top:3006/api/getbooks",
            success: function (res) {
   
              // (2) 判断数据是否获取成功
              if (res.status !== 200) {
   
                return alert("获取图书失败");
              }
              //  (3) 把数据遍历渲染到页面
              //  遍历数据,生成tr
              var rows = [];
              res.data.forEach(function (item, index, array) {
   
                var newStr = `
     <tr>
        <td>${
     item.id}</td>
        <td>${
     item.bookname}</td>
        <td>${
     item.author}</td>
        <td>${
     item.publisher}</td>
        <td><a href="javascript:;" class="del" data-id=${
     item.id}>删除</a></td>
      </tr>`;
                //   把遍历出来的数据 追加到空数组里
                rows.push(newStr);
              });
              // 添加到tbody中
              //   性能优化去掉字符串拼接
              $("tbody").html(rows.join(""));
            },
          });
        }

2. 删除功能实现

利用 tbody 容器，通过事件委派的方式，给动态创建的a标签绑定事件
删除图书需要通过id删除，所以我们需要得到对应的id，我们利用自定义属性的方式，传递过来相应的id

        // [2] 删除功能
        // (1) 给删除按钮绑定单击事件 (事件委托,动态检测)
        // (2) 获取被删图书的 id
        //   1) 渲染列表时,给删除添加自定义属性 data-id
        //   2) 获取自定义属性的值 $(this).attr(data-id)
        // (3) 询问是确定删除 if(confirm) // true false
        // (4) 调接口
        // (5) 判断是否删除成功,成功后重新渲染列表

        $("tbody").on("click", ".del", function () {
   
          var id = $(this).attr("data-id"); // 获取自定义属性的值
          if (confirm("确定要删除")) {
   
            $.ajax({
   
              type: "get",
              url: "http://www.liulongbin.top:3006/api/delbook",
              data: {
    id: id },
              success: function (res) {
   
                if (res.status !== 200) {
   
                  return alert(res.msg);
                }
                getBookList();
              },
            });
          }
        });

3. 添加功能实现

        // [3] 添加功能
        // (1) 给添加按钮绑定单击事件
        // (2) 收集数据
        // (3) 判断数据是否合法(不能为空)
        // (4) 调接口 ,添加图书
        // (5) 判断是否添加成功 , 如果成功重新渲染页面

        $("#btnAdd").on("click", function () {
   
          var bookname = $("#iptBookname").val().trim();
          var author = $("#iptAuthor").val().trim();
          var publisher = $("#iptPublisher").val().trim();
          if (bookname === "" || author === "" || publisher === "") {
   
            return alert("值不能为空");
          }            
          // if (bookname.leng <= 0 || author.length <= 0 || publisher.length <= 0) {
   
            return alert("值不能为空");
          }
          $.ajax({
   
            type: "post",
            url: "http://www.liulongbin.top:3006/api/addbook",
            data: {
   
              bookname: bookname,
              author: author,
              publisher: publisher,
            },
            success: function (res) {
   
              if (res.status !== 201) {
   
                return alert(res.msg);
              }
              getBookList();
              $("#iptBookname").val("");
              $("#iptAuthor").val("");
              $("#iptPublisher").val("");
            },
          });
        });

每次发送完请求 , 返回的请求先要判断一下是否成功 , 再重新调用下数据

聊天机器人

实现功能点

梳理案例代码结构
将用户输入的内容渲染到聊天窗口
发起请求获取聊天消息
将机器人的聊天内容转为语音
通过播放语音
使用回车发送消息

梳理案例的代码结构

UI结构梳理
业务代码抽离
resetui() 函数作用-让聊天框区域自动滚动到底部

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

ajax课程的在线接口文档：https://www.showdoc.com.cn/ajaxapi?page_id=3753323218792173

为发送按钮绑定点击事件
在点击事件函数里面判断一下用户输入内容是否为空，注意：如果为空，我们清除一下输入框内容
获取到对应的ul容器，调用 append 函数来追加 li，注意：追加li的类名叫做 right_word
清除文本输入框的值
最后调用一下 resetui()，让聊天框区域自动滚动到底部

  // [1] 单击发送 , 把聊天消息渲染到页面
  $("#btnSend").on("click", function () {
   
    var text = $("#ipt").val().trim(); // 1.获取输入框的信息
    console.log(text);
    // 判断输入框是否为空 // if (text==="") 
    // if (!text) return;
    if (text.length <= 0) {
   
      return;
    }
    // 2.信息渲染到页面
    // 新建li
    var newLi = `
      <li class="right_word">
            <img src="img/person02.png" /> <span>${
     text}</span>
          </li>`;
    $("#talk_list").append(newLi);
    resetui(); // 滚动条滚动到最新位置
    $("#ipt").val(""); // 清空输入框

    //[2] 向机器人发送消息（调接口）,机器人回复
    getMsg(text);
  });

2. 发起请求获取聊天信息

定义一个函数 getMsg() 接收一个参数，参数就是用户发送的信息
利用 $.ajax() 发送一个 GET 方式请求，传入请求地址 http://www.escook.cn:3006/api/robot
定义请求数据 spoken：value
定义success成功的回调，在回调函数里面判断返回数据的 message 是否等于 success
给容器动态添加返回的内容

  // [2]封装一个函数 专门向机器人发送消息,渲染回复语
  // 1.把输入框内容发送给机器人
  function getMsg(text) {
   
    $.ajax({
   
      type: "get",
      url: "http://www.liulongbin.top:3006/api/robot",
      data: {
    spoken: text },
      success: function (res) {
   
        console.log(res);
        if (res.message == "success") {
   
          console.log("机器人回复了", res.data.info.text);
          // 把机器人的回复，渲染到页面
          // 新建对话框 li
          var newLi = `
              <li class="left_word">
                  <img src="img/person01.png" /> <span>${
     res.data.info.text}</span>
              </li>`;
          $("#talk_list").append(newLi);
          resetui(); // 滚动条滚动最新位置

          getVoice(res.data.info.text); // [3] 把机器人的文字消息转成语音
        }
      },
    });
  }

3. 将机器人聊天内容转成语音

封装函数 getVoice() 接收一个参数，机器人的聊天信息
利用 $.ajax() 发送一个 GET 方式请求，传入请求地址 http://ajax.frontend.itheima.net:3006/api/synthesize
定义请求数据 text：value
定义success成功的回调，判断返回的状态码是否是200，如果是代表成功
在页面上定义 audio 标签，设置隐藏，等数据返回之后，利用这个 audio 来进行播放。设置 autoplay 属性来进行自动播放
结构里面加一个音频标签把获取到的src地址赋值进去播自动放音频

<!-- 注意：只要为 audio 指定了新的 src 属性，而且指定了 autoplay，那么，语音就会自动播放 -->
  <audio src="" id="voice" autoplay style="display: none;"></audio>

  // 2.封装一个函数，专门把机器人回复的文字转成语音
  function getVoice(text) {
   
    // 调接口
    $.ajax({
   
      text: "get",
      url: "http://www.liulongbin.top:3006/api/synthesize",
      data: {
    text: text },
      success: function (res) {
   
        console.log(res);
        if

最低0.47元/天解锁文章

人俗� 话不多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
08-Ajax

服务器相关概念1. 客户端与服务器服务器 : 上网过程中，负责存放或对外提供资源的电脑，叫做服务器客户端 : 在上网过程中，负责获取和消费资源的电脑，叫做客户端2. URL地址的概念&组成⭐️1.URL的概念URL（全称是 UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源2. URL的组成URL地址一般由三部分组成:协议 , 主机名
复制链接

扫一扫