jsonp如何進行跨域獲取資料？這篇文章就跟大家介紹jsonp進行跨域取得數據的方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
jsonp跨域獲取資料小解
#由於瀏覽器有同源策略，所以要想取得非同源（協議，域名，連接埠三者有一不同都算非同源）的頁面的數據，就得進行跨域
(1) jsonp原理
由於script標籤的src屬性可以存取非同源的js腳本，所以透過src屬性存取伺服器會返回函數的js程式碼，而我們想要的資料就作為函數參數返回，而我們會先定義這個函數，返回的js程式碼就可執行
(2) jsonp實作程式碼
請求頁面
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function jsonp(data){
console.log(username)
}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
var url = "http://www.example.com/jsonp.php?callback=jsonp";
var script = $('<script><\/script>');
script.attr("src",url);
$("body").append(script);
});
</script>
</body>
</html><?php
$data = {'name': '张三'};
$callback = $_GET['callback'];
echo $callback."(".json_encode($data).")";
?php>之後php會回傳
jsonp（{
name:'niuni
}）然後PHP回傳的程式碼h會被要求頁面的jsonp方法執行
#（3）jQuery的簡單jsonp跨網域
#<script>
function showData (data) {
console.info(data);
}
$(document).ready(function () {
$("#btn").click(function () {
$.ajax({
url: "http://www.example.comjsonp",
type: "GET",
dataType: "jsonp",// 返回数据类型
jsonpCallback: "showData",//回调函数
// 获取数据成功就执行success函数
success: function (data) {
console.info("data");
}
});
});
});
</script>總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多精彩內容大家可以追蹤php中文網相關教學欄位！ ！ ！
以上是jsonp如何進行跨域獲取資料？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
