大佬教程收集整理的这篇文章主要介绍了每日学一点-jsonp（ajax跨域请求），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
之前对于ajax跨域，只是了解一点，仅仅局限用jsop去解决，但不知道jsonp原理是什么，该怎么用，所以抽个时间好好埋这个坑
JSON和JSONP的区别
2.JSONP一种非官方跨域数据交互协议，是由程序员在日积月累中的出来的方法
JSON的格式我就不说了，@R_616_9111@:'jquery37'}
之前看网上的关于JSONP的一大片的自己表示看不懂，找了一张图，觉得挺好的。先看一下图。
解释一下JSOP原理这张图的：
（1）在前端上，创建一个script,src需要跨域的地址
http://crossdomain.com/services.PHP是需要跨域的地址。后边跟着？表示链接还带着参数，参数名称是callbask,参数值是jsonpCallBACk
<Meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <script type="text/javascript"> function@H_489_51@ jsonpCallBACk(result) { //alert(result); for@H_489_51@(var@H_489_51@ i in@H_489_51@ result) { alert(i@H_489_51@+@H_489_51@"@H_489_51@:@H_489_51@"@H_489_51@+@H_489_51@result[i]);//循环输出a:1,b:2,etc. @H_489_51@ } } var@H_489_51@ JSONP@H_489_51@=@H_489_51@document.createElement(@H_489_51@"@H_489_51@script@H_489_51@"@H_489_51@); JSONP.type@H_489_51@=@H_489_51@"@H_489_51@text/javascript@H_489_51@"@H_489_51@; JSONP.src@H_489_51@=@H_489_51@"@H_489_51@http://crossdomain.com/services.PHP?callBACk=jsonpCallBACk@H_489_51@"@H_489_51@; document.getElementsByTagName(@H_489_51@"@H_489_51@head@H_489_51@"@H_489_51@)[@H_489_51@0@H_489_51@].appendChild(JSONp); </script>
（2）后台接到这个请求后，获取参数名称和参数值，（已PHP为例）
后台返回的返回的格式：参数值（json） jsonpCallBACk({'name':'jquery37'}) 参数值作为函数包裹从后台返回过来的json或者array
<?PHP //服务端返回JSON数据
$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); $result=json_encode($arr); //echo $_GET['callBACk'].'("Hello,World!")'; //echo $_GET['callBACk']."($result)"; //动态执行回调函数
$callBACk=$_GET['callBACk']; echo $callBACk."($result)";
（3）前台定义函数。函数名称是jsonpCallBACk（）{}
（4）获取数据后删除动态创建的script。函数名称是jsonpCallBACk（）{}
最后附上附上自己写的AJAX+JSONP的跨域
$(function(){ $.ajax({ type: "get",async: false,url: "http://www.runoob.com/try/ajax/jsonp.PHP",dataType: "jsonp",jsonp: "jsoncallBACk",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callBACk)
jsonpCallBACk:"callBACkFunction",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(json){ console.info(json); },error: function(xhr){ console.info(xhr); } }); })
以上是大佬教程为你收集整理的每日学一点-jsonp（ajax跨域请求）全部内容，希望文章能够帮你解决每日学一点-jsonp（ajax跨域请求）所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。