一文看懂JSONP原理和應用

Posted on by

什麼是JSONP

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

那麼JSONP是什麼呢？

首先拋出瀏覽器同源策略這個概念，為瞭保證用戶訪問的安全，現代瀏覽器使用瞭同源策略，即不允許訪問非同源的頁面，詳細的概念大傢可以自行百度。這裡大傢隻要知道，在ajax中，不允許請求非同源的URL就可以瞭，比如www.a.com下的一個頁面，其中的ajax請求是不允許訪問www.b.com/c.php這樣一個頁面的。

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

JSONP原理

ajax請求受同源策略影響，不允許進行跨域請求，而script標簽src屬性中的鏈接卻可以訪問跨域的js腳本，利用這個特性，服務端不再返回JSON格式的數據，而是返回一段調用某個函數的js代碼，在src中進行瞭調用，這樣實現瞭跨域。

JSONP具體實現

1.ajax中如果進行跨域請求會如何

前端代碼在域www.practice.com下面，使用ajax發送瞭一個跨域的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.practice-zhao.com/student.php?id=1",
			type: "json",
			success : function(data) {
				jsonhandle(data);
			}

		});
	});
</script>
</body>
</html>

後端PHP代碼放在域www.practice-zhao.com下，簡單的輸出一段json格式的數據

jsonhandle({

“age” : 15,

“name”: “John”,

當訪問前端代碼http://www.practice.com/gojsonp/index.html 時 chrome報以下錯誤

提示瞭不同源的URL禁止訪問

2.使用JSONP，將前端代碼中的ajax請求去掉

添加瞭一個script標簽，標簽的src指向瞭另一個域www.practice-zhao.com下的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.practice-zhao.com/remote.js"></script>
</body>
</html>

這裡調用瞭跨域的remote.js腳本，remote.js代碼如下：

jsonhandle({
	"age" : 15,
	"name": "John",
})

也就是這段遠程的js代碼執行瞭上面定義的函數，彈出瞭提示框

3.將前端代碼再進行修改

代碼如下：

<!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.practice-zhao.com/student.php?id=1&callback=jsonhandle";
		var obj = $('<script><\/script>');
		obj.attr("src",url);
		$("body").append(obj);
	});
</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({
	"age" : 15,
	"name": "張三",
})

此時訪問頁面時，動態添加瞭一個script標簽，src指向PHP腳本，執行返回的JS代碼，成功彈出提示框。
所以JSONP將訪問跨域請求變成瞭執行遠程JS代碼，服務端不再返回JSON格式的數據，而是返回瞭一段將JSON數據作為傳入參數的函數執行代碼。

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.practice-zhao.com/student.php?id=1",
			dataType: "jsonp",
			jsonp:"callback", //請求php的參數名
			jsonpCallback: "jsonhandle",//要執行的回調函數
			success : function(data) {
				alert("age:" + data.age + "name:" + data.name);
			}

		});
	});
</script>
</body>
</html>

以上就是一文看懂JSONP原理和應用的詳細內容，更多關於JSONP原理和應用的資料請關註WalkonNet其它相關文章！

推薦閱讀：

    None Found