JSONP跨域獲取JSON數據（含jQuery方法）

首先我要強調JSONP和AJAX沒有半毛錢關係，別把他們混淆！！！只不過他們都是從後臺獲取數據的方法！

前言：

說到AJAX就會不可避免的面臨兩個問題，第一個是AJAX以何種格式來交換數據？第二個是跨域的需求如何解決？這兩個問題目前都有不同的解決方案，比如數據可以用自定義字符串或者用XML來描述，跨域可以通過服務器端代理來解決。

但到目前爲止最被推崇或者說首選的方案還是用JSON來傳數據，靠JSONP來跨域。

JSON和JSONP雖然只有一個字母的差別，但其實他們根本不是一回事兒：JSON是一種數據交換格式，而JSONP是一種依靠開發人員的聰明才智創造出的一種非官方跨域數據交互協議。我們拿最近比較火的諜戰片來打個比方，JSON是地下黨們用來書寫和交換情報的“暗號”，而JSONP則是把用暗號書寫的情報傳遞給自己同志時使用的接頭方式。看到沒？一個是描述信息的格式，一個是信息傳遞雙方約定的方法。（這段話來自網絡）;

下面來個小案例，通過JSONP跨域從後臺獲取數據。

案例一：

如下，這是後臺給你的一個註冊流程說明，你需要按照他提供的接口，和需要的數據，不過這些都是你們事先協商好的。

登錄註冊流程說明：

服務地址：  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）：

    $(".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獲取數據：

前端頁面：

<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的值

//並且輸出fun(...)
//前端也必須構建一個函數名爲 function fun(...){...}的函數 用於響應後臺的輸出
btn.onclick = function() {
    var url = "http://10.0.164.235/domain/ajax/jsonp_myCallback.php?user=admin&pass=123&myCallback=myFun";

//特別注意，地址後面接的是一個函數，和後臺商量好的函數
    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
//獲取回調函數的名稱
$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         ---李帥醒著）