1、客户端与服务器
客户端：获取和消费资源的电脑；
服务器：对外负责提供访问资源的电脑；
中间件：浏览器
2、URL地址
统一资源定位符，标识资源在互联网上的位置。
组成：通信协议、服务器名称、具体存放位置
3、分析网页的打开过程
客户端：打开浏览器，发出资源请求
服务器：处理资源请求，接收到客户端请求，内部处理，
响应：服务器把用户需求发送给客户端
请求-> 处理-> 响应这三步。
在浏览器中，可以通过“右键->审查->网络->DOC->名称->响应”，查看客户端与服务器之间的通信过程。
4、服务器对外提供了哪些资源
文字、图片、音频、视频、数据。
数据也是资源，也是服务器对外提供的资源。
数据是网页的灵魂。
骨架、颜值、行为、灵魂。
获取数据的过程：请求、处理、响应。
XMLHttpRequest对象，请求服务器上的数据；
var xhrObj = new XMLHttpRequest()
get，向服务器要资源，HTML/JS/CSS/数据等；
post，向服务器发送资源，如，登陆时提交的登陆信息，注册时提交的注册信息；
5、了解Ajax
异步JS和XML，在网页中使用XMLHttpRequest对象与服务器进行交互的方式，就是Ajax。
之前学的技术可以让网页变的美观漂亮、或者有动画的效果，但是Ajax可以实现网页与服务器之间的数据交互。
用户、网页、服务器之间，Ajax负责用户与服务器之间进行数据交互。
应用场景：用户名的检测如重名、搜索提示如下拉、数据分页显示如根据页码动态显示表格数据数据的增加删除改正查询操作等。只要用户端需要数据传输，就会用到Ajax。
6、jQuery中的Ajax
白龙网认为，浏览器中的XMLHttpRequest比较复杂，JQ对XMLHttpRequest进行了封装，提供了一系列相关的Ajax函数，降低了ajax使用难度。如$.get()请求数据，$.post()向服务器发送数据，$.ajax()即可发送数据又可请求数据。
（1）$.get(url,[data],[callback])
发起请求,把服务器上的资源请求到客户端进行使用；
第一个参数是字符串类型的地址，必选项，要请求的资源地址；
第二个参数是对象类型，可选，请求资源期间要携带的参数；
第三个参数是回调函数，可选，请求成功时的回调函数；
案例1：不带参数获取数据
要在head区域先引入jquery-3.6.0.min.js
<body>
<button id="btnGet">获取数据</button>
<script>
$(function() {
$('#btnGet').on('click',function() {
$.get('http://www.liulongbin.top:3006/api/getbooks',function(res) {
console.log(res);
})
})
})
</script>
</body>
查看数据的方式：点击“获取数据”-》控制台（查看打印数据）-》Network->XHR->name->respose查看服务器响应数据。
案例2：带参数获取数据（ID为1的数据拿过来）
<body>
<button id="btnGet">获取数据</button>
<script>
$(function(){
$('#btnGet').on('click',function() {
$.get('http://www.liulongbin.top:3006/api/getbooks',{id: 1},function(e) {
console.log(e);
})
})
})
</script>
</body>
（2）$.post(url,[data],[function])
与$.get()函数中参数类同：
第一个参数表示提交的网址，必选；
第二个参数表示要提示的数据,可选；
第三个参数是回调函数，可选；
案例1：向服务器提交数据
<body>
<button id="btnPost">提交数据</button>
<script>
$(function() {
$('#btnPost').on('click',function() {
$.post('http://www.liulongbin.top:3006/api/addbook',{bookname:'bailongsite',author:'bailong',publisher:'bailongshe'},function(e) {
console.log(e);
})
})
})
</script>
</body>
（3）$.ajax()
$.ajax()可以请求数据，也可以提交数据，比$.get()和$.post()多了一个type的参数，如下所示：
$.ajax({
type:''//类型为get/post
url: ''//获取/提交地址
data:{}//携带的参数/数据
success:function(res) {}//回调函数
})
案例1：使用$.ajax()获取数据
<body>
<button id="ajaxGet">获取数据</button>
<script>
//1.声明入口函数
$(function() {
//2.给按钮添加点击事件，这里要注意使用$('#ajaxGet')获取元素并添加事件
$('#ajaxGet').on('click',function() {
//3.获取数据
$.ajax({
type: 'get',
url: 'http://www.liulongbin.top:3006/api/getbooks',
data: {id: 1},
success: function(res) {
console.log(res);
}
})
})
})
</script>
</body>
案例2：使用$.ajax()提交数据
<body>
<button id="ajaxPost">提交数据</button>
<script>
//1.声明入口函数
$(function() {
//2.给按钮添加点击事件，这里要注意使用$('#ajaxPost')提交元素并添加事件
$('#ajaxPost').on('click',function() {
//3.获取数据
$.ajax({
type: 'post',
url: 'http://www.liulongbin.top:3006/api/addbook',
data: {id: 561,bookname:'白龙网站',author: '小白龙',publisher:'京城小白龙出版社'},
success: function(res) {
console.log(res);
}
})
})
})
</script>
</body>
7、接口
使用ajax请求数据时，被请求的URL地址，就叫做数据接口，简称接口，同时，每个接口有对应的请求方式。
（1）通过GET方式请求数据的过程
用户通过网页（ajax）向服务器发出请求；服务器处理之后，响应用户请求，用户接收到响应数据后，就可以把数据渲染到网页
（2）通过POST方式向服务器提交数据
用户希望向服务器提交数据，借助于网页ajax，服务器内部处理并响应请求，用户拿到结果，再呈现给用户。
（3）接口测试工具
Postman，在不写任何代码的情况下，直接对接口进行调用。
选择请求方式-》填写URL-》填写相关参数（paramas）-》发起请求-》查看请求结果。
选择请求方式为POST-》请求URL地址-》数据（选择格式body-x-wwww）-》发起请求-》查看结果。
（4）接口文档
接口的说明文档，我们调用接口的依据。包含接口的URL、参数、输出等等说明。有六部分组成：
接口名称，登陆接口，获取数据接口，提交数据接口
接口URL地址，接口的调用地址
调用方式，POST，GET
参数格式，参数名称，参数类型，是否必选，参数说明
响应格式，数据名称，数据类型，说明
返回示例，通过对象的方式返回数据的结果
8、案例：图书的管理（查询、添加、删除）
这部分代码实现了查询、删除、添加图书，但是如何修改图书信息呢？
<!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 user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
<script src="./jquery-3.6.0/jquery-3.6.0.min.js"></script>
</head>
<body style="padding: 20px;">
<!-- 图书标题 -->
<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 id="tb">
</tbody>
</table>
<script>
$(function() {
//1、查询图书-获取图书列表开始
function getBooklist() {
//向服务器请求资源
$.get('http://www.liulongbin.top:3006/api/getbooks',function(e) {
//如果状态码不是200，获取数据失败
if (e.status != 200) return alert('获取数据失败');
//定义一个空数组，用来接收从服务器拿来的数据
var rows = [];
//按照表格body格式循环从服务器拿数据
$.each(e.data,function(i,item) {//e.data是数组,包含数组下标和数组元素对象两部分，i是数组的下标，item数组中的每一个元素对象
//从服务器数组中拿到元素对象，追加到空数组rows中
rows.push('<tr><td>' + item.id + '</td><td>' + item.bookname + '</td><td>' + item.author + '</td><td>' + item.publisher + '</td><td><a href="javascript:;" id="del" data-id="' + item.id + '">删除</a></td></tr>');
});
//把rows数组中的元素用空格隔开追加到tbody下
$('#tb').empty().append(rows.join(''));
});
};
getBooklist();
//2、删除图书，通过代理的方式为动态添加的元素添加事件：先为父元素添加一个事件，然后再代理把目标元素a上
$('#tb').on('click','#del',function() {
//把元素对象的ID绑定a元素并赋值给ID
var id = $(this).attr('data-id');
// 根据ID删除元素对象
$.get('http://www.liulongbin.top:3006/api/delbook',{id:id},function(e) {
if (e.status !==200) return alert('删除图书失败');
getBooklist();
})
})
//3、添加图书
$(function() {
$('#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('请输入完整的信息！');
}
//提交内容
$.post('http://www.liulongbin.top:3006/api/addbook',{bookname: bookname,author: author,publisher: publisher},function(e) {
//返回201说明提交成功
if (e.status !==201) return alert('添加图书失败')
//重新获取数据并清空输入框
getBooklist()
$('#iptBookname').val('')
$('#iptAuthor').val('')
$('#iptPublisher').val('')
})
})
})
})
</script>
</body>
</html>
9、案例：聊天机器人
这个案例涉及代码结构与用户输入的内容渲染到聊天窗口、发起请求获取聊天消息、把机器人的聊天内容转化了语音、通过audio播放语音、使用回车发送消息等功能的实现。
用到新的知识点包含jQuery入口$(function(){})、jQuery获取元素$(''#ipt)以及$.ajax({})请求数据和提交数据。另外使用jQuery定义了事件，jQuery就会自动把该事件封装成对应事件函数，例如本案例使用jQuery的方法注册了点击事件，则在后续的程序中就可以调用该事件对就的点击事件函数：click()。
（1）代码结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<!-- 布局UI -->
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<!-- 鼠标滚轮的操作 -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<title>聊天机器人</title>
</head>
<body>
<div class="wrap">
<!-- 头部 Header 区域 -->
<div class="header">
<h3>小思同学</h3>
<img src="img/person01.png" alt="icon" />
</div>
<!-- 中间 聊天内容区域 -->
<div class="main">
<ul class="talk_list" style="top: 0px;" id="talk_list">
<!-- <li class="left_word">
<img src="img/person01.png" /> <span>嗨，最近想我没有？</span>
</li> -->
<!-- <li class="right_word">
<img src="img/person02.png" /> <span>你好哦</span>
</li> -->
</ul>
<div class="drag_bar" style="display: none;">
<div class="drager ui-draggable ui-draggable-handle" style="display: none; height: 412.628px;"></div>
</div>
</div>
<!-- 底部 消息编辑区域 -->
<div class="footer">
<img src="img/person02.png" alt="icon" />
<input type="text" placeholder="说的什么吧..." class="input_txt" id="ipt" />
<input type="button" value="发 送" class="input_sub" id="btnSend" />
</div>
</div>
<!-- 注意：只要为 audio 指定了新的 src 属性，而且指定了 autoplay，那么，语音就会自动播放 -->
<audio src="" id="voice" autoplay style="display: block;"></audio>
<!-- 页面滚动 -->
<script type="text/javascript" src="js/scroll.js"></script>
<script src="./js/chat.js"></script>
</body>
</html>
（2）核心JS代码（来自chat.js）
<script>
$(function () {
// 初始化右侧滚动条
// 这个方法定义在scroll.js中
resetui();
//1、给“发送”按钮注册点击事件,把用户输入的内容渲染到浏览器
$('#btnSend').on('click',function() {
var text = $('#ipt').val().trim();
//如果用户输入内容为空，则清空输入框
if (text.length <= 0) {
return $('#ipt').val('');
}
//如果用户输入了内容，则把聊天内容追加到页面上显示
$('#talk_list').append('<li class="right_word"><img src="img/person02.png" /> <span>' + text + '</span></li>');
//内容发送完毕后，要清空输入框
$('#ipt').val('');
//重置滚动条
resetui();
//发起请求，获取聊天内容
getMsg(text);
})
//2、获取机器人消息函数
function getMsg(text) {
$.ajax({
method: 'GET',//这里也可以使用把method换成type
url: 'http://www.liulongbin.top:3006/api/robot',
data: {
spoken: text
},
success: function(res) {
if (res.message === 'success') {
//如果获取数据成功，就把数据存储到变量msg
var msg = res.data.info.text;
//然后把获得的数据追加到目标位置
$('#talk_list').append('<li class="left_word"><img src="img/person01.png" /> <span>' + msg + '</span></li>');
resetui();
//把服务器响应的信息转化为语音
getvoice(msg);
}
}
})
}
//3.把机器人的聊天内容转化为语音
function getvoice(text) {
$.ajax({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/synthesize',
data: {
text: text
},
success: function(res) {
//根据返回状态200，语音地址，把地址赋值给播放器的src
if(res.status === 200) {
$('#voice').attr('src',res.voiceUrl)
}
}
})
}
//4.回国发送信息
$('#ipt').on('keyup',function(res) {
console.log(res.keyCode);
//回车键的ASCII值是13
if(res.keyCode === 13) {
//调用按钮的click函数，触发点击事件
$('#btnSend').click();
}
})
})
</script>