jsonp的原理，封装jsonp的方法介绍

来源：动视网责编：小采时间：2020-11-27 20:18:30

jsonp的原理，封装jsonp的方法介绍

jsonp的原理，封装jsonp的方法介绍:jsonp的原理：就是利用<script>标签没有跨域的漏洞来达到与第三方通讯的目的，当需要通讯时，本站脚本创建一个script标签，地址指向第三方API 地址并提供一个回调函数来接收数据，第三方产生相应为json数据的包装，这样浏览器会调用callbac

推荐度：

点击下载本文 文档为doc格式

导读jsonp的原理，封装jsonp的方法介绍:jsonp的原理：就是利用<script>标签没有跨域的漏洞来达到与第三方通讯的目的，当需要通讯时，本站脚本创建一个script标签，地址指向第三方API 地址并提供一个回调函数来接收数据，第三方产生相应为json数据的包装，这样浏览器会调用callbac

jsonp的原理：

　　　　就是利用<script>标签没有跨域的“漏洞”来达到与第三方通讯的目的，当需要通讯时，本站脚本创建一个script标签，地址指向第三方API

　　地址并提供一个回调函数来接收数据，第三方产生相应为json数据的包装，这样浏览器会调用callback()函数并传递解析后的json对象为参数。

jsonp的核心：

　　　　动态创建添加script标签来调用服务器提供的js脚本。

别的不多说，直接上代码：

　　HTML代码;

<body>2 
<input type="text" name="text" id="text" value="" />3 
<div id="div"></div>4 
</body>

　　js代码：

 <script> 2 //封装一个jsonp方法 3 
 function jsonp(json){ 4 //判断路径是否正确 5 
 if(!json.url){ 6 alert("请输入正确路径"); 7 
 return; 8 } 9 //设置默认值10 
 json.data = json.data || {};11 json.cbName = json.cbName || 'cb'; 
 var fnName = "show" + Math.random();15 fnName = fnName.replace(".","");16 
 window[fnName] = function(json2){17 json.success && json.success (json2);18 
 oHeade.removeChild(oScript);19 }20 json.data[json.cbName] = fnName;21 
 var arr = [];22 for(name in json.data){23 
 arr.push(name + '=' + json.data[name]);24 } 
 //创建script标签27 
 var oScript = document.createElement("script");28 
 //设置script的src属性29 
 oScript.src = json.url + '?' + arr.join("&");30 
 //获取head标签31 
 var oHeade = document.getElementsByTagName("head")[0];32 
 //将动态创建的script标签添加到head中33 
 oHeade.appendChild(oScript);34 } 
 window.onload = function(){38 
 var oText = document.getElementById("text");39 
 oText.onkeyup = function(){40 
 jsonp({41 
 url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',42 data:{43 
 wd:oText.value44 },45 
 success:function(json){46 
 var oDiv = document.getElementById("div").innerHTML = json.s;47 } 
 } 
 </script>

这就封装好了一个jsonp方法。。

jsonp的原理，封装jsonp的方法介绍

推荐度：

点击下载本文 文档为doc格式

标签：方法原理封装

热门焦点

jsonp的原理，封装jsonp的方法介绍

jsonp的原理，封装jsonp的方法介绍

jsonp的原理，封装jsonp的方法介绍

最新推荐

猜你喜欢

热门推荐