文章目录

一、了解服务器
- 1.服务器
- 2.客服端
- 3.url地址
- 4.客户端与服务器之间的通信
二、了解Ajax
- 1.什么是Ajax
- 2.jQuery中的Ajax
三、接口
- 1.接口的概念
- 2.接口的请求过程
- 3.接口测试工具
- 4.接口文档
四、图书管理案例
- 案例总结
五、聊天机器人案例
- 案例总结

一、了解服务器

1.服务器

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

2.客服端

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

3.url地址

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

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

URL地址组成部分：

① 客户端与服务器之间的通信协议
② 存有该资源的服务器名称
③ 资源在服务器上具体的存放位置

4.客户端与服务器之间的通信

二、了解Ajax

1.什么是Ajax

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

2.jQuery中的Ajax

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

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

$.post():jQuery 中 $.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。

$.ajax():相比于 $.get() 和 $.post() 函数，jQuery 中提供的 $.ajax() 函数，是一个功能比较综合的函数，它允许我们对 Ajax 请求进行更详细的配置。

三、接口

1.接口的概念

2.接口的请求过程

3.接口测试工具

4.接口文档

四、图书管理案例

封装图书列表函数：

 // 封装一个获取图书列表的函数function getBookList() {//获取图书列表 发起get请求   $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {// console.log(res)// 发起请求后进行if判断if (res.status !== 200)// 获取数据失败return alert('获取数据失败');else//获取数据成功//jQuery中的$.each()遍历数据，数据是数组形式保存，数组中的每个元素都是一个对象// 我们需要把数组中的每一个元素都渲染成一个tr//rows空数组接收数据，也就是所有的tr行var rows = [];//each循环:第一个参数：循环对象，也就是get请求之后返回的data数组,res.data//第二个参数，函数；每次循环一次都会执行这个回调函数 ;在这里item是数组中的元素里面的对象//回调函数的两个参数：i,item: i:当前循环对象的索引；item是索引号对应的数组值$.each(res.data, function (i, item) {//每循环一次都要把item值放到tr行中 每行有5个tdrows.push('<tr><td>' + item.id + '</td><td>' + item.bookname + '</td><td>' + item.author + '</td><td>' + item.publish + '</td><td><a herf="javascript:;" class="del"  data-id="' + item.id + '">删除</a></td ></tr > ')})//当通过each循环 数据都添加到rows时 我们需要吧数据都转移到tbody中,即 向tbody中添加子元素//先把tbody清空在向其中添加数组元素，数组元素之间用空号拼接在一起$('#tb').empty().append(rows.join(''))})}

删除图书事件绑定：

//对删除链接进行单击事件绑定// 错误绑定：$('.del').on('click', function () {//     console.log('ok');  // })//不起效果原因：原先在页面中tbody中是空的 无法获取到del 在渲染过程中添加了tr才有的删除；对于append添加的子元素，我们无法直接对其进行事件绑定，但是我们可以利用时间委托，将事件绑定给tr的父亲tbody//通过父元素委托代理的方式，为其动态生成的子元素绑定点击事件$('tbody').on('click', '.del', function () {//我们要在点击的时候获取到对应图书项的id ；对删除标签设置自定义属性data-id="' + item.id + '"；自定义属性习惯以：data-  开头//获取自定义属性的值var id = $(this).attr('data-id')// 发起get请求删除对应图书ID的信息 传入参数：id$.get('http://www.liulongbin.top:3006/api/delbook', { id: id }, function (res) {if (res.status != 200)return alert('删除图书失败')else//删除成功之后刷新图书列表：调用图书列表函数getBookList();})})

添加图书功能：

     //添加图书事件://如果添加图书的三个信息有一个为空，则无法添加，所以要获取到三个输入项dom，进行判断是否为空$('#btnAdd').on('click', function () {//获取元素的值.val()var bookname = $('#iptBookname').val().trim()var iptAuthor = $('#iptAuthor').val().trim()var iptPublisher = $('#iptPublisher').val().trim()//只要有一个项为空if (bookname.length <= 0 || author.length <= 0 || publish.length <= 0)return alert('请输入完整的图书信息')else//将填写的书本信息添加到服务器中 post$.post('http://www.liulongbin.top:3006/api/addbook', {bookname: bookname,author: author,publish: publish}, function (res) {//对发起的post请求进行判断if (res.status !== 201)return alert('添加图书成功')//刷新图书列表getBookList();// 再清除输入的内容$('#iptBookname').val('')$('#iptAuthor').val('')$('#iptPublisher').val('')})})

总体代码：

<!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;"><!-- 添加图书的panel面板 --><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">添加新图书</h3></div><div class="panel-body form-inline"><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="iptPublisher" 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 class="tb"><tr><td></td></tr></tbody></table><script>// jquery 入口函数$(function () {// 封装一个获取图书列表的函数function getBookList() {//获取图书列表 发起get请求   $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {// console.log(res)// 发起请求后进行if判断if (res.status !== 200)// 获取数据失败return alert('获取数据失败');else//获取数据成功//jQuery中的$.each()遍历数据，数据是数组形式保存，数组中的每个元素都是一个对象// 我们需要把数组中的每一个元素都渲染成一个tr//rows空数组接收数据，也就是所有的tr行var rows = [];//each循环:第一个参数：循环对象，也就是get请求之后返回的data数组,res.data//第二个参数，函数；每次循环一次都会执行这个回调函数//回调函数的两个参数：i,item: i:当前循环对象的索引；item是索引号对应的数组值$.each(res.data, function (i, item) {//每循环一次都要把item值放到tr行中 每行有5个tdrows.push('<tr><td>' + item.id + '</td><td>' + item.bookname + '</td><td>' + item.author + '</td><td>' + item.publish + '</td><td><a herf="javascript:;" class="del"  data-id="' + item.id + '">删除</a></td ></tr > ')})//当通过each循环 数据都添加到rows时 我们需要吧数据都转移到tbody中,即 向tbody中添加子元素//先把tbody清空在向其中添加数组元素，数组元素之间用空号拼接在一起$('#tb').empty().append(rows.join(''))})}//调用一下图书列表函数getBookList();//对删除链接进行单击事件绑定// 错误绑定：$('.del').on('click', function () {//     console.log('ok');  // })//不起效果原因：原先在页面中tbody中是空的 无法获取到del 在渲染过程中添加了tr才有的删除；对于append添加的子元素，我们无法直接对其进行事件绑定，但是我们可以利用时间委托，将事件绑定给tr的父亲tbody//通过父元素委托代理的方式，为其动态生成的子元素绑定点击事件$('tbody').on('click', '.del', function () {//我们要在点击的时候获取到对应图书项的id ；对删除标签设置自定义属性data-id="' + item.id + '"；自定义属性习惯以：data-  开头//获取自定义属性的值var id = $(this).attr('data-id')// 发起get请求删除对应图书ID的信息 传入参数：id$.get('http://www.liulongbin.top:3006/api/delbook', { id: id }, function (res) {if (res.status != 200)return alert('删除图书失败')else//删除成功之后刷新图书列表：调用图书列表函数getBookList();})})//添加图书事件://如果添加图书的三个信息有一个为空，则无法添加，所以要获取到三个输入项dom，进行判断是否为空$('#btnAdd').on('click', function () {//获取元素的值.val()var bookname = $('#iptBookname').val().trim()var iptAuthor = $('#iptAuthor').val().trim()var iptPublisher = $('#iptPublisher').val().trim()//只要有一个项为空if (bookname.length <= 0 || author.length <= 0 || publish.length <= 0)return alert('请输入完整的图书信息')else//将填写的书本信息添加到服务器中 post$.post('http://www.liulongbin.top:3006/api/addbook', {bookname: bookname,author: author,publish: publish}, function (res) {//对发起的post请求进行判断if (res.status !== 201)return alert('添加图书成功')//刷新图书列表getBookList();// 再清除输入的内容$('#iptBookname').val('')$('#iptAuthor').val('')$('#iptPublisher').val('')})})})</script>
</body></html>

案例总结

1.$.each() 是对数组，json和dom结构等的遍历:第一个参数：要循环的目标;第二个参数，函数；每次循环一次都会执行这个回调函数
each()
2.数组拼接：数组名.join()
3.通过父元素委托代理的方式，可以为其动态生成的子元素绑定点击事件
4.获取元素的值.val()

<input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">var iptPublisher = $('#iptPublisher').val().trim()

5.判断是否为空：判断字符长度即可

五、聊天机器人案例

用户输入内容渲染到页面中：

$(function () {// 初始化右侧滚动条 当点击发送的时候 页面滚轮会自动滚到最底下// 这个方法定义在scroll.js中resetui();//为发送按钮绑定点击事件$("#btnSend").on("click", function () {//获取输入框的内容var text = $("#ipt").val().trim();// 在发送前检查内容的长度是否有效if (text.length <= 0) {// 为什么要清空呢？当我们在输入框输入多个空格的时候，经过trim()，则长度为0，进入到if语句中，但是文本框中的空格还是存在，所以我们需要清空return $("#ipt").val("");}//内容长度大于0 也就是用户输入了内容时，我们需要把内容追加到页面中去$("#talk_list").append('<li class="right_word"><img src="img/person02.png" /> <span>' +text +"</span></li>");// 发送完后输入框需要清空$("#ipt").val("");// 每次发送信息完成之后 重置滚动条位置 是滚动条滚到最底部 只需要调用resetui();resetui();});
});

接口更新

