什么是JSONP
首先提一下JSON這個概念，JSON是一種輕量級的數(shù)據(jù)傳輸格式，被廣泛應(yīng)用于當(dāng)前Web應(yīng)用中。JSON格式數(shù)據(jù)的編碼和解析基本在所有主流語言中都被實(shí)現(xiàn)，所以現(xiàn)在大部分前后端分離的架構(gòu)都以JSON格式進(jìn)行數(shù)據(jù)的傳輸。
那么JSONP是什么呢？
首先拋出瀏覽器同源策略這個概念，為了保證用戶訪問的安全，現(xiàn)代瀏覽器使用了同源策略，即不允許訪問非同源的頁面，詳細(xì)的概念大家可以自行百度。這里大家只要知道，在ajax中，不允許請求非同源的URL就可以了，比如www.a.com下的一個頁面，其中的ajax請求是不允許訪問www.b.com/c.php這樣一個頁面的。
JSONP就是用來解決跨域請求問題的，那么具體是怎么實(shí)現(xiàn)的呢？
JSONP原理
ajax請求受同源策略影響，不允許進(jìn)行跨域請求，而script標(biāo)簽src屬性中的鏈接卻可以訪問跨域的js腳本，利用這個特性，服務(wù)端不再返回JSON格式的數(shù)據(jù)，而是返回一段調(diào)用某個函數(shù)的js代碼，在src中進(jìn)行了調(diào)用，這樣實(shí)現(xiàn)了跨域。
JSONP具體實(shí)現(xiàn)
1.首先看下ajax中如果進(jìn)行跨域請求會如何。
前端代碼在域www.下面，使用ajax發(fā)送了一個跨域的get請求
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
function jsonhandle(data){
alert("age:" + data.age + "name:" + data.name);
}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type : "get",
async: false,
url : "http://www./student.php?id=1",
type: "json",
success : function(data) {
jsonhandle(data);
}
});
});
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
后端PHP代碼放在域www.下，簡單的輸出一段json格式的數(shù)據(jù)
jsonhandle({
"age" : 15,
"name": "John",
})
當(dāng)訪問前端代碼http://www./gojsonp/index.html 時 chrome報(bào)以下錯誤
提示了不同源的URL禁止訪問
2.下面使用JSONP，將前端代碼中的ajax請求去掉，添加了一個script標(biāo)簽，標(biāo)簽的src指向了另一個域www.下的remote.js腳本
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
function jsonhandle(data){
alert("age:" + data.age + "name:" + data.name);
}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript" src="http://www./remote.js"></script>
</body>
</html>
這里調(diào)用了跨域的remote.js腳本，remote.js代碼如下：
jsonhandle({
"age" : 15,
"name": "John",
})
也就是這段遠(yuǎn)程的js代碼執(zhí)行了上面定義的函數(shù)，彈出了提示框
3.將前端代碼再進(jìn)行修改，代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
function jsonhandle(data){
alert("age:" + data.age + "name:" + data.name);
}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
var url = "http://www./student.php?id=1&callback=jsonhandle";
var obj = $('<script><\/script>');
obj.attr("src",url);
$("body").append(obj);
});
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
這里動態(tài)的添加了一個script標(biāo)簽，src指向跨域的一個php腳本，并且將上面的js函數(shù)名作為callback參數(shù)傳入，那么我們看下PHP代碼怎么寫的：
<?php
$data = array(
'age' => 20,
'name' => '張三',
);
$callback = $_GET['callback'];
echo $callback."(".json_encode($data).")";
return;
PHP代碼返回了一段JS語句，即
jsonhandle({
"age" : 15,
"name": "張三",
})
此時訪問頁面時，動態(tài)添加了一個script標(biāo)簽，src指向PHP腳本，執(zhí)行返回的JS代碼，成功彈出提示框。
所以JSONP將訪問跨域請求變成了執(zhí)行遠(yuǎn)程JS代碼，服務(wù)端不再返回JSON格式的數(shù)據(jù)，而是返回了一段將JSON數(shù)據(jù)作為傳入?yún)?shù)的函數(shù)執(zhí)行代碼。
4.最后jQuery提供了方便使用JSONP的方式，代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type : "get",
async: false,
url : "http://www./student.php?id=1",
dataType: "jsonp",
jsonp:"callback", //請求php的參數(shù)名
jsonpCallback: "jsonhandle",//要執(zhí)行的回調(diào)函數(shù)
success : function(data) {
alert("age:" + data.age + "name:" + data.name);
}
});
});
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
|
