[前端]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
            }
        });

只有让自己变得优秀,才有资格对这个世界指手画脚。