获取聊天机器人回复的信息：

  //获取聊天机器人回复的信息 用函数封装function getMsg(text) {//text 是用户填写的东西 上面已经将用户输入的内容赋值给了text//用ajx获取机器人回复的信息 get$.ajax({method: "GET",url: "http://www.liulongbin.top:3006/api/robot",data: {spoken: text,},success: function (res) {console.log(res);},});}

效果如图所示:

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

  //把机器人回复的信息转换为语音function getVoice(text) {//我们希望把传入的text转换为语音//调用接口实现语言转换：把text发给接口 接口会返回一个对象，对象有个属性voiceUrl，这是服务器返回的音频的地址，我们把这个音频地址通过<audio>标签进行播放$.ajax({method: "GET",url: "http://www.liulongbin.top:3006/api/synthersize",data: {text: text,},success: function (res) {// console.log(res);if (res.status === 2000) {//请求成功 播放语音//获取语音标签$("#voice").attr("src", res.voiceUrl);}},});}

使用回车发送信息：

代码:

 //实现回车发送//键盘上的每一个按键都有一个编码//为文本输入框绑定keup事件$("#ipt").on("keyup", function (e) {console.log(e.keyCode);// 回车键：13if (e.keyCode === 13) {//触发发送按钮//获取按钮绑定click$("#btnSend").click();}});

案例总结

实现回车发送：键盘上的每一个按键都有一个编码；回车键是13；通过事件对象e.keyCode可以获取

1-服务器的基本概念与初识Ajax相关推荐

java中ajax概念_Java之AJAX概念和实现方式
Java之AJAX概念和实现方式开发工具与关键技术:MyEclipse 10,java 作者:刘东标撰写时间:2019-06-12 1．概念: Asynchronous JavaScript An ...
ajax response.write 执行失败_Day 42:一人分饰三角，初识AJAX
Hello大家好!我是Cathy海希,今天是我学习编程的第42天. 欢迎同时关注我的Youtube&B站?Cathy海希TV 每日斯多葛你没必要做正确的事情.你可以变得自私,粗鲁,恶心,没远 ...
如何在客户端发送ajax请求,ajax - 从服务器(nodejs)发送数据到客户端(ajax请求)
如何使用nodejs将数据从服务器发送到客户端? 所以基本上我通过点击一个按钮来调用这个函数 javascriptfunction createStuff(tid) { $.ajax({ type: ...
WCF与AJAX编程开发实践(1):AJAX基础概念和纯AJAX示例
[0]开篇序言: 在<WCF分布式安全开发实践>系列文章之后,很想重新开启一个系列文章,来完善WCF的学习知识.思考很久,决定写一下WCF和AJAX学习的文章,取名为<WCF ...
ajax option请求后无post请求_ThingJS：一种浏览器、服务器和技术的新组合方法——Ajax...
Web应用是一种极大方便用户的操作界面,数据维护技术Ajax也从中脱颖而出,ThingJS采用了Ajax的数据维护能够形成轻量化的开发流程. 为什么Ajax 通过XHR 实现Ajax 通信的一个主要限 ...
python django ajax 逻辑推理_python django初识ajax
什么是json json是轻量级文本数据交互格式 json独立语言符合的json对象 ["one", "two", "three"] {& ...
开源免费Webrtc转发服务器Mediasoup的概念解释与基本介绍（一）
用于Webrtc的媒体流转发服务器不计其数,开源与免费的也不计其数,有基于C++开发的,有基于Java开发的,有基于Go开发的,但以笔者的实践经验,mediasoup是性能最好的转发服务器.Media ...
JavaWeb-----Ajax异步请求 json对象服务器如何返回json数据使用ajax完成一个案例
1. 回顾 1. servlet的生命周期: 2. filter: 过滤放行和拦截一些资源.比如:黑白名单,登录校验,编码设置等. (1)创建一个类并实现Filter接口以及重写接口的抽象方法 ...
Python学习01、计算机基础概念、初识Python、常量，变量，类型和表达式、字符串、动态静态类型、注释
前言:本文章主要用于个人复习,追求简洁,感谢大家的参考.交流和搬运,后续可能会继续修改和完善. 因为是个人复习,会有部分压缩和省略. 计算机基础概念什么是计算机? 现在我们所说的计算机不光能进行算术 ...

1-服务器的基本概念与初识Ajax

文章目录

一、了解服务器

1.服务器

2.客服端

3.url地址

4.客户端与服务器之间的通信

二、了解Ajax

1.什么是Ajax

2.jQuery中的Ajax

三、接口

1.接口的概念

2.接口的请求过程

3.接口测试工具

4.接口文档

四、图书管理案例

案例总结

五、聊天机器人案例

案例总结

1-服务器的基本概念与初识Ajax相关推荐

最新文章

热门文章