引入 axios.js：cdn.jsdelivr.net/npm/axios/d…
原来的 ajax.frontend.itheima.net:3006/XXX/XXXX
都替换成 ajax-base-api-t.itheima.net/XXX/XXXX
新接口文档：www.showdoc.com.cn/18347617346…
art-template的安装:aui.github.io/art-templat…
URL 编码的知识，请参考如下博客：
blog.csdn.net/Lxd_0111/ar…
HTTP协议请求头字段的描述，可以查看 MDN 官方文档：developer.mozilla.org/zh-CN/docs/…
HTTP协议更多响应头字段的描述，可以查看 MDN 官方文档：developer.mozilla.org/zh-CN/docs/…
完整的 HTTP 响应状态码，可以参考 MDN 官方文档 developer.mozilla.org/zh-CN/docs/…
一、
1.客户端与服务器
2.URL地址
3.分析网页的打开过程
4.服务器对外提供了哪些资源
5.了解Ajax
6.jQuery中的Ajax
7.接口
8.案例-图书管理
trim():去除字符串两端的空格
<!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;">
<!-- 图书管理pannel面板 -->
<!-- bs3-pannel:primary -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加新图书</h3>
</div>
<!-- 把文本框横着放：添加类名form-inline -->
<div class="panel-body form-inline">
<!-- bs3-input:addon:text -->
<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>
<!-- 图书管理表格 -->
<!-- bs3-table:bordered -->
<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 () {
// 业务一、获取图书列表数据
function getBookList() {
// 1.发起ajax请求
$.get('https://ajax-base-api-t.itheima.net/api/getbooks/', function (res) {
// console.log(res)
// 2.获取列表数据书否成功
if (res.status !== 200) return alert('获取数据失败！')
// 3.渲染页面结构
var rows = []
// 4.拼接字符串
$.each(res.data, function (i, item) {
// 拼接字符串'+item.id+'
// 防止a跳转 href="javascript:;
rows.push('<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>')
})
// 5.渲染表格结构
// join('') 数组元素无缝拼接
$('#tb').empty().append(rows.join(''))
})
}
getBookList()
// 业务二、 删除按钮 删除本条数据
// 通过代理的方式为动态添加的元素绑定事件
$("tbody").on("click", ".del", function () {
var id = $(this).attr("data-id")
// console.log(id)
// {id:id} 指定获取的元素
$.get("https://ajax-base-api-t.itheima.net/api/delbook", { id: id }, function (res) {
if (res.status !== 200) return alert("删除失败")
getBookList()
})
})
// 业务三、 添加图书
$("#btnAdd").on("click", function () {
// alert("ok")
var bookname = $("#iptBookname").val().trim()
var author = $("#iptAuthor").val().trim()
var publisher = $("#iptPublisher").val().trim()
if (bookname == '' || author == '' || publisher == '') {
alert("请输入完整信息")
} else {
// alert("ok")
// 添加图书
$.post("https://ajax-base-api-t.itheima.net/api/addbook",{bookname:bookname,author:author,publisher:publisher},function(res){
getBookList()
$("#iptBookname").val("")
$("#iptAuthor").val("")
$("#iptPublisher").val("")
})
}
})
})
</script>
</body>
</html>
9.案例-聊天机器人
实现页面滚动： resetui()$(function(){
// 初始化右侧滚动条
// 这个方法定义在scroll.js中
resetui()
})
$(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()
// 调用ajax请求 聊天机器人回复的内容
getMsg(text)
})
// 2.获取聊天机器人回复的内容 封装到函数中
function getMsg(text) {
// ajax请求
$.ajax({
method: 'GET',
url: 'https://ajax-base-api-t.itheima.net/api/robot',
data: {
spoken: text
},
success: function (res) {
// console.log(res)
// 判断是否获取成功
if (res.message === 'success') {
// 把获取的机器人回复的消息渲染到聊天窗口中
var msg = res.data.info.text
$("#talk_list").append('<li class="left_word"><img src="img/person01.png" /><span>' + msg + '</span></li>')
// 滚动页面
resetui()
// 调用getVoice() 函数，把聊天机器人的文字内容转换成语音播放
getVoice(msg)
}
}
})
}
// 3.把聊天机器人的文字内容转换成语音播放
function getVoice(text) {
$.ajax({
method: 'GET',
url: 'https://ajax-base-api-t.itheima.net/api/synthesize',
data: {
text: text
},
success: function (res) {
console.log(res)
// 如果请求成功，则res.voiceUrl是服务器返回的音频URL地址
if (res.status === 200) {
var voiceUrl = res.voiceUrl
$("#voice").attr('src', voiceUrl)
}
}
})
}
// 4.使用回车键发送消息
// 给文本输入框绑定 键盘弹起keyup 事件
$("#ipt").on('keyup', function (e) {
// console.log(e.keyCode)
// e.keyCode ASII码是13
if (e.keyCode === 13) {
// 调用发送键的点击事件
$("#btnSend").click()
}
})
})
二、form表单与模版引擎
2.1 form表单的基本使用
2.2 通过Ajax提交表单数据
2.3 案例-评论列表
清空表单文本框所有数据
获取表单，将jquery表单转换成dom元素($("#formAddCmt")[0])，再使用dom元素重置的方法(reset()) 清空表单所有数据
$("#formAddCmt")[0].reset()
// 业务一、获取评论列表 函数
function getCommentList() {
$.ajax({
method: 'get',
url: 'https://ajax-base-api-t.itheima.net/api/cmtlist',
// 没有参数 可以省略data
data: {},
success: function (res) {
// console.log(res)
// 判断数据是否请求成功
if (res.status !== 200) {
return alert('请求数据失败！')
}
// console.log('请求数据成功')
// 业务二、渲染ui结构:循环从服务器请求的数据，渲染到评论列表中
// 存储渲染的数据
var rows = []
$.each(res.data, function (i, item) {
var str = '<li class="list-group-item"><span class="badge" style="background-color: orange;">评论时间：' + item.time + '</span><span class="badge" style="background-color: skyblue;">评论人：' + item.username + '</span> ' + item.content + ' </li>'
rows.push(str)
})
// 再把rows渲染到页面中
// 先清空li，再追加
$("#cmt-list").empty().append(rows)
}
})
}
// 记得调用函数
getCommentList()
// 业务三、评论面板中表单改造：给服务器提交数据
// 不要忘了入口函数
$(function () {
$("#formAddCmt").submit(function (e) {
// 阻止表单默认提交行为
e.preventDefault()
// 获取表单所有数据
var data = $(this).serialize()
// console.log(data)
// 给服务器提交获取的用户输入的数据
$.post('https://ajax-base-api-t.itheima.net/api/addcmt',data,function(res){
if(res.status !== 201){
return alert('发送数据失败')
}
// 将发送后的数据 服务器数据重新渲染
getCommentList()
// 清空表单文本框所有数据
// 获取表单，将jquery表单转换成dom元素($("#formAddCmt")[0])，再使用dom元素重置的方法(reset()) 清空表单所有数据
$("#formAddCmt")[0].reset()
})
})
})
2.4 模板引擎的基本概念
2.5 art-template模板引擎
<!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>
<!-- 1.导入art-template -->
<script src="./lib/template-web.js"></script>
<script src="./lib/jquery.js"></script>
</head>
<body>
<div id="container"></div>
<!-- 3.定义模板
模板必须定义到script中，用html解析 -->
<!-- <script type="text/javascript"> //type="text/javascript"解析的是js，如果不写这个属性，script默认解析js -->
<script type="text/html" id="tpl-user">
<!-- "{{}} 是占位符，“art-template”函数渲染的数据自动解析到{{}}里面
template把 数据data里面的name渲染到{{}}里面 -->
<h1>{{name}}---------{{age}}</h1>
<!-- art-template 标准语法：原文输出 -->
{{@ text}}
<!-- art-template 标准语法：判断输出 -->
<div>
{{if flag === 0}}
flag的值是0
{{else if flag === 1}}
flag的值是1
{{/if}}
</div>
<!-- art-template 标准语法：循环输出 -->
<ul>
{{each hobby}}
<li>循环索引是：{{$index}}，循环项是：{{$value}}</li>
{{/each}}
</ul>
<!-- art-template 标准语法：过滤器 -->
<!-- <h3>{{regTime}}</h3> //"2023-06-07T04:17:56.693Z" -->
<h3>{{regTime | dateFormat}}</h3>
<!-- 过滤输出结果： 2023-6-7 -->
</script>
<script>
// 定义需要过滤时间数据的过滤器
// date是形参，接收regTime
template.defaults.imports.dateFormat = function (date) {
var y = date.getFullYear()
// 月份需要+1，因为从0开始
var m = date.getMonth() + 1
var d = date.getDate()
return y + '-' + m + '-' + d
}
// 2.定义需要渲染的数据
var data = {
name: 'zs',
age: 18,
text: '<h3>测试原文输出</h3>',
flag: 1,
hobby: ['吃饭', '睡觉', '打代码'],
regTime: new Date()
}
// 4.调用template函数 template('模板id(不加#)',数据)
var htmlStr = template('tpl-user', data)
console.log(htmlStr) // 结果：<h1>zs</h1>
// 5.渲染HTML结构
$("#container").html(htmlStr)
</script>
</body>
</html>
$(function () {
// 5.给时间补0函数
function padZero(n) {
return n < 10 ? '0' + n : n
}
// 4.定义时间过滤器
template.defaults.imports.dataFormat = function (newdate) {
var dt = new Date(newdate)
var y = dt.getFullYear()
var m = padZero(dt.getMonth())
var d = padZero(dt.getDate())
var hh = padZero(dt.getHours())
var mm = padZero(dt.getMinutes())
var ss = padZero(dt.getSeconds())
return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
}
// 1.获取新闻列表的函数
function getNewsList() {
// 发起ajax请求
$.get('https://ajax-base-api-t.itheima.net/api/news', function (res) {
if (res.status !== 200) {
return alert('获取新闻数据列表失败！')
}
// console.log(res.data)
// 3.编译模版
// 3.1 把body里面的新闻项剪切到script标签中
// 3.2 填充template标准语法渲染新闻数据
// 把res里data里tags字符串数据转换成数组字符串，再循环渲染到script标签中
for (var i = 0; i < res.data.length; i++) {
res.data[i].tags = res.data[i].tags.split(',') // tags:(3) ['三大运营商', '中国移动', '5G商用']
}
console.log(res)
// 值是res，不是res.data
var htmlStr = template('tpl-news', res)
// 渲染到新闻列表中
$("#news-list").html(htmlStr)
})
}
getNewsList()
// 2.html页面中定义template模版
})
2.6 模板引擎实现原理
<!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>
<!-- <script src="./lib/template-web.js"></script> -->
<!-- 调用自己封装的模板引擎template -->
<script src="./js/template.js"></script>
</head>
<body>
<div id="user"></div>
<!-- 1.创建模板 -->
<script type="text/html" id="tpl-user">
<div>姓名：{{name}}</div>
<div>年龄：{{ age}}</div>
<div>性别：{{gender }}</div>
<div>住址：{{ address }}</div>
</script>
<!-- 预调用模板引擎 -->
<script>
// 2.创建数据
var data = {
name: '张三',
age: 20,
gender: '男',
address: '北京市密云区'
}
// 3.封装自己的模板引擎template 在js文件中
// 4.调用模板引擎：template
var htmlStr = template('tpl-user', data)
// 5.渲染到html中
document.getElementById("user").innerHTML = htmlStr
</script>
</body>
</html>
// 封装自己的模板引擎template
function template(id,data){
var str = document.getElementById(id).innerHTML
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
var patternResult = null
while(patternResult=pattern.exec(str)){
str = str.replace(patternResult[0],data[patternResult[1]])
}
return str
}
三、Ajax加强
3.1 XMLHttpRequest的基本使用
3.2 数据交换格式
3.3 封装自己的Ajax函数
// 1.把 data 对象，转化成查询字符串的格式 提交给服务器
function resolveData(data) {
var arr = []
// 循环对象上的每一个属性 k
for (let k in data) {
// 每一个属性值加到arr数组中
arr.push(k + '=' + data[k])
}
// arr里面的值用&拼接
return arr.join('&')
}
// 参数传递是个对象
// var result = resolveData({uname:'zs',age:18})
// console.log(result)
// 2.封装自己的Ajax函数
// 函数的封装
// options是用户传递过来的对象
function itheima(options) {
var xhr = new XMLHttpRequest
// 把用户传递过来的参数对象 转换为 查询字符串
var qs = resolveData(options.data)
// 3.判断请求类型
if (options.method.toUpperCase() === 'GET') {
// 发起GET请求
// 传递数据
xhr.open(options.method, options.url + '?' + qs)
xhr.send()
} else if (options.method.toUpperCase() === 'POST') {
// 发起POST请求
xhr.open(options.method, options.url)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 传递数据
xhr.send(qs)
}
// 3.监听请求状态改变的事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var result = JSON.parse(xhr.responseText)
options.success(result)
}
}
}
3.4 XMLHttpRequest Level2的新特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="form1">
<!-- "/"：绝对闭合 -->
<!-- autocomplete="off":防止自动填充 -->
<input type="text" name="uname" autocomplete="off" />
<input type="password" name="upwd" />
<button type="submit">提交</button>
</form>
<script>
// 1.使用DOM获取表单
var form = document.querySelector('#form1')
// 绑定提交事件
form.addEventListener('submit', function (e) {
// 阻止默认提交行为
e.preventDefault()
// 2.创建一个formdata对象 获取表单数据
var fd = new FormData(form)
// 3.创建xhr对象
var xhr = new XMLHttpRequest()
xhr.open('POST', 'https://ajax-base-api-t.itheima.net/api/formdata')
xhr.send(fd)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText))
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 一、定义UI结构 -->
<!-- 1.文件选择框 -->
<input type="file" id="file1">
<!-- 2.按钮 -->
<button id="btnUplode">上传文件</button>
<br>
<!-- 3.上传到服务器的图片 -->
<img src="" alt="" id="img" width="800">
<script>
// 二、验证是否选择了文件
// 1.获取文件上传按钮
var btn = document.querySelector('#btnUplode')
// 2.给按钮绑定点击事件处理函数
btn.addEventListener('click', function () {
// 3.获取用户上传的文件列表
var files = document.querySelector('#file1').files //file的属性files 返回个文件数组
// 判断用户是否上传了文件
if (files.length <= 0) {
return alert('请上传文件')
}
// console.log('用户上传了文件')
// 三、向FormData中追加文件
// 4.将用户选择的文件 追加到FormData中 重点是fd数据
var fd = new FormData()
fd.append('adatar', files[0])
// 四、使用xhr发起上传文件请求
// 5.创建xhr对象，上传文件请求 把用户上传的文件上传到服务器
var xhr = new XMLHttpRequest()
xhr.open('POST','https://ajax-base-api-t.itheima.net/api/upload/avatar')
xhr.send(fd)
// 五、监听onreadystatechange事件
// 6.服务器监听事件
xhr.onreadystatechange = function(){
if(xhr.readyState===4 && xhr.status===200){
// 服务器响应成功
// 把服务器响应的数据转换成对象
var data = JSON.parse(xhr.responseText)
// {message: '上传文件成功！', status: 200, url: '/uploads/1686797022566_71f70e0e575740d7a201cc9d60f71452.png'}
// console.log(data)
if(data.status===200){
// 服务器返回数据成功
// 填充img的src属性
document.querySelector('#img').src = 'https://ajax-base-api-t.itheima.net'+data.url
}else{
// 服务器返回数据失败
console.log(data.message)
}
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入bootstrap -->
<link rel="stylesheet" href="./lib/bootstrap.css">
<!-- 导入jQuery -->
<script src="./lib/jquery.js"></script>
</head>
<body>
<!-- 一、定义UI结构 -->
<!-- 1.文件选择框 -->
<input type="file" id="file1">
<!-- 2.按钮 -->
<button id="btnUplode">上传文件</button>
<!-- bootstrap的进度条样式 -->
<div class="progress" style="margin: 10px; width: 500px;">
<div class="progress-bar progress-bar-striped active" style="width: 0%" id="prevent">
0%
</div>
</div>
<br>
<!-- 3.上传到服务器的图片 -->
<img src="" alt="" id="img" width="800">
<script>
// 二、验证是否选择了文件
// 1.获取文件上传按钮
var btn = document.querySelector('#btnUplode')
// 2.给按钮绑定点击事件处理函数
btn.addEventListener('click', function () {
// 3.获取用户上传的文件列表
var files = document.querySelector('#file1').files //file的属性files 返回个文件数组
// 判断用户是否上传了文件
if (files.length <= 0) {
return alert('请上传文件')
}
// console.log('用户上传了文件')
// 三、向FormData中追加文件
// 4.将用户选择的文件 追加到FormData中 重点是fd数据
var fd = new FormData()
fd.append('adatar', files[0])
// 5.创建xhr对象，上传文件请求 把用户上传的文件上传到服务器
var xhr = new XMLHttpRequest()
// 6.查看文件上传进度
xhr.upload.onprogress = function (e) {
// 判断上传成功，再输出进度
if (e.lengthComputable) {
var result = Math.ceil((e.loaded / e.total) * 100)
// console.log(result)
// 动态上传进度
$('#prevent').attr('style','width:'+result+'%').html(result+'%')
}
}
// 7.监听文件上传完毕 修改进度条样式
$('#prevent').removeClass().addClass('progress-bar progress-bar-success')
// 四、使用xhr发起上传文件请求
xhr.open('POST', 'https://ajax-base-api-t.itheima.net/api/upload/avatar')
xhr.send(fd)
// 五、监听onreadystatechange事件
// 6.服务器监听事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 服务器响应成功
// 把服务器响应的数据转换成对象
var data = JSON.parse(xhr.responseText)
// {message: '上传文件成功！', status: 200, url: '/uploads/1686797022566_71f70e0e575740d7a201cc9d60f71452.png'}
// console.log(data)
if (data.status === 200) {
// 服务器返回数据成功
// 填充img的src属性
document.querySelector('#img').src = 'https://ajax-base-api-t.itheima.net' + data.url
} else {
// 服务器返回数据失败
console.log(data.message)
}
}
}
})
</script>
</body>
</html>
3.5 jQuery高级用法
3.6 axios
四、跨域与JSONP
4.1 了解同源策略和跨域
4.2 JSONP
4.3 案例-淘宝搜索
<!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" />
<title>Document</title>
<!-- 导入页面的基本样式 -->
<link rel="stylesheet" href="./css/search.css" />
<!-- 导入 jQuery -->
<script src="./lib/jquery.js"></script>
<!-- 导入模板引擎 -->
<script src="./lib/template-web.js"></script>
</head>
<body>
<div class="container">
<!-- Logo -->
<img src="./images/taobao_logo.png" alt="" class="logo" />
<div class="box">
<!-- tab 栏 -->
<div class="tabs">
<div class="tab-active">宝贝</div>
<div>店铺</div>
</div>
<!-- 搜索区域（搜索框和搜索按钮） -->
<div class="search-box">
<input id="ipt" type="text" class="ipt" placeholder="请输入要搜索的内容" /><button class="btnSearch">
搜索
</button>
</div>
<!-- 搜索建议列表 -->
<div id="suggest-list"></div>
</div>
</div>
<!-- 模板结构 -->
<script type="text/html" id="tpl-suggestList">
<!-- 循环 搜索建议列表 的每一项 -->
{{each result}}
<!-- 搜索建议项 -->
<!-- 每一项数据的第一个值 -->
<div class="suggest-item">{{$value[0]}}</div>
{{/each}}
</script>
<script>
$(function () {
// 二、输入框防抖
// 2.1 定义延时器的id
var timer = null
// 三、搜索列表数据缓存
// 3.1定义全局缓存对象
var cacheObj = {}
// 2.2 通过延时器实现防抖
function debounceSearch(kw) {
timer = setTimeout(function () {
// 获取搜索列表
getSuggestList(kw)
}, 500)
}
// 1.给搜索框监听 keyup事件
$('#ipt').on('keyup', function () {
// 2.3 清空timer
clearTimeout(timer)
var keywords = $(this).val().trim()
if (keywords.length <= 0) {
// 搜索框为空时，搜索建议列表清空 并隐藏
return $('#suggest-list').empty().hide()
}
// 3.4 先判断缓存中是否有数据
if (cacheObj[keywords]) {
// 把搜索列表渲染进去
return renderSuggestList(cacheObj[keywords])
}
// 2.使用jquery发起jsonp请求 获取搜索建议列表
// console.log(keywords)
// getSuggestList(keywords)
// 2.4 重新定时
debounceSearch(keywords)
})
// 2.搜索建议列表 封装函数
function getSuggestList(kw) {
$.ajax({
// q是用户输入的关键字
url: 'https://suggest.taobao.com/sug?q=' + kw,
dataType: 'jsonp',
success: function (res) {
// console.log(res);
// 3.渲染模板引擎的UI结构
renderSuggestList(res)
}
})
}
// 3.渲染模板引擎的UI结构
function renderSuggestList(res) {
if (res.result.length <= 0) {
// 清空搜索建议列表 并隐藏
$('#suggest-list').empty().hide()
}
// 否则获取模板结构的数据，渲染到搜索建议列表 并显示
var htmlStr = template('tpl-suggestList', res)
$('#suggest-list').html(htmlStr).show()
// 3.2 获取用户输入的内容，当做键
var k = $('#ipt').val().trim()
// 3.3需要将数据作为值，进行缓存
cacheObj[k] = res
}
})
</script>
</body>
</html>
4.4 案例-防抖和节流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/jquery.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
/* 超出部分隐藏 */
overflow: hidden;
}
#angle {
position: absolute;
}
</style>
</head>
<body>
<img src="./angel.gif" alt="" id="angle">
<script>
// 1.获取图片
var angle = $('#angle')
// 二、使用节流阀优化效果 节省资源
// 2.1 定义节流阀
var timer = null
// 2.给页面绑定鼠标移动事件
$(document).on('mousemove', function (e) {
// 2.4 判断节流阀是否为空
if (timer) {
return
}
// 2.2 开启节流阀
timer = setTimeout(function () {
// 3.获取鼠标横纵坐标,设置给图片样式
// console.log(e.pageX)
// console.log(e.pageY)
$(angle).css('top', e.pageY + 'px').css('left', e.pageX + 'px')
console.log(123);
}, 16)
// 2.3 重置节流阀
timer = null
})
</script>
</body>
</html>
五、HTTP协议
5.1 HTTP协议简介
5.2 HTTP请求消息
5.3 HTTP响应消息
5.4 HTTP请求方法
5.5 HTTP响应状态代码
状态码1不常用
