位置: IT常识 - 正文

ajax - 终结篇jsonp,防抖节流(ajax json请求)

编辑:rootadmin
今天是我们最后一天ajax的学习,这次学完总可以去vue了吧,我不信还有什么拦路石,先不说其他的先看看今天的内容。 1. 首先是同源策略,什么叫做同源? 如果两个页面的协议、域名、端口都相同的话,我们将这两个页面为同源。 那么什么同源策略呢? 是浏览器提供的一个安全功能,如果说两个页面不同源,那么A ...

推荐整理分享ajax - 终结篇jsonp,防抖节流(ajax json请求),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:ajax jsonp请求,ajax json解析,ajax+json,ajax如何解析json数据,有几种方法,ajax+json,ajax jsonp请求,ajax处理json,ajax处理json,内容如对您有帮助,希望把文章链接给更多的朋友!

今天是我们最后一天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请求

ajax - 终结篇jsonp,防抖节流(ajax json请求)

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>
本文链接地址:https://www.jiuchutong.com/zhishi/311930.html 转载请保留说明!

上一篇:[Chrome插件开发]监听网页请求和响应(chrome插件开发拦截ajax)

下一篇:java基础-泛型与正则表达式(java泛型的定义和使用)

  • 强制关闭程序快捷键ctrl加什么(强制关闭程序快捷键c)

    强制关闭程序快捷键ctrl加什么(强制关闭程序快捷键c)

  • 养老金怎么查询(养老金怎么查询交了多少年)

    养老金怎么查询(养老金怎么查询交了多少年)

  • 钉钉最多几个人同时开摄像头(钉钉最多几个人开摄像头)

    钉钉最多几个人同时开摄像头(钉钉最多几个人开摄像头)

  • 电脑怎样关机才是正确的(电脑怎样关机才最好)

    电脑怎样关机才是正确的(电脑怎样关机才最好)

  • 苹果x屏幕乱跳通病(iphone屏幕乱跳失灵)

    苹果x屏幕乱跳通病(iphone屏幕乱跳失灵)

  • 天猫618促销多少天(天猫618促销多少金额)

    天猫618促销多少天(天猫618促销多少金额)

  • 蝶式键盘和剪刀式键盘的区别(蝶式键盘和剪刀哪个好)

    蝶式键盘和剪刀式键盘的区别(蝶式键盘和剪刀哪个好)

  • gsm和cdma有什么区别(gsm与cdma)

    gsm和cdma有什么区别(gsm与cdma)

  • 苹果6s plus一直耳机模式是什么原因(苹果6s plus一直转圈圈)

    苹果6s plus一直耳机模式是什么原因(苹果6s plus一直转圈圈)

  • 抖音进入直播失败是什么原因(抖音直播间进去失败是怎么回事?)

    抖音进入直播失败是什么原因(抖音直播间进去失败是怎么回事?)

  • 华为红包提醒功能在哪里设置(华为手机,红包提醒)

    华为红包提醒功能在哪里设置(华为手机,红包提醒)

  • 拼多多的保证金是多少(拼多多的保证金可以随时退吗)

    拼多多的保证金是多少(拼多多的保证金可以随时退吗)

  • iqoopro4g和5g区别(iqoo pro4g和5g区别地方在哪里)

    iqoopro4g和5g区别(iqoo pro4g和5g区别地方在哪里)

  •  v1962a是什么型号(v1962a是什么型号)

    v1962a是什么型号(v1962a是什么型号)

  • 怎么取消鼠标滚轮缩放(怎么取消鼠标滚轮)

    怎么取消鼠标滚轮缩放(怎么取消鼠标滚轮)

  • amdfx6300相当于i几(amdfx6300相当于)

    amdfx6300相当于i几(amdfx6300相当于)

  • 超6类和7类网线的区别(超6类和7类网线哪个好)

    超6类和7类网线的区别(超6类和7类网线哪个好)

  • word怎么弄竖着的字体(word怎么弄竖着的标题)

    word怎么弄竖着的字体(word怎么弄竖着的标题)

  • win10睡眠按啥键唤醒(win10的睡眠模式的作用)

    win10睡眠按啥键唤醒(win10的睡眠模式的作用)

  • 怎么删除淘宝人生账单(怎么删除淘宝人生第一笔订单)

    怎么删除淘宝人生账单(怎么删除淘宝人生第一笔订单)

  • 开启原彩显示会耗电吗(原彩打开屏幕有啥变化)

    开启原彩显示会耗电吗(原彩打开屏幕有啥变化)

  • 怎么改变网页字体粗细(怎么改网页的字)

    怎么改变网页字体粗细(怎么改网页的字)

  • aesir是什么牌子(Aesir是什么牌子)

    aesir是什么牌子(Aesir是什么牌子)

  • 手机自动拦截电话怎么取消(手机自动拦截电话在哪里找)

    手机自动拦截电话怎么取消(手机自动拦截电话在哪里找)

  • 苹果otg在哪里设置

    苹果otg在哪里设置

  • 索尼xperia1有呼吸灯吗

    索尼xperia1有呼吸灯吗

  • 腾讯会员怎么申请退款(腾讯会员怎么申请退款安卓手机)

    腾讯会员怎么申请退款(腾讯会员怎么申请退款安卓手机)

  • ChatGPT强化学习大杀器——近端策略优化(PPO)

    ChatGPT强化学习大杀器——近端策略优化(PPO)

  • 进料加工为什么要差额确认收入呢
  • 冲减以前年度的成本会计分录
  • 什么叫欠账
  • 员工可以签订两份劳动合同吗
  • 合同负债里面含增值税吗
  • 保险服务保费会计分录
  • 托收承付和委托收款的含义和相同之处
  • 营改增对电信业的影响及对策
  • 代扣代缴的增值税可以作为进项税抵扣吗
  • 企业与个人租赁合同范本
  • 地税收的其他政府基金计入科目及收益
  • 支付土地出让金怎样做账
  • 损益表和利润表的关系
  • 外购库存商品
  • 总资产净利率计算
  • 作废报表会影响企业信用吗
  • 推迟确认收入的方法
  • 一次性工伤补偿金公司不给怎么办
  • win11如何更改开始菜单位置
  • win7无法使用管理员权限
  • 存货跌价准备是备抵科目吗
  • 资产负债表的资产总额怎么看
  • 华为鸿蒙harmonyos官网4.0升级
  • 预计负债属于什么类
  • 收到供应商现金回扣
  • 票据融资都有哪些方式
  • 电商快递费怎么算
  • 土地使用税怎么交税
  • 解决问题
  • mcu version
  • 事业单位资产管理中存在的问题及整改措施
  • 利用php实现一个数组
  • 深究Python中的asyncio库-shield函数
  • 律师费开票税费谁承担
  • 个人所得税法实施细则2023
  • 企业以银行存款购买股票
  • 代垫费用开票明细怎么写
  • 帝国cms真的很好用
  • 想要上海名媛群群号
  • 社保可以补交吗
  • 怎么看企业用哪种软件
  • 发票系统技术维护费
  • 应付利息什么时候确认收入
  • 报税残疾人保障费怎么算
  • sqlldr并发
  • 固定资产大修理和更新改造的区别
  • 公益事业捐赠有哪些税收优惠政策
  • 实收资本没有实缴,财务报表里面怎么写
  • 公司租赁的车辆发生的费用都可以报销吗?
  • 如何计提本年度工资总额
  • 补发工资怎么补发
  • 车辆保险都入什么
  • 递延所得税资产和负债账务处理
  • 付国外客户佣金怎么代扣代缴增值税
  • 事业单位用电收费标准
  • 先开票后发货是什么意思
  • 营业外支出为负数原因
  • 餐饮食材成本高怎么形容
  • 高新企业研发费用占比
  • 日记账的设置和登记
  • mysql多个group by
  • win8开机logo
  • pe工具箱怎么用
  • windows10开机黑屏
  • win10 屏幕键盘
  • win7系统如何清理c盘空间
  • canvas动态绘制简单gif
  • bootstrap treeview 扩展addNode方法动态添加子节点的方法
  • Jquery ajax加载等待执行结束再继续执行下面代码操作
  • 不错的意思
  • 详解如何使用pcem安装windows 98 csdn
  • unity编译速度吃什么硬件?
  • 浅谈建筑地基基础加固施工技术亲
  • 手机截取电脑屏幕
  • JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
  • 怎么查看keytab文件
  • 南通 医疗
  • 四川灵活就业医保每月返多少钱
  • 怎么查询购置税交了没有
  • 税务主管机关有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设