AJAX跨域調用相關知識-CORS和JSONP
1、什么是跨域
跨域問題產生的原因，是由於瀏覽器的安全機制，JS只能訪問與所在頁面同一個域（相同協議、域名、端口）的內容。
但是我們項目開發過程中，經常會遇到在一個頁面的JS代碼中，需要通過AJAX去訪問另一個服務器並返回數據，這時候就會受到瀏覽器跨域的安全限制了。
這里要注意，如果只是通過AJAX向另一個服務器發送請求而不要求數據返回，是不受跨域限制的。瀏覽器只是限制不能訪問另一個域的數據，即不能訪問返回的數據，並不限制發送請求。
我們接下來就為大家講解最常見的跨域AJAX調用的解決方案，首先我們先准備一個測試環境：
一個可以正常啟動的Tomcat，默認端口8080；
下載示例代碼包ajax-cors-jsonp.zip，解壓到Tomcat的webapps下，示例代碼包中有test-client和test-service兩個文件夾，分別包含我們示例的客戶端和服務端代碼；
模擬一個多域環境，修改“C:\Windows\System32\drivers\etc\hosts”（如果文件不能編輯保存，需要在文件屬性中去掉只讀），在文件內容后面追加：
127.0.0.1 www.aaa.com
127.0.0.1 www.bbb.com
啟動Tomcat后，在瀏覽器中，分別測試
http://www.aaa.com:8080/test-client/index.html
http://www.bbb.com:8080/test-client/index.html
兩個頁面是相同的，只是地址不同，都是在點擊按鈕后通過AJAX去訪問http://www.bbb.com:8080/test-service/add.jsp。但是從www.aaa.com:8080訪問時就返回了error，即瀏覽器不允許在www.aaa.com:8080的頁面中通過AJAX獲取來自www.bbb.com:8080服務器的返回數據。
大家觀察一下Tomcat控制台，會發現從www.aaa.com:8080訪問時，雖然返回了錯誤，但服務端代碼其實還是執行了。這個現象驗證了跨域是可以發請求的，但是瀏覽器出於安全的原因不讓我們在JS中獲取返回數據。
測試案例很簡單，就是傳入a=15&b=10兩個參數，返回兩個數據的和25，代碼參見：
test-client/index.html
test-service/add.jsp
2、CORS方案
本節介紹的CORS（Cross-Origin Resource Sharing）方案是W3C在2014年正式推出的跨域訪問方案，是真正的官方解決方案。這個方案的實現非常簡單，只需要在服務端返回的頭部信息中標明是否允許跨域訪問，以及允許哪些域訪問即可。
接下來我們訪問
http://www.aaa.com:8080/test-client/index_cors.html
成功了！！！我們來看代碼中有什么改變？
index_cors.html與index.html的差異僅是ajax調用的地址從add.jsp換成了add_cors.jsp，我們再來看add.jsp和add_cors.jsp的區別，會發現只增加了一行代碼：
response.setHeader(“Access-Control-Allow-Origin”, “http://www.aaa.com:8080″);
如果不限定跨域訪問的地址，可以把域名部分設置為*：
response.setHeader(“Access-Control-Allow-Origin”, “*”);
小結：
CORS方案實現非常簡單，只要服務在頭部標明允許跨域訪問即可。但是這個方案由於推出時間較晚，所以IE9及以下瀏覽器並沒有支持這個機制。
IE9及以下瀏覽器在安全設置里控制是否允許跨域數據訪問：
默認是上面的選項是禁用的，需要手動啟用。同時，由於jQuery自動判斷並認為當前瀏覽器不支持跨域，所以我們還需要用一行代碼讓jquery支持跨域ajax：
$.support.cors = true;
3、JSONP方案
JSONP並不是一個官方協議，其本質上是一種巧妙的跨域獲取JSON數據的編程技巧。
我們首先來看實現，JSONP在實現上要比CORS稍微麻煩一點點，前后端要有點配合。
首先運行http://www.aaa.com:8080/test-client/index_jsonp.html，這個頁面里面AJAX后端請求換成了add_jsonp.jsp。
接下來我們先解析代碼：
index_jsonp.html中，我們在$.ajax的參數上有點變化：
type改成了get，JSONP只支持get請求，這個參數在JSONP場景下其實是可以忽略的，即使改成post，也會依然按get模式；
dataType改成了jsonp，這個參數標明要采用JSONP方式進行調用；
jsonp: “x5callback”，這個參數其實是一個約定的參數名，用於后端按照這個參數名獲取一個回調函數名；
jsonpCallback：這個參數用來指定上面那個參數對應的回調函數名，如果不指定，jQuery會自動生成一個隨機的函數名。
add_jsonp.jsp中，我們在最后數據返回部分做了一點處理：
首先我們按照約定的參數名，獲取回調函數名；
String callbackName = request.getParameter(“x5callback”);
返回的內容格式也不再僅是一個JSON數據，而是一個JS的函數調用形式：回調函數名(JSON數據)
String jsonpResult = String.format(“%s(%s)”, callbackName, jsonResult);
前后端需要做的工作就是這么多，但是這時候初學者一定覺得有點迷惑了，這個回調函數名到底是干什么用的？我們並沒有定義什么回調函數啊？它是怎么工作的呢？
我們簡單的加一個調試很快就可以解開這個疑惑，在add_jsonp.jsp最終返回的數據中加一個debugger：
String jsonpResult = String.format(“debugger;%s(%s)”, callbackName, jsonResult);
接下來我們F12啟動瀏覽器開發者工具，點擊按鈕后就會進入JS調試。
這時候我們看到返回的是一個JS函數的調用，函數名是隨機的，函數的參數就是那個我們構造的JSON。接下來，我們在控制台輸入window.函數名，會發現這個函數是真實存在的！！！
這是怎么回事呢？？？原來jQuery所謂的JSONP模式，其實是動態創建了一個<script>標簽，標簽的src屬性指向一個URL（http://www.bbb.com:8080/test-service/add_jsonp.jsp?x5callback=jQuery18203749695811420679_1439276096319&a=15&b=10&_=1439276101932），這個URL里面除了包含我們的a和b兩個參數，還包含一個x5callback參數，參數的值就是那個隨機的函數名。這個script標簽動態插入到當前頁面后，自然就會將我們返回的內容當做JS加載到當前頁面（這里我們返回的是JS，瀏覽器是不阻止的哦，頁面可以從任何域加載JS腳本）：
debugger;jQuery18203749695811420679_1439276096319({“sum”: 25})
加載后，按照JS的特性，這些代碼會立即執行。而jQuery在這個之前已經動態創建了一個以隨機函數名為名稱的全局函數，用於接收返回數據，再往后jQuery通過一系列的邏輯代碼最終把返回值給到了我們的success回調函數中。
有關jQuery動態創建<script>相關的邏輯，大家可以在我們案例自帶的jquery-1.8.2.js的8270行加上斷點進行跟蹤。
小結：
JSONP是以動態創建script標簽為基礎的一種編程技巧，來實現跨域獲取JSON數據。
支持目前所有瀏覽器，只是在實現方式上需要前后端代碼有一點約定配合。
但是，要注意由於JSONP是以script標簽的src屬性加載的，因此參數會收到URL長度的限制，只能適用於傳入參數內容不多的場景。
4、總結
CORS方案實現簡單，同時支持GET和POST請求，但是不支持IE9及以下瀏覽器。這時看官要問了，這么多瀏覽器不支持，這技術怎么用啊？手機啊！目前市面上所有的手機瀏覽器是全部支持CORS的，如果是為手機提供跨域服務CORS就夠了。
JSONP方案實現需要前后端配合，支持GET請求，支持所有瀏覽器，只是傳入的參數內容受限於URL長度限制。
引自：http://wex5.com/cn/ajax-cors-jsonp/
下載資源：ajax-cors-jsonp.zip