ajax笔记五

一同源策略和跨域

二 JSONP

(1)实现原理

一同源策略和跨域

（1）同源

如果两个页面的协议，域名和端口都相同,则两个页面具有相同的源。
例如，下表给出了相对于http://www.test.com/index.html页面的同源检测:

同源策略(英文全称Same origin policy) 是浏览器提供的一个安全功能。
同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
通俗的理解:浏览器规定, A网站的JavaScript,不允许和非同源的网站C之间，进行资源的交互,例如:
①无法读取非同源网页的Cookie、LocalStorage 和IndexedDB
②无法接触非同源网页的DOM

③无法向非同源地址发送Ajax请求

（2）跨域
同源指的是两个URL的协议、域名、端口-致,反之，则是跨域。
出现跨域的根本原因:浏览器的同源策略不允许非同源的URL之间进行资源的交互。

浏览器对跨域请求的拦截：

二 JSONP

(1)实现原理

由于浏览器同源策略的限制，网页中无法通过Ajax请求非同源的接口数据。但是<script>标签不受浏览器同源策略的影响，可以通过src属性,请求非同源的js脚本。因此，JSONP 的实现原理,就是通过<script>标签的src属性,请求跨域的数据接口，并通过函数调用的形式,接收跨域接口响应回来的数据。

(2)实现一个简单的JSONP

定义一个success回调函数：

 <script>
    function abc(data) {
      console.log('拿到了Data数据:')
      console.log(data)
    }
  </script>

通过<script>标签，请求接口数据：

<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=abc&name=ls&age=30"></script>

注意：由于JSONP是通过<script> 标签的srC属性,来实现跨域数据获取的，所以，JSONP只支持GET数据请求，不支持POST请求。

注意: JSONP和Ajax之间没有任何关系，不能把JSONP请求数据的方式叫做Ajax,因为JSONP没有用到XMLHttpRequest这个对象。

(3)jQuery中的JSONP

  $.ajax({
        url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
        // 代表我们要发起JSONP的数据请求
        dataType: 'jsonp',
        success: function (res) {
          console.log(res)
        }
      })

默认情况下，使用jQuery发起JSONP请求，会自动携带一个callback=jQueryxxx的参数，jQueryxxx是随机生成的回调函数名称

在使用jQuery发起JSONP请求时,如果想要自定义JSONP的参数以及回调函数名称，可以通过如下两个参数来指定:

 $.ajax({
        url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
        // 代表我们要发起JSONP的数据请求
        dataType: 'jsonp',
        jsonp: 'callback',
        jsonpCallback: 'abc',
        success: function (res) {
          console.log(res)
        }
      })

jQuery中的JSONP,也是通过<script>标签的src属性实现跨域数据访问的，只不过，jQuery 采用的是动态创建和移除<script>标签的方式，来发起JSONP数据请求。
●在发起JSONP请求的时候，动态向<header>中append一个<script> 标签;
●在JSONP请求成功以后，动态从<header>中移除刚才append进去的<script>标签;

三淘宝搜索

（1）获取用户输入的搜索关键词
为了获取到用户每次按下键盘输入的内容，需要监听输入框的keyup事件,示例代码如下:

//监听文本框的keyup事件
$('#ipt').on('keyup', function () {
//获取用户输入的内容
var keywords = $ (this).val().trim()
//判断用户输入的内容是否为空
if (keywords.length <= 0) {
return
}
// TODO: 获取搜索建议列表
})

(2)封装getSuggestList函数
将获取搜索建议列表的代码，封装到getSuggestList函数中，示例代码如下:

function getSuggestList(kw) {
$.ajax({
//指定请求的URL地址，其中，q是用户输入的关键字
url:'https://suggest.taobao.com/sug?q='+kw,
指定要发起的是JSONP 请求
dataType: 'jsonp'
//成功的回调函数
success: function(res) { console.log(res) }
})
}

(3)渲染建议列表的UI结构
1)定义搜索建议列表

<div class= "box">
<!-- tab栏区域-->
<div class="tabs"></div>
<!--搜索区域-->
<div class="search-box"></div>
<!--搜索建议列表-->
<div id="suggest-list"> </div>
</div>

2)渲染模板结构

<!--模板结构-->
<script type="text/html" id="tpl-suggestList">
 <!--result是res中返回装着数据的数组 -->
{{each result}}
<div class="suggest-item">{{$value[0]}}</div>
{{/each}}
</script>

