快捷導(dǎo)航

一文看懂JSONP原理和應(yīng)用

更新時(shí)間：2021年04月21日 14:20:50 作者：云中的魚(yú)

這篇文章主要介紹了一文看懂JSONP原理和應(yīng)用，對(duì)JSONP感興趣的同學(xué)，可以參考下

什么是JSONP

首先提一下JSON這個(gè)概念，JSON是一種輕量級(jí)的數(shù)據(jù)傳輸格式，被廣泛應(yīng)用于當(dāng)前Web應(yīng)用中。JSON格式數(shù)據(jù)的編碼和解析基本在所有主流語(yǔ)言中都被實(shí)現(xiàn)，所以現(xiàn)在大部分前后端分離的架構(gòu)都以JSON格式進(jìn)行數(shù)據(jù)的傳輸。

那么JSONP是什么呢？

首先拋出瀏覽器同源策略這個(gè)概念，為了保證用戶訪問(wèn)的安全，現(xiàn)代瀏覽器使用了同源策略，即不允許訪問(wèn)非同源的頁(yè)面，詳細(xì)的概念大家可以自行百度。這里大家只要知道，在ajax中，不允許請(qǐng)求非同源的URL就可以了，比如www.a.com下的一個(gè)頁(yè)面，其中的ajax請(qǐng)求是不允許訪問(wèn)www.b.com/c.php這樣一個(gè)頁(yè)面的。

JSONP就是用來(lái)解決跨域請(qǐng)求問(wèn)題的，那么具體是怎么實(shí)現(xiàn)的呢？

JSONP原理

ajax請(qǐng)求受同源策略影響，不允許進(jìn)行跨域請(qǐng)求，而script標(biāo)簽src屬性中的鏈接卻可以訪問(wèn)跨域的js腳本，利用這個(gè)特性，服務(wù)端不再返回JSON格式的數(shù)據(jù)，而是返回一段調(diào)用某個(gè)函數(shù)的js代碼，在src中進(jìn)行了調(diào)用，這樣實(shí)現(xiàn)了跨域。

JSONP具體實(shí)現(xiàn)

1.ajax中如果進(jìn)行跨域請(qǐng)求會(huì)如何

前端代碼在域www.practice.com下面，使用ajax發(fā)送了一個(gè)跨域的get請(qǐng)求

<!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下，簡(jiǎn)單的輸出一段json格式的數(shù)據(jù)

jsonhandle({

"age" : 15,

"name": "John",

當(dāng)訪問(wèn)前端代碼http://www.practice.com/gojsonp/index.html 時(shí) chrome報(bào)以下錯(cuò)誤

提示了不同源的URL禁止訪問(wèn)

2.使用JSONP，將前端代碼中的ajax請(qǐng)求去掉

添加了一個(gè)script標(biāo)簽，標(biāo)簽的src指向了另一個(gè)域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>

這里調(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.practice-zhao.com/student.php?id=1&callback=jsonhandle";
		var obj = $('<script><\/script>');
		obj.attr("src",url);
		$("body").append(obj);
	});
</script>
</body>
</html>

這里動(dòng)態(tài)的添加了一個(gè)script標(biāo)簽，src指向跨域的一個(gè)php腳本，并且將上面的js函數(shù)名作為callback參數(shù)傳入，那么我們看下PHP代碼怎么寫的：

<?php
$data = array(
	'age' => 20,
	'name' => '張三',
);

$callback = $_GET['callback'];

echo $callback."(".json_encode($data).")";
return;

PHP代碼返回了一段JS語(yǔ)句，即

jsonhandle({
	"age" : 15,
	"name": "張三",
})

此時(shí)訪問(wèn)頁(yè)面時(shí)，動(dòng)態(tài)添加了一個(gè)script標(biāo)簽，src指向PHP腳本，執(zhí)行返回的JS代碼，成功彈出提示框。
所以JSONP將訪問(wèn)跨域請(qǐng)求變成了執(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.practice-zhao.com/student.php?id=1",
			dataType: "jsonp",
			jsonp:"callback", //請(qǐng)求php的參數(shù)名
			jsonpCallback: "jsonhandle",//要執(zhí)行的回調(diào)函數(shù)
			success : function(data) {
				alert("age:" + data.age + "name:" + data.name);
			}

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

以上就是一文看懂JSONP原理和應(yīng)用的詳細(xì)內(nèi)容，更多關(guān)于JSONP原理和應(yīng)用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: