簡單透徹理解JSONP原理及使用

首先提一下json這個概念，json是一種輕量級的資料傳輸格式，被廣泛應用於當前web應用中。json格式資料的編碼和解析基本在所有主流語言中都被實現，所以現在大部分前後端分離的架構都以json格式進行資料的傳輸。

jsonp就是用來解決跨域請求問題的，那麼具體是怎麼實現的呢？

ajax請求受同源策略影響，不允許進行跨域請求，而script標籤src屬性中的鏈結卻可以訪問跨域的js指令碼，利用這個特性，服務端不再返回json格式的資料，而是返回一段呼叫某個函式的js**，在src中進行了呼叫，這樣實現了跨域。

1.首先看下ajax中如果進行跨域請求會如何。

前端**在域www.practice.com下面，使用ajax傳送了乙個跨域的get請求

gojsonptitle>
head>
function jsonhandle(data)
script>
script>
$(document).ready(function()
});});
script>
body>
html>

後端php**放在域www.practice-zhao.com下，簡單的輸出一段json格式的資料

jsonhandle()

當訪問前端** 時 chrome報以下錯誤

提示了不同源的url禁止訪問

2.下面使用jsonp，將前端**中的ajax請求去掉，新增了乙個script標籤，標籤的src指向了另乙個域www.practice-zhao.com下的remote.js指令碼

gojsonptitle>
head>
function jsonhandle(data)
script>
script>
script>
body>
html>

這裡呼叫了跨域的remote.js指令碼，remote.js**如下：

jsonhandle()

也就是這段遠端的js**執行了上面定義的函式，彈出了提示框

3.將前端**再進行修改，**如下：

gojsonptitle>
head>
function jsonhandle(data)
script>
script>
$(document).ready(function());
script>
body>
html>

這裡動態的新增了乙個script標籤，src指向跨域的乙個php指令碼，並且將上面的js函式名作為callback引數傳入，那麼我們看下php**怎麼寫的：

<?php 
$data = array(
'age' => 20,
'name' => '張三',
);$callback = $_get['callback'];
echo $callback."(".json_encode($data).")";
return;

php**返回了一段js語句，即

jsonhandle()

此時訪問頁面時，動態新增了乙個script標籤，src指向php指令碼，執行返回的js**，成功彈出提示框。

所以jsonp將訪問跨域請求變成了執行遠端js**，服務端不再返回json格式的資料，而是返回了一段將json資料作為傳入引數的函式執行**。

4.最後jquery提供了方便使用jsonp的方式，**如下：

gojsonptitle>
head>
script>
$(document).ready(function()
});});
script>
body>
html>