跨域這個問題在工作偶爾能夠碰到，但是一旦跨域傳送資料就成了問題，所以就用到了jsonp，今天我們來聊聊jsonp。
jsonp是一種為了解決跨域的資料交換問題，從而衍生出來的資料交換協議。
因為瀏覽器的「同源策略「，也就是瀏覽器限制指令碼程式只能和同協議、同網域名稱、同埠的指令碼進行互動，但是在資料交換的過程中，經常會產生跨域的資料交換，所以人們想到了乙個方法來解決這個問題， 原因是有一些標籤是可以跨域執行的，跨域還能執行的標籤例如img，script標籤，以大家常用img標籤為例，就算是別的**的url在咱們的**也是可以用的，script標籤同理。
如果是在本站內，我們用ajax把資料提交給後台就可以了，但是如果不是在本站呢？跨域無許可權訪問的。例如，www.uw3c.com要直接傳送資料給www.baidu.com是不可以的。
沒有半毛錢關係，json是一種資料格式而jsonp是一種跨域的資料交換協議，但是目前為止使用jsonp返回的資料格式最推薦使用json。
動態的插入乙個
alert.js檔案的**如下：
1
2
3
4
functionjsonp()
jsonp();
那麼就算是來自不同**的js檔案，頁面中也絕對會彈出提示框。
(2) 那麼，如果我這個插入在頁面中的外站的指令碼（alert.js）是個呼叫函式的方法呢？
1
2
3
4
5
6
7
alert.js檔案的**如下：
1
jsonp();
就相當於呼叫了本頁面的"jsonp()"方法。必然會在頁面中彈出提示框"uw3c"。
(3) 那麼，如果我通過外站的指令碼（alert.js）往頁面裡面傳個資料呢？
1
2
3
4
5
6
7
alert.js檔案的**如下：
1
jsonp("uw3c");
我通過外站指令碼，呼叫頁面中的「jsonp」函式，並且傳有實參(uw3c)。頁面必然也會彈出提示框"uw3c"。 所以，我們就可以通過這種方法來給頁面中傳入外站的資料，這就是jsonp的基本原理。
但是，大家肯定會問了，這樣的確是可以傳送資料，但是每個函式的名稱都不一樣啊，要是給多個**傳資料豈不是也要寫多個檔案檔案？
有點後台基礎的同鞋肯定能想到，根據鏈結中傳遞的引數動態生成這個檔案，用引數告訴後台這個函式叫什麼名字不就行了嗎：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
說到這裡，應該能理解jsonp的原理了吧，但是有些同鞋平日過度依賴jquery，看js有點費勁，那怎麼辦？
事實證明jquery的確是個值得依賴的外掛程式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
大家注意到了嗎，我在ajax的引數url中並沒有寫js函式的名稱uw3cjsonp，這是應為jquery自動給生成了，怎麼樣，爽吧！
但是大家注意，在jquery封裝的jsonp中，type只能為"get"。
雖然jquery把jsonp封裝到了ajax中，但是jsonp跟ajax根本不是一回事。 ajax的是通過xmlhttprequest獲取非本頁內容，但是jsonp是通過動態插入script標籤用js獲取資料，是有本質區別的。
好了，以上就是本片文章的全部內容，希望可以讓大家充分的理解jsonp的功能和原理，以及和ajax的區別。
源引：
jsonp解決ajax跨域問題
利用jsonp解決ajax跨域問題 至於success裡面的操作可以忽略 某工程下ajax請求 var isvisible true function getlog var startpage data.startpage var endpage data.endpage 拼接 導航 按鈕 和 資料...
用JSONP解決ajax跨域問題
jsonp json with padding 要點 1.script標籤 2.用script標籤載入資源是沒有跨域問題的 概要 在資源載入進來之前先定義乙個函式，這個函式接受乙個引數 資料 函式裡面利用這個引數做一些事情。然後在需要的時候通過script標籤載入對應遠端檔案資源，當遠端的檔案資源被...
jsonp解決跨域訪問的問題
jsonp json with padding 是json的一種 使用模式 可用於解決主流瀏覽器的跨域資料訪問的問題。主要用於解決ajax的跨域訪問 由於瀏覽器的同源策略 瀏覽器最基本的安全功能 該策略會阻止不同源之間的互動,同源 同協議，同網域名稱，同埠 核心思想 瀏覽器雖然有同源策略，但是 sr...