本文主要介绍了JSONP的原理、理解和实例，并结合实例分析了JSONP的基本概念、原理、理解和使用技巧。有需要的可以参考一下。
本文介绍了JSONP的原理、理解和实例。分享给你，供你参考，如下：
1.什么是jsonp
1.1同源策略
由于浏览器同源策略的限制，XmlHttpRequest只允许请求当前源的资源(相同的域名、协议、端口)。
-1)jsonp只支持get请求。
-2)不受同源策略限制，兼容性好。它不需要XMLHttpRequest(ActiveX)支持，通过js回调函数返回结果。
-3)无法解决不同域的两个页面之间的js调用问题
2. jsonp 原理
动态添加一个脚本标签，在get链接上发送回调函数名给服务器，获取回调函数名。此函数名返回的js函数(汇编函数)的json数据作为函数的实际参数传入。返回的数据是JS函数在前端调用回调函数(json数据传入)执行回调函数。
3.实例
先说服务器要返回的数据表单，如下图。php thinphp框架写的访问URL是
http://91hx.xicp.cn:8989/Service/Validata/testJsonP?callback后面的名字=jsonpCallback callback要传到服务器后端，组装成一个js回调函数，这样前端的json数据就会作为回调函数的参数传入来获取数据。
公共函数testJsonP(){
$ JSON name=I(' get . callback ')；//获取URL上的回调名，即获取jsonpCallback
$a=[name='张三'，sex='男'，msg='成功返回！'];//数据数组
$ JSON=JSON _ encode($ a)；//转换为json数据
echo $jsonname。'('.$json。');'；//正确的格式应该是jsonp回调({'name':' \ u5f20 \ u4e09 '，' sex':' \ u7537 '，' msg ':' \ u8fd 4 \ u56de \ u 6210 \ u529f \ uff 01 ')不要忘记分号；这是一个返回的js函数。前台必须有这个函数名。
}
提示：上面的关联数组$a=array( 'msg'='成功返回！')
访问URL http://localhost:63343/H5/jsonp . html动态添加脚本标签，调用src中的回调函数jsonpCallback()。callback=jsonpCallback的名字就是jsoncallback的名字。
！文档类型html
超文本标记语言
头部语言
meta charset='UTF-8 '
标题/标题
/头
身体
脚本类型='文本/javascript '
函数jsoncallback(date){
console.log(日期)；
警报(日期)；
alert(date . msg)；
}
var script=document . createelement(' script ')；
script . src=' http://91 hx . xicp . cn:8989/Service/Validata/test jsonp？callback=jsoncallback '；
document . body . insert before(script，document . body . first child)；
/脚本
/body
/html
我们可以在浏览器中使用Google here直接检查数据访问是否正确，切换到网络选项卡就可以看到生成的访问地址，点击然后
如下图，点击左边的链接切换到响应，可以看到响应的数据。应该和前端写的函数名一致。里面的json数据就是那个函数的参数。别忘了有分号。
我们在前端有Console.log数据，我们还可以查看它并切换到Console选项卡。
对更多JavaScript相关内容感兴趣的读者可以查看我们的专题：《JavaScript中ajax操作技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》和《JavaScript数学运算用法总结》。
希望这篇文章对大家的JavaScript编程有所帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。