正文 

当前位置： 首页 > java > java示例

原生javascript里jsonp的实现原理

sweeeper      2022-02-07     555

关键词：

ajax不能跨域，jsonp可以跨域
跨域的核心思想：
     调用（拿到的接口），定义（jsonp核心处理器）分别是不同的script标签里面进行跨script取数据(只有get方式进行取数据 )
 
jsonp传进来的数据是{url:'',data:{
                                   cbName='cb',(根据接口制定的命名规范，有些事叫callback)
                                   wd='aaa',
                                   ......(之后的数据都要进行字符串拼接)
                              },success:function(result){}}
一：设置默认状态(容错处理)
     json=json||{};
     if(!json.url)return;
     json.data.cbName=json.data.cbName ||'cb';
     json.data=json.data||{};
二：函数名做清除缓存处理
json.data[json.data.cbName ]='show'+Math.random();    json.data[json.data.cbName]=json.data[json.data.cbName].replace('.','');
三：data数据转成字符串
     for(var name in json.data){
          arr.push(name+'='+encodeURIComponent(json.data[name]));
     }
          var str=arr.join('&');
四：定义处理数据函数返回回调函数
     window[json.data[json.data.cbName] ]=function(result){
               success&&success(result);
               oH.removeChild(oS);//数据获取到后删除掉oS
     };
五：存放数据到script ，获取调用接口
     var oH=document.getElementsByTagName('head')[0];
     var oS=document.createElement('script');
     oS.src=json.url+'?'+str;
     oH.appendChild(oS);
1.把拿到的数据存到一个script里面它的src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=abb&cb=show "这里相当于数据调用的地方
其真实面目是：show({q:"abb",p:false,s:["abb变频器","abb电机","abb变频器配件","abby","bbs","abb式的词语","abbyy","abba","abb接触器","abbs建筑论坛"]});
 
