[前端]jsonp
Posted 啊啦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[前端]jsonp相关的知识，希望对你有一定的参考价值。
jsonp
之前清蒸了几只ajax螃蟹,味道不错,不过呢?螃蟹虽好,肉却太少哦!
ajax出现,解决了页面不刷新的情况下与后台进行通讯与数据交换,但是有一个致命的缺陷,他是不能跨域的。
跨域： <==慨念问题点左边
总之端口号那个冒号前面的任何一个地方不一样都是跨域请求。
我们知道 img标签的src script标签的src 是可以进行跨域请求数据的,于是不知是哪位大神,异想天开曲线救国,使用script标签进行后台的数据获取,
当然这个script标签是我们用js脚本动态生成的,举个栗子
首先我准备一个写好的脚本
1.js
funDemo({"result":"远程数据"});
再写一个html文件
1.html
<!DOCTYPE html > <head> <title>1</title> <script type="text/javascript"> var funDemo= function(data){ alert( data.result); }; </script> <script type="text/javascript" src="http://aaa.com/1.js"></script> </head> <body> </body> </html>
function funDemo(data){alert(data.result);} 函数这么声明也是一样的!!!
其实就是在html文件上声明一个名字叫,funDemo的函数,里面有一个参数
然后,执行了一个远程的(跨域的)js代码,调用了这个函数,远程的js提供数据,作为参数
funDemo({"result":"远程数据"});
那么新问题来了,虽然能这样获取到远程的数据,但是这个函数名必须与后台的函数名保持一致,解决方案是在src的后面提供一个函数名的参数,
后台的程序根据函数名动态的生成这个js文件
1.html 修改
<script type="text/javascript" src="http://aaa.com/1.php?&callback=funDemo"></script>
后台的话可以考虑用字符串拼接的方式来返回这个js
1.php
<?php header(\'Content-Type:application/x-javascript\'); $callback=$_REQUEST[\'callback\']; echo "function $callback(data){alert(data.result);}" >
我稀烂的PHP也不知道有没有写对=.=
这样就大功告成了。
jQuery里面的jsonp是放在ajax里面的，但是真心半毛钱关系木有呀！！
螃蟹可以吃，虾也可以吃，都是清蒸，一样的做法。但是他们真心不是一种东西！！！！
附赠ajax中使用jsonp
$.ajax({ type : "get", url : "1.php", dataType : "jsonp", jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback) jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名 success : function(json){ //do something }, error:function(){ //do something } });
以上是关于[前端]jsonp的主要内容，如果未能解决你的问题，请参考以下文章