JSONP跨域获取JSON数据（含jQuery方法）

来源：互联网发布：linux 修改文件时间戳编辑：程序博客网时间：2024/05/19 16:21

首先我要强调JSONP和AJAX没有半毛钱关系，别把他们混淆！！！只不过他们都是从后台获取数据的方法！

前言：

说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？第二个是跨域的需求如何解决？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串或者用XML来描述，跨域可以通过服务器端代理来解决。

但到目前为止最被推崇或者说首选的方案还是用JSON来传数据，靠JSONP来跨域。

JSON和JSONP虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方，JSON是地下党们用来书写和交换情报的“暗号”，而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。看到没？一个是描述信息的格式，一个是信息传递双方约定的方法。（这段话来自网络）;

下面来个小案例，通过JSONP跨域从后台获取数据。

案例一：

如下，这是后台给你的一个注册流程说明，你需要按照他提供的接口，和需要的数据，不过这些都是你们事先协商好的。

[html] view plain copy
登录注册流程说明：  
  
服务地址：  http://10.0.164.251/courseB/jQuery/Day6/user.php  
  
请求方式为 POST 请求  
登录注册使用jsonp  
jsonp的参数名称为：userCallback  
登录或注册  不管 成功与失败 均以弹框方式告知用户  
  
登录接口----  
  
参数名称/值：  
type : login  
username : 输入框的用户名  
password : 输入框的密码  
  
返回数据格式：  
成功：{  
    status:0,  
    msg : "login success"  
}  
  
失败：{  
    status : 1,  
    msg : "username or password is error"  
}  
  
注册接口----  
  
参数名称/值：  
type : reg  
username : 输入框的用户名  
password : 输入框的密码  
  
返回数据格式：  
成功：{  
    status:0,  
    msg : "register success"  
}  
  
失败：{  
    status : 2,  
    msg : "register error"  
}  

我们已登入为例（用的jQuery）：

[html] view plain copy
    $(".Login").on("click",function(ev){  
        ev.preventDefault();  
        var use=$('.user').val();//这些是我HTML页面上表单数据  
        var pwd=$(".pass").val();         
            $.ajax({    
        url: "http://10.0.164.251/courseB/jQuery/Day6/user.php",   //后台给的接口  
        type:"post",<span style="white-space:pre">                      </span>//请求方式  
        dataType: "jsonp",<span style="white-space:pre">                    </span>//<span style="font-family: Verdana, "Lucida Grande", Arial, Helvetica, sans-serif;">jsonp的参数名称为：userCallback（和后台商量好的）</span>  
        jsonp: "userCallback",<span style="white-space:pre">                    </span>  
        jsonpCallback: "data",      <span style="white-space:pre">              </span>  
        data: {<span style="white-space:pre">                           </span>//后台需要的数据  
        <span style="white-space:pre">  </span>type:"login",  
            username:use,  
            password:pwd  
        },  
        success: test  
    })  
})  
  
function test(res) {  
    console.log("jsonpCallback输出："+ res)<span style="white-space:pre">          </span>后台返回的数据  
}  

案例二：

下面用原生JS来JSON获取数据：

前端页面：

[html] view plain copy
<script type="text/javascript">  
    document.querySelector("button").onclick=function(){  
        alert();  
        document.forms["myForm"].submit;  
    }  
var btn = document.querySelector("button");  
//Ajax与JSONP没有任何关系  
//但不成文的说法都叫做原生Ajax使用JSONP  
//JSONP 一种被创造出来的数据交换方法  
//利用script标签的src属性没有跨域限制的特点  
//在使用JSONP时，要求前端与后台必须统一回调函数名称  
//例如在前端传送到后台 参数为：?a=b&c=d&callback=fun  后台必须解析参数名为callback的值  

[html] view plain copy
//并且输出fun(...)  
//前端也必须构建一个函数名为 function fun(...){...}的函数 用于响应后台的输出  
btn.onclick = function() {  
    var url = "http://10.0.164.235/domain/ajax/jsonp_myCallback.php?user=admin&pass=123&myCallback=myFun";  

[html] view plain copy
//特别注意，地址后面接的是一个函数，和后台商量好的函数  
    var script = document.createElement("script");  
    script.setAttribute("src", url);  
    document.getElementsByTagName("head")[0].appendChild(script);  
    //添加后就可以移除,  
    document.getElementsByTagName("head")[0].removeChild(script);  
}  
  
function myFun(res) {  
    console.log("回调函数被调用了");  
    console.log(res);<span style="white-space:pre"> </span>//这个函数里的参数是从后台传入过来的数据。  
}  
</script>  

看看后台的操作，PHP写的，虽然和js语法不同，但基本也能看懂。

[php] view plain copy
<?php  
//获取回调函数的名称  
$cbName = $_GET["callback"]; //callback必须与前端名字一样  
$user = $_GET["user"];  
$pass = $_GET["pass"];  
  
$arr = array("user" => "我的用户名是{$user}", "pass" => "我的密码是：{$pass}");  
  
echo $cbName . "(" . json_encode($arr) . ")";<span style="white-space:pre">     </span>//这里就类似于调用之前商量好的函数，而传递的参数则是后台给你的数据。  
?>  

（我吃酸萝卜新浪微博http://www.weibo.com/wcslb ---李帅醒著）

0 0