2.定义
function show(json){
     json.s//取到的数据是一个数组：["abb变频器","abb电机","abb变频器配件","abby","bbs","abb式的词语","abbyy","abba","abb接触器","abbs建筑论坛"]
}
function jsonp(url//数据形参){
     //存数据到地址到新的script
     var oH=document.getElementsByTagName('head')[0];
     var oS=document.createElement('script');
     oH.appendChild(oS);
}
当某个事件触发的时候调用：
     jsonp(url//数据地址实参);
 
1.拿到jsonp接口
     拿到百度搜素接口的步骤
          1.F12
          2.Network==找开头是su的文件，并且关键词是相应的
          4.删除没有用的信息
wd             word          关键字
cb             callback     回调函数
          6.地址放入浏览器得出的数据是：
               show({q:"abb",p:false,s:["abb变频器","abb电机","abb变频器配件","abby","bbs","abb式的词语","abbyy","abba","abb接触器","abbs建筑论坛"]});
               jsonp提供的数据接口相当于一个调用函数
               所以需要在跨域的时候先定义一个函数show
          地址接口相当于是获取了这些数据
 
注意：1.人家给你接口你才能用
  2.jsonp的回调函数，必须是全局的
 
转自：http://www.cnblogs.com/shiyou00/p/5533486.html

原生javascript实现jsonp的封装

...应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。我们可以动态的去创建一个script标签，利用他的src属 查看详情

javascript原生实现jsonp(代码片段)

查看详情

基于原生js的jsonp方法的实现

基于原生JS的jsonp方法的实现jsonp，相信大家并不陌生，是在js异步请求中解决跨域的方法之一，原理很简单，有不清楚的同学可以google下，这里就补详细解释了。在Jquery库中，jQuery直接封装有jsonp的方法，很简便，只需在ajax请求... 查看详情

jsonp的原理和实现

什么是JSONP？javascript高级程序设计中是这样介绍jsonp的:jsonp是JSONwithpadding(填充式JSON或参数式JSON)的简写，是应用JSON的一种新方法，在后来的Web服务中非常流。jsonp看起来与json差不多，只不过是被包含在函数调用中的json。jsonp由... 查看详情

jsonp原理及实现(代码片段)

...这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用不会返回任何的状态码，需要后端配合返回指定格式的数据4实现一个简单的JSONP实现，其实就是拼接URL，然后将动态添加一个script元素到头部。functi... 查看详情

原生javascript实现懒加载

源码工程下载地址：https://github.com/blff122620/jsLibary/lazyLoad.html实现原理就是通过scroll事件判断元素是否已经进入viewport导入lazyLoad.js使用inViewPort(item)即可判断item是否在视口里，然后继续进行自己的逻辑就行了<!DOCTYPEhtml><htmll... 查看详情

javascript的jsonp

 目录索引：一、AJAX的概念二、POST&&GET三、原生实现AJAX简单示例　　3.1实现代码　　3.2重点说明四、框架隐藏域　　4.1基本概念　　4.2后台写入脚本　　4.3JS主动判断Iframe的改变　　4.4表单提交数据实战五、JQ的AJAX　　... 查看详情

使用chrome开发者工具研究javascript里函数的原生实现(代码片段)

AsthesizeofmyblogChromeDevelopmentTooltipsusedinmydailyworkturnstobelargerIcreateaseparateposttorecorddownthissmalltip.Areyoucuriousaboutthe“nativecode”here?AtleastIam.TodayIfindthattheProfilestabinCh 查看详情

jsonp原理及实现跨域方式

...，它是由Netscape提出的一个著名的安全策略。现在所有支JavaScript的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开 查看详情

原生js实现简单jsonp

...跨域请求外链的JS文件，利用这一特性实现数据传输。用原生JS实现JSONP非常简单，无非几点：1）定义一个函数，用于处理接收到的跨域数据。2）生成一个dom节点(script节点)，然后src属性上面记入发送的目的URL以及参数。3）在跨... 查看详情

jsonp跨域的原理解析（转）

JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-OriginPolicy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问... 查看详情

前端知识点总结（javascript篇）(代码片段)

...JSONP和document.domain的不同及优劣，以及HTML5的跨域方案）JavaScript数据类型JavaScript字符串转化JSONP原理及优缺点XMLHttpRequest事件委托前端模块化（AMD和CommonJS的原理及异同，seajs和requirejs的异同和用法）sessionCookieseaJS的用法及原理，... 查看详情

前端跨域之jsonp实现原理及.net下jsonp的实现

...其拼接成js函数调用返回到前端即可完成跨域请求。前端实现代码：<!DOCTYPEhtml><htmllang="en"><head><met 查看详情

jsonp原理，怎样实现跨域？

什么是JSONP？ JSONP和JSON的关系又是什么呢？JSON(JavaScriptObjectNotation)和JSONP(JSONwithPadding)虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非... 查看详情

jsonp实现跨域请求

...求方式是有特定应用场景的，并不是跨域都能用这种。1.javascript方式< 查看详情

ajaxjsonp实现过程

原生JavaScript实现AJAX、JSONPl跨域的问题?域：域名?跨域请求（访问）：一个域名下的文件请求另外一个域名下的资源，就产生了跨域l跨域的解决?Jsonp:jsonpaddingl<script>标签?src的作用：加载（包含指定的外部文件）–可以跨域包... 查看详情

jsonp原理及实现(代码片段)

JSONP原理及实现1概述2优点3缺点4实现1概述JSONP是是一种跨域通信的手段，它可以让网页从别的域名（网站）中获取数据，即跨域读取数据，兼容性好，但是只能处理GET请求。它的原理是利用script标签的src属... 查看详情

原生javascript+canvas实现图片局部放大器

类似操作像素的博主还写过一篇文章：使用canvas给图片增加滤镜文章目录1.效果图2.原理2.1.拖拽放大2.2.hover放大3.代码1.效果图有两种放大模式，分别为拖拽放大以及单纯的hover放大，已下是效果图：2.原理两种局部... 查看详情