AJAX和JSONP的學習一二

我在網上找視訊學習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>
           

我是在學AJAX時看到的JSONP，但是回過頭再看感覺JSONP并沒有用到AJAX的核心：XMLHttpRequest對象！JSONP僅是用一種技巧達到了跨域通路伺服器并進行相關處理的目的。要說相似之處，就是JSONP也運用的GET請求的方式，即在位址後面顯式地增加查詢字元串，是以應該注意，JSONP是不能進行POST跨域請求的。這應該需要AJAX用其他跨域方式來解決了吧（目前鄙人還不了解...）！

幾點需要注意：

1.最下面那個script标簽位址指向的是一個伺服器端處理需求的位址，卻傳回了一個可執行js檔案，最終結果就是回調用了上面script标簽定義了的jsonpCallback函數。

2.jsonp和ajax不是被包含的關系，jsonp是一個技巧政策，ajax是一個具有XHR對象的技術！

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

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