JSONP學習小記
這是我寫的第一篇博客，與其說它爲博客，這更像是我平時學習的一些小筆記，可能有些知識點會被遺漏，會有不足，請各位看官多多包涵，也請指出我的不足，共同學習，謝謝！
1.問題提出
在實習的時候，在前臺系統中使用AJAX請求後臺系統數據（這兩個系統不在同一個網域內，你可以簡單的理解爲：在www.b.com的前臺頁面中，請求www.a.com的後臺數據），這看起來好像沒什麼問題的操作，就出現了問題。請看下圖：
訪問www.b.com中的index.html頁面
報錯了：
XMLHttpRequest cannot load http://www.a.com/foo. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://www.b.com’ is therefore not allowed access.
以上的報錯是因爲我們使用AJAX進行跨域請求而導致的，瀏覽器對AJAX請求進行了限制，不允許進行跨域請求。
怎麼可以解決跨域問題呢？ 使用JSONP
2.什麼是跨域請求
在解決問題之前我們先了解了解怎樣的操作纔算是跨域請求。
| 請求端 | 被請求端 | 是否跨域 |
|---|---|---|
| www.b.com | www.a.com | 是（這就是上面圖示中出現的跨域情況） |
| www.a.com | www.a.com:81 | 是（請求的端口不一樣） |
| b.a.com | a.a.com | 是（二級域名不一樣） |
| http://www.a.com | https://www.a.com | 是（協議不一樣） |
| a.a.com | a.a.com/foo | 不是 |
以上可以看出，只要是域名不一樣或者端口號不一樣再或者協議不一樣，就會出現跨域的情況。
3.做個小實驗
先來看看下面這一段代碼：
3.1、在AServer（www.a.com）該工程中寫入這麼一段js代碼：
3.2、修改BServer（www.b.com）中index.html中的代碼：
3.3、在瀏覽器中打開BServer（www.b.com）中的index.html頁面，效果如下所示：
我們可以看到，AServer（www.a.com）中的demo.js代碼已經被執行了，再看demo.js的響應狀態碼也是200，這再次說明，www.a.com中的demo.js已經被成功請求。
從上面的小實驗中可以看出，script標籤中的src屬性，是可以支持跨域請求的。（其實不僅僅是scrpit中的src支持跨域，img，vedio，iframe等標籤中的src屬性都是支持跨域的）
在這裏你是否想到了些什麼，我們一起往下看。
4.利用script標籤中的src屬性解決跨域請求
4.1、修改一下BServer（www.b.com）中的html的代碼，使用src屬性請求後臺數據，如下所示：
4.2代碼改好了，我們再次訪問一下BServer（www.b.com）中的index.html：
噔噔噔噔，請關注一下我標紅的地方：
1、瀏覽器報錯。
2、www.a.com中的foo中的後臺數據請求成功了。
4.2.1、剛剛的瀏覽器報錯，我們看看是什麼錯：
錯誤：
Uncaught SyntaxError: Unexpected token :
這錯誤是js的語法錯誤，爲什麼會有js語法錯誤。我們在使用script標籤中的src屬性對資源進行加載，被請求的資源會被當作js腳本進行解析處理，而www.a.com中的foo返回的是一串json數據（{“name” : “www.a.com”}），所以會導致解析出錯。
4.2.2、www.a.com中的foo中的後臺數據是不是真的請求成功了，請看下圖：
以上兩圖中我們可以明確的得出，www.a.com中的foo中的後臺數據的確是請求成功了。
4.3、重新修改AServer（www.a.com）中的foo的方法,，使其返回的是一段js腳本（因爲剛剛4.2中瀏覽器報了js解析的錯誤，所以現在使後端返回js腳本，消除該錯誤）：
4.4、代碼改好了，我們再次訪問一下BServer（www.b.com）中的index.html：
頁面再次報錯：
Uncaught ReferenceError: foo is not defined at foo:1
錯誤顯示，foo這個方法沒有被定義
4.5、在BServer（www.b.com）中的index.html中添加foo的方法（因爲4.4中報錯顯示，foo方法沒有定義，所以我們在頁面中定義該方法）：
4.6、代碼改好了，我們再次訪問一下www.b.com中的index.html，一起見證奇蹟的時刻到了：
4.7小結
1、script標籤的src可以進行跨域請求、加載資源
2、對要加載的資源進行包裝，使其可以被當作js腳本進行解析。
3、定義一個回調函數，獲取傳入的數據
以上就是JSONP的工作原理。
5.化繁爲簡
5.1疑問
1、用第4小結中的方法，進行跨域請求，是不是太麻煩了？
對，是比較麻煩。
2、有沒有比較簡單的方法呢？
有，那就是通過JQuery使用JSONP。
3、JQuery使用jsonp會不會很難？
那下面就看看難不難吧。
5.2、通過JQuery使用JSONP
5.2.1、修改BServer（www.b.com）中的index.html的代碼：
簡單的修改兩處即可：
1、dataType修改爲jsonp
2、jsonpCallback設置回調函數的名字，因爲AServer（www.a.com）中返回的回調方法名是foo，所以該處填寫的回調方法名也是foo
5.2.2、重新在瀏覽器打開BServer（www.b.com）中的index.html的頁面：
好了，成功了，JQuery中使用JSONP就是這麼簡單。
5.3、修改版
5.3.1、對後臺代碼稍作修改：
5.3.2、前臺代碼也稍作修改：
5.3.3、重新在瀏覽器打開BServer（www.b.com）中的index.html的頁面：
5.3.4、看了5.3小節的代碼修改後，你會不會有疑問？
我想，你應該會問，爲什麼@RequestParam(“callback”)這段代碼獲取到的就是回調函數的名字，爲什麼是@RequestParam(“callback”)而不是@RequestParam(“xxx”)呢？？？
那麼這裏還需要介紹JQuery使用JSONP的一個參數那就是jsonp參數。what？Jsonp？感覺越說越懵逼，直接上圖吧，看圖應該可以說清楚點
看看瀏覽器的請求：
6.總結
以上就是我學習JSONP的一些個人總結，這個更像我的一些小筆記。第一次寫博客，可能很多地方表達得不是很清楚，感覺寫得有點亂，請各位看官多多包涵，哪裏寫得不對，或者需要修改，請指正指正，謝謝。