我在網上找視訊學習AJAX的應用，因為確實這個技術能帶來很多極致的使用者體驗，所有我覺得有必要深入瞭解瞭解。AJAX即是非同步的請求，然後進行服務端處理，再返回給客戶端相應的資料，學到後面老師提出一個問題，就是AJAX的請求是不能跨域的，比如你的網頁是www.abc.com/index.html，若在這個網頁中進行AJAX請求，那麼請求的url域名必須是www.abc.com，後面的地址無所謂（例如：www.abc.com/server/index.php），如果域名變了(例如：www.edf.com/server/index.php)，就會發生安全問題，這緣於同源策略限制。解決辦法就是JSONP。

JSONP之所以能解決跨域，就是利用了script標籤的src屬性，也就是說，我們寫一個script標籤，引一個src地址，這個地址的域名其實無所謂，比如很常見的我們不引入本地jquery檔案，而去引入其他伺服器的檔案（例如引入百度靜態資源庫中的jquery檔案：<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>），這就相當於跨域請求資源了。

現在我們再來確認下我們需要解決的問題：當我們在AJAX中進行請求外部伺服器url（即跨域）時，會受到限制，而我們需要達到的目的是，跨域傳送一個GET請求，併發送一些搜尋欄位（比如：www.edf.com/server/index.php?staffNumber=001），發給伺服器端進行處理後再返回給我們想要的資料（一般常用JSON資料，如：{"name":"Aierwa","number":"001","age":24}），有了這個資料，我們在JS程式碼中就可以操作這個JSON物件了！思路就是這樣，讓我們看看JSONP是怎麼辦到的吧！

第一步：跨域傳送一個GET請求：在當前頁面的js程式碼區下面再寫一個script標籤：<script type="text/javascript" src="www.edf.com/server/index.php?staffNumber=001&callback=jsonpCallback"></script>,這裡相當於傳遞了兩組關鍵字，staffNumber是查詢欄位，callback是待會用到的回撥函式。

第二步：傳送給伺服器端並處理：php裡面就可以通過$_GET["staffNumber"]和$_GET["callback"]，兩個的值分別對應"001"和"jsonpCallback"，處理的結果需要最終拼接成一個字串：'jsonpCallback({"name":"Aierwa","number":"001","age",24})'，請注意，這個字串就是返回給客戶端的資料了，可以發現，這是一個JS語句的函式呼叫:jsonpCallback(data)，其中data引數就是這裡的JSON物件。

第三步：客戶端處理返回的資料（建立介面對接第二部的回撥函式）：上一步已經完成資料返回並做好了一個函式呼叫的介面了，現在我們需要在當前的html頁面的js程式碼區（即位於第一步建立的script標籤上面的那個script裡面），function jsonpCallback(data){    alert(data.name) }，OK，大功告成！

直觀一點的程式碼如下(當前HTML頁面內)：

<script>
    function jsonpCallback(data){
        alert(data.name);  //Aierwa
    }
</script>
<script type="text/javascript" src="www.edf.com/server/index.php?number=001&callback=jsonpCallback"></script>

幾點需要注意：

1.最下面那個script標籤地址指向的是一個伺服器端處理需求的地址，卻返回了一個可執行js檔案，最終結果就是回撥用了上面script標籤定義了的jsonpCallback函式。

2.jsonp和ajax不是被包含的關係，jsonp是一個技巧策略，ajax是一個具有XHR物件的技術！

3.關於jquery使用jsonp跨域請求，見參考資料。

參考：http://kb.cnblogs.com/page/139725/