Javascript的jsonp原理
阿新 • • 發佈：2019-01-09
Javascript的jsonp原理首先JSON是一種基於文字的資料交換方式，或者叫做資料描述格式 當一個網頁在請求JavaScript檔案時則不受是否跨域的影響，凡是擁有”src”這個屬性的標籤都擁有跨域的能力，比如<script>、<img>、<iframe> 所以我們這裡運用了script標籤的跨域能力，讓它用一個callback函式包裹著一段JSON格式的資料，當該資料返回到前端頁面的時候，我們再執行這個函式就可以把資料讀取出來
前端程式碼jsonp.html
<html>
<head>
<meta charset="UTF-8">
<title>Wsscat's jsonp</title>
</head>
<body>
<button onclick="jsonpServer('jsonp.php')">JSONP</button>
</body>
<script>
function jsonpServer(url) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", url);
document.body.appendChild(script);
}
function JSON_CALLBACK(data) {
console.log(data);
}
</script>
</html>
後端程式碼 jsonp.php
<?php
$data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';
$data = "JSON_CALLBACK(" . $data . ")";
echo $data;
?>
jQuery的jsonp方法
type：請求方式 GET/POST url:請求地址 async:布林型別，預設為true 表示請求是否為非同步，如果為false表示為同步。js程式碼dataType：返回的資料型別 jsonp：傳遞給請求處理程式或頁面的，用以獲得jsonp回撥函式名的引數名(一般預設為:callback) jsonpCallback：自定義的jsonp回撥函式名稱，預設為jQuery自動生成的隨機函式名，也可以寫"?"，jQuery會自動為你處理資料 success：呼叫成功執行的函式 error：異常處理函式
$.ajax({
url:'index.php',
type:'get',
dataType:'jsonp',
//jsonp:'JSON_CALLBACK',
jsonpCallback:'JSON_CALLBACK',
success:function(data){
console.log(data)
}
})
php程式碼
<?php
$data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';
$data = "JSON_CALLBACK(" . $data . ")";
echo $data;
?>