jsonp的原理，封装jsonp的方法介绍
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jsonp的原理，封装jsonp的方法介绍，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2470字，纯文字阅读大概需要4分钟。
内容图文
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的方法介绍的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的jsonp的原理，封装jsonp的方法介绍全部内容，希望文章能够帮你解决jsonp的原理，封装jsonp的方法介绍所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。