计算机网络之JSONP跨域
- JSONP跨域实现原理
- 百度联想词跨域实现
一、JSONP跨域实现原理
1.Web页面使用<script>引入JS文件时不受同源策略的影响。准确的说,所有拥有src属性的标签都不受同源策略的影响,都具备跨域的能力。比如script、img、iframe。
2.JS脚本被加载后都会被浏览器内核从上到下解析执行一遍。
3.但是因为网络请求是浏览器内核异步执行,无法掌握异步加载的脚本的加载状况。所以,需要将资源传入一个立即执行的回调函数。
4.在全局JS资源上定义一个回调函数,用来处理传入的资源。
5.在通过src获取数据的时候,将全局JS上的回调函数名作为请求变量值传入。
6.后台将数据与回调函数名拼接成一个立即执行的字符串形式,当数据全部传送到后执行。
//处理jsonp数据的回调函数 var doJSONP = function(data){console.log(data.a); }//采用添加script获取外部资源 functionjsonp(){var value = this.value;var oScript = document.createElement("script"); oScript.src= "http:xxx.com/index.php?cb=doJSONP"; document.body.appendChild(oScript);oScript.remove(); }
在后台数据拼接成字符串形式:
'doJSONP({a:"123"})'
二、百度联想词跨域实现
<input type="" name="" class="jsonpInput" /> <ul class="assList"></ul> <script >//添加事件的公共方法functionaddEvent(elem,type,handle){if(elem.addEventListener){elem.addEventListener(type,handle,false); }else if(elem.attachEvent){elem.attachEvent('on' + type, function(){handle.call(elem); });}else{type= type.substring(0,1).toUpperCase()+type.substring(1);elem['on' + type] =handle;}}//回调函数(拿到数据新增列表项)var doJSONP = function(data){var s = data.s ||[];assList.innerHTML="";if(s.length > 0){try{s.forEach(function(ele,index){var aNoHTML = document.createElement("a");aNoHTML.href= "https://www.baidu.com/s?wd="+ele;aNoHTML.target= "_blank";aNoHTML.innerHTML='<li>' + ele + '</li>';addEvent(aNoHTML,"mouseup",function(){assList.style.display= "none";});assList.appendChild(aNoHTML);if(index > 3){var a = aaaaa; //引用try报错机制跳出循环throw new Error("ending");}});}catch(e){}assList.style.display= "block";}else{assList.style.display= "none";assList.innerHTML="";}}//获取input、ul标签var jsonpInput = document.getElementsByClassName("jsonpInput")[0];var assList = document.getElementsByClassName("assList")[0];//添加input事件addEvent(jsonpInput,"input",function(){var value = this.value;var oScript = document.createElement("script");oScript.src= "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + value +"&cb=doJSONP";document.body.appendChild(oScript);oScript.remove();});</script>
百度的连接可能会修改。
转载于:https://www.cnblogs.com/ZheOneAndOnly/p/10694890.html
计算机网络之JSONP跨域相关推荐
- .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器...
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
- jsonp跨域ajax跨域get方法
原理: 就是利用<script >标签没有跨域限制的,从而达到与第三方网站通讯的目的.当需要通讯时,本站脚本创建一个<script>标签,src地址指向第三方网站的的一个网址. ...
- jsonp跨域实现单点登录,跨域传递用户信息以及保存cookie注意事项
网站A:代码:网站a的login.html页面刷新,使用jsonp方式将信息传递给b.com的login.php中去,只需要在b.com中设置一下跨域以及接收参数,然后存到cookei即可, 注意:网 ...
- JSONP跨域jQuery处理整理(附天气数据实例)
写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨 ...
- jsonp 跨域原理详解
转载至:http://zha-zi.iteye.com/blog/1975116 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制 ...
- jsonp跨域原理_【网站技术解读①】Javascript实现跨域请求
推荐一个读者做的不错的编程学习网站: 网站:潜安 域名:http://www.qianani.com 另外将会不定期推送近期网站用到的一些技术,讲一些核心原理,今天为第一篇 问题由来: 最近一直在优化 ...
- jsonp跨域访问服务
前段时间在做产品开发的时候,需要与公司网站那边进行交互,我们所开发的产品上线后是放在一个域名下,公司网站那块是在另一个域名下,这样在页面中调用 网站那边的接口时就存在跨域的问题,当时为了不修改网站那边 ...
- JSONP跨域的原理解析
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略). ...
- 跨域 (1) jsonp 跨域
jsonp 的例子 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
最新文章
- 谷歌官方TensorFlow开发者认证来了,吴恩达:学我的课,报名费五折
- Ubuntu 18.04 如何添加或删除 SWAP 交换分区
- 【5分钟搞定】如何将py打包成exe可执行文件
- APC UPS报错一例
- 客户端的socket是否需要bind?
- 【Blog.Core重要升级】:封装服务扩展层
- 想不到吧?数学还有如此妙用!
- Linux命令替换字符串
- io_service线程安全队列效率
- 让无代理设置参数的软件通过代理服务器联网
- PN5321(PN5321A3HN/C106)国产替代,FSVP532软硬件兼容,支持A卡,B卡,FeliCa卡,支持ISO/IEC18092,ECM340点对点
- TCP、UDP、CoAP、LwM2M、MQTT简单对比
- 【深入浅出flink】第7篇:从原理剖析flink中所有的重分区方式keyBy、broadcast、rebalance、rescale、shuffle、global、partitionCustom
- 计算机指数函数表示法,指数函数e^x的快速计算方法
- mac 更新系统时间
- 用Java swing写的一个音乐播放器的个性化界面实现作业(只有界面!)
- [Java大厂必备面试题] 点滴促就辉煌, 每日三题【Day14】: 数据库8
- Fastapi学习笔记(一)
- 图谱实战 | 再谈图谱表示:图网络表示GE与知识图谱表示KGE的原理对比与实操效果分析...
- FTP文件夹打开错误,Windows无法访问此文件夹的问题处理方法
热门文章
- liunx服务器间拷贝文件,linux 不同服务器之间拷贝文件
- Java动态规划走金字塔_【动态规划基础】数字金字塔
- vue 给取data值_一些Vue相关的面试题,帮助求职者提升竞争力
- c# 链接mongDB集群实战开发3
- 到底什么是集群分布式
- 用mysql制作一个登录_连接数据库制作一个简单的登入页面1
- mysql命令 show_mysql show 相关命令
- python逻辑判断_return逻辑判断表达式
- 系统学习机器学习之神经网络(三)--GA神经网络与小波神经网络WNN
- 2022年考研计算机组成原理_7 输入输出系统