首先我要強調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"
}
 

	$(".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",//請求方式
        dataType: "jsonp",//jsonp的引數名稱為：userCallback（和後臺商量好的）
 

        jsonp: "userCallback",
        jsonpCallback: "data",      
        data: {//後臺需要的資料
        type:"login",
            username:use,
            password:pwd
        },
        success: test
    })
})

function test(res) {
    console.log("jsonpCallback輸出："+ res)後臺返回的資料
}

案例二：

前端頁面：

<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);//這個函式裡的引數是從後臺傳入過來的資料。
}
</script>

<?php
//獲取回撥函式的名稱
$cbName = $_GET["callback"]; //callback必須與前端名字一樣
$user = $_GET["user"];
$pass = $_GET["pass"];

$arr = array("user" => "我的使用者名稱是{$user}", "pass" => "我的密碼是：{$pass}");

echo $cbName . "(" . json_encode($arr) . ")";//這裡就類似於呼叫之前商量好的函式，而傳遞的引數則是後臺給你的資料。
?>