3）定义渲染模板结构的函数

//渲染建议列表
function renderSuggestList(res) {
//如果没有需要渲染的数据，则直接
return
if (res. result. length <= 0) {
return $('#suggest-list').empty().hide ()
}
//渲染模板结构
var htmlStr = template (' tpl-suggestList'，res) 
$('#suggest-list').html(htmlStr).show()
}

4）搜索关键词为空时隐藏搜索建议列表

 $('#ipt').on('keyup', function () {
       
        var keywords = $(this).val().trim()
        if (keywords.length <= 0) {
          return $('#suggest-list').empty().hide()
        }
        getSuggestList(keywords)
       
      })

搜索建议列表的美化：

#suggest-list {
  border: 1px solid #ccc;
  display: none;
}

.suggest-item {
  line-height: 30px;
  padding-left: 5px;
}

.suggest-item:hover {
  cursor: pointer;
  background-color: #eee;
}

5）输入框的防抖

防抖策略是当事件被触发后,延迟n秒后再执行回调，如果在这n秒内事件又被触发,则重新计时。

用户在输入框中连续输串字符时，可以通过防抖策略,只在输入完后，才执行查询的请求,这样可以有效减少请求次数，节约请求资源;

实现输入框的防抖：

var timer = null        // 1.防抖动的timer
function debounceSearch (keywords) { // 2.定义防抖的函数
timer = setTimeout (function() {
//发起JSONP请求
getSuggestList(keywords)
}， 500) 
}
$('#ipt').on('keyup', function() { // 3.在触发keyup 事件时，立即清空timer
clearTimeout (timer)
// ...省略其他代码
debounceSearch(keywords)
})

6)缓存搜索的建议列表

1 定义全局缓存对象

 var cacheObj={ }

2.将搜索结果保存到缓存对象

//渲染建议列表
function renderSuggestList(res) {
// ... 省略其他代码
//将搜索的结果，添加到缓存对象中
var k = $('#ipt') .val() . trim()
cacheObj [k] = res
}

3.优先从缓存中获取搜索建议

//监听文本框的keyup 事件
$('#ipt').on('keyup', function() {
// ... 省略其他代码
//优先从缓存中获取搜索建议
if (cacheObj [keywords]) {
return renderSuggestList (cacheObj[keywords])
//获取搜索建议列表
debounceSearch(keywords)
})

四节流

节流策略可以减少段时间内事件的触发频率。
节流的应用场景：
①鼠标连续不断地触发某事件(如点击) , 只在单位时间内只触发一次;
②懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率,而不必去浪费CPU资源

节流案例-鼠标跟随效果

（1）渲染UI结构并美化样式

<!--UI结构-->
<img src="./assets/angel.gif" alt="" id="angel" />
/*Css样式*/
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
#angel {
position: absolute ;
}

不使用节流时实现鼠标跟随效果

$ (function() {
//获取图片元素
var angel = $('#angel')
//监听文档的mousemove 事件
$ (document).on ('mousemove'，function(e) {
//设置图片的位置
$(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')
})
})

使用节流优化鼠标跟随效果:

$ (function() {
var angel = $('#ange1')
var timer = null // 1.预定义一个timer节流阀
$ (document) . on( 'mousemove', function(e) {
if (timer) { return } // 3. 判断节流阀是否为空，如果不为空，则证明距离上次执行间隔不足16毫秒
//节流阀为空时
timer = setTimeout (function() {
$ (angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')
timer = null // 2. 当设置了鼠标跟随效果后，清空timer节流阀，方便下次开启延时器:
}，16)
})

节流阀为空，表示可以执行下次操作;不为空，表示不能执行下次操作。
当前操作执行完，必须将节流阀重置为空,表示可以执行下次操作了。

每次执行操作前，必须先判断节流阀是否为空。

防抖与节流，前者是王者英雄回城，被频繁触发它只有一次生效；后者是射击子弹，被频繁触发它能减少事件触发的频率。

javascript servlet

ajax笔记五

一 同源策略和跨域

二 JSONP

(1)实现原理

(2)实现一个简单的JSONP

(3)jQuery中的JSONP

三 淘宝搜索

四 节流

节流案例-鼠标跟随效果

相关文章

一同源策略和跨域

三淘宝搜索

四节流