明天是咱们最初一天ajax的学习，这次学完总能够去vue了吧，我不信还有什么拦路石，先不说其余的先看看明天的内容。
1.
首先是同源策略，什么叫做同源？
如果两个页面的协定、域名、端口都雷同的话，咱们将这两个页面为同源。
那么什么同源策略呢？
是浏览器提供的一个平安性能，如果说两个页面不同源，那么A网站就无奈读取B网站的cookie、localstorage、indexdb等；无奈接触B网站的DOM；无奈向B网站发送ajax申请
理解了同源与他相同的就是跨域，也就是下面说的协定。域名、端口只有有一个不满足那么他们就是跨域。
浏览器对跨域申请的拦挡，咱们是可能失常发动对服务器的申请的，服务器也可能感应到申请并将数据返回回来，然而就在邻近城门的时候，在浏览器门口就被一个同源策略的门卫拦挡住了，毕生之敌。
那么既然如此如何来实现跨域的申请呢？有两个形式CORS和JSONP。
cors是w3c规范反对get和post
JSONP
原理：因为浏览器同源策略的限度，网页无奈通过ajax申请非同源，然而script这个标签是不受限制的，所以能够通过src这个属性申请到非同源的script
实现:：本人定义一个回调函数，而后通过另一个script标签的src属性来调用服务器和一些参数在这个参数外面callback=这个函数的名字就是你本人回调函数的名字而后前面跟上你本人的参数
<!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></head><body> <script> function fn(data) { console.log('调用胜利'); console.log(data); } </script> <script src="http://www.liulongbin.top:3006/api/jsonp?callback=fn&name=张三&age=29&sex=男"></script></body></html>JSONP的毛病就是他只反对get申请
2.
jQuery中的JSONP，具体的格局如下
<!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></head><body> <button>点击查看jsonp</button> <script src="../day01/lib/jquery.js"></script> <script> $('button').on('click', () => { $.ajax({ url : 'http://www.liulongbin.top:3006/api/jsonp?name=张三&age=29&sex=男', dataType : 'jsonp', jsonpCallback : 'fn', success : res => console.log(res) }) }) </script></body></html>在这外面datatype必须制订，而后url中没有了callback，因为他会本人随机生成一个callback，你也能够本人批改，jsonpCallback是批改回调函数名字的，jsonp是批改callback的。
在jq中jsonp的一个运行过程也要晓得一下，他其实也是依附script标签来实现的，在申请的时候他会动静生成一个script标签在header，而后申请实现又会移出这个标签。
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> <!-- 3.1插入template 筹备用到模板引擎 --> <script src="./lib/template-web.js"></script> <!-- 3.2定义ui构造 --> <script type="text/html" id="suggestList"> {{each result}} <div class="suggest-item">{{$value[0]}}</div> {{/each}} </script> <style> .suggest-list { display: none; border: 1px solid #ccc; } .suggest-item { padding-left: 5px; line-height: 30px; } .suggest-item:hover { cursor: pointer; background-color: #eee; } </style> </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 type="text" class="ipt" placeholder="请输出要搜寻的内容" /><button class="btnSearch"> 搜寻 </button> </div> <!-- 3.在搜寻框上面增加一个盒子拿来装关键字列表 --> <div class="suggest-list"> </div> </div> </div> <script src="./lib/jquery.js"></script> <script src="./lib/index.js"></script> </body></html>通过jsonp和后面说到的模板引擎来实现
$(function() { // 1.先获取输入框的文字 $('.ipt').on('keyup', function(e) { let iptText = $(this).val().trim() if (iptText == '') { // 4.搜寻关键词为空时须要暗藏搜寻列表 return $('.suggest-list').empty().hide() } else { // 2.1调用获取关键字函数 getSearchList(iptText) } }) // 2.封装获取倡议列表的函数 function getSearchList(text) { $.ajax({ url : 'http://suggest.taobao.com/sug?q='+text+'', dataType : 'jsonp', success : res => { getHtml(res) } }) } // 3.3调用函数并渲染 function getHtml(res) { if (res.result.length <= 0) { return $('.suggest-list').empty().hide() } else { let htmlStr = template('suggestList', res) console.log(htmlStr); $('.suggest-list').html(htmlStr).show() } }})4.
防抖
防抖策略就是当一个事件被触发后，提早几秒在执行回调函数，如果在这几秒内又被触发了，那么就会从新计时
次要利用场景在用户输出时间断输出一串字符，能够通过防抖策略只有在输出结束过后再去执行查问的申请这样能够无效缩小申请次数。
具体怎么来实现须要一个定时器，而后定义防抖函数，这个函数外面开启定时器获取jsonp数据渲染html都在这外面调用，在用户键盘事件这里革除定时器，输出一个革除一个输出一个革除一个，所以只有输出的够快，就达不到进入执行这个定时器的门槛，当你停下输出失常执行代码，就会开始执行定时器，去调用去申请去渲染
$(function() { // 防抖1 定义一个延时器 var timer = null // 防抖2 定义防抖函数 function debounceSearch(text) { timer = setTimeout(() => { getSearchList(text) }, 500); } // 1.先获取输入框的文字 $('.ipt').on('keyup', function(e) { // 防抖3一进来先革除定时器，按一下清一下 clearTimeout(timer) let iptText = $(this).val().trim() if (iptText == '') { // 4.搜寻关键词为空时须要暗藏搜寻列表 return $('.suggest-list').empty().hide() } else { // 2.1调用获取关键字函数 // getSearchList(iptText) // 防抖4 调用获取关键字函数由定时器执行相当于等你输完了在执行 debounceSearch(iptText) } }) // 2.封装获取倡议列表的函数 function getSearchList(text) { $.ajax({ url : 'http://suggest.taobao.com/sug?q='+text+'', dataType : 'jsonp', success : res => { getHtml(res) } }) } // 3.3调用函数并渲染 function getHtml(res) { if (res.result.length <= 0) { return $('.suggest-list').empty().hide() } else { let htmlStr = template('suggestList', res) console.log(htmlStr); $('.suggest-list').html(htmlStr).show() } }})缓存搜寻
就是当咱们输出一个数据的时候又增加一个关键字，而后删了有输出第一个关键字这个时候申请了三次，其中第一次和第三次是反复的，怎么解决
先定义一个全局的缓存对象，将搜寻后果缓存到缓存对象中，优先从缓存中获取数据.
$(function() { // 防抖1 定义一个延时器 var timer = null // 防抖2 定义防抖函数 function debounceSearch(text) { timer = setTimeout(() => { getSearchList(text) }, 500); } // 缓存1 定义一个全局空对象 var resObj = {} // 1.先获取输入框的文字 $('.ipt').on('keyup', function(e) { // 防抖3一进来先革除定时器，按一下清一下 clearTimeout(timer) let iptText = $(this).val().trim() if (iptText == '') { // 4.搜寻关键词为空时须要暗藏搜寻列表 return $('.suggest-list').empty().hide() } else { // 缓存3 当咱们输出值得时候就去判断一下有没有对象里有没有该值如果有那间接渲染就是不必再去申请数据 if (resObj[iptText]) { getHtml(resObj[iptText]) } else { // 2.1调用获取关键字函数 // getSearchList(iptText) // 防抖4 调用获取关键字函数由定时器执行相当于等你输完了在执行 debounceSearch(iptText) } } }) // 2.封装获取倡议列表的函数 function getSearchList(text) { $.ajax({ url : 'http://suggest.taobao.com/sug?q='+text+'', dataType : 'jsonp', success : res => { console.log(res); getHtml(res) } }) } // 3.3调用函数并渲染 function getHtml(res) { if (res.result.length <= 0) { return $('.suggest-list').empty().hide() } else { let htmlStr = template('suggestList', res) // console.log(htmlStr); $('.suggest-list').html(htmlStr).show() // 缓存2 所有获取数据输出结束在这里获取输出的最终值保留进对象里 resObj[$('.ipt').val().trim()] = res } }})5.
节流
节流策略就是能够缩小一段时间事件的触发频率，通过一个节流阀达到本不须要这么高的触发率，让资源空进去
<!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> <style> html,body { margin: 0; padding: 0; } img { position: absolute; } </style></head><body> <img src="./angel.gif" alt=""> <script> /* 一般版 var img = document.querySelector('img') document.onmousemove = function(e) { // console.log(11); img.style.left = e.pageX + 'px' img.style.top = e.pageY + 'px' } */ // 节流版 var img = document.querySelector('img') var timer = null document.onmousemove = function(e) { // console.log(11); if (timer) { return } else { timer = setTimeout(function() { img.style.left = e.pageX + 'px' img.style.top = e.pageY + 'px' timer = null },16) } console.log(11); } </script></body></html>