1-服务器的基本概念与初识Ajax
文章目录
- 一、了解服务器
-
- 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个td
rows.push('' + item.id + ' ' + item.bookname + ' ' + item.author + ' ' + 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个td
rows.push('' + item.id + ' ' + item.bookname + ' ' + item.author + ' ' + 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()
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(
'
' +
text +
"
接口更新
获取聊天机器人回复的信息：
//获取聊天机器人回复的信息 用函数封装
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，这是服务器返回的音频的地址，我们把这个音频地址通过
使用回车发送信息：
代码:
//实现回车发送
//键盘上的每一个按键都有一个编码
//为文本输入框绑定keup事件
$("#ipt").on("keyup", function (e) {
console.log(e.keyCode);
// 回车键：13
if (e.keyCode === 13) {
//触发发送按钮
//获取按钮绑定click
$("#btnSend").click();
}
});
案例总结
- 实现回车发送： 键盘上的每一个按键都有一个编码 ；回车键是13；通过事件对象e.keyCode可以获取
你可能感兴趣的:(八,Ajax+HTTP技术,jquery)