AJAX對於我們來說可能已經不是陌生的事情了，但如果你的是跨域請求，那麼AJAX已經無能為力，其實這個也是可以彌補的，就是利用 jsonp。其實也不是什麼技術，只是利用JS標籤裡面的跨域特性進行跨域資料訪問，伺服器返回的JS代碼在用戶端瀏覽器再次執行得到我們想要的效果，利 用jsonp可以做到防AJAX實現跨域請求，但是我們並不需要建立XMLHttpRequest，當然也得不到readyState，因為這並不是 AJAX了。
下面舉一個例子來說明：
假設需要在網域名稱www.a.com下請求www.111cn.net /ajax.php，相比AJAX伺服器端的代碼沒有什麼太大的改變，關鍵是用戶端代碼，例如在ajax.php中隨便寫點代碼：
<?php
$arr =array(
'x' => array('id'=>10,'user'=>'zhangsan'),
'3'=>array('id'=>11,'user'=>'lisi'),
'8' =>array('id'=>14,'user'=>'wangwu')
);
$jsondata = json_encode($arr);
echo $_GET['callback'] . "($jsondata);";
?>
則www.a.com下的用戶端代碼可以是：
<html>
<head>
<script>
function ck(data){
var str = '';
for(i in data){
str += data[i].id + '___' + data[i].user + '<br/>';
}
document.getElementById('content').innerHTML=str;
}
function test(){
var s = document.createElement('script');
s.src = "http://www.111cn.net /ajax.php?callback=ck";
head=document.getElementsByTagName('head').item(0);
head.appendChild(s);
}
</script>
</head>
<body>
<div id="content" style="border:1px solid red;width:300px;height:200px;"></div>
<input type="button" value="test" onclick="test()" />
</body>
</html>
其 中test()函數的作用是建立script標籤，動態請求www.111cn.net /ajax.php並傳入回呼函數名ck，伺服器會返回js代碼，就像我們 看到的輸出執行函數的代碼，並且將json資料作為參數傳入回呼函數，和AJAX中使用的回呼函數一樣，實現我們想要的效果。
如果使用jquery則代碼簡潔並且更像AJAX的用法，程式碼範例：
<script src="jquery.js"></script>
<script>
function test(){
$.ajax({
url:'http://www.111cn.net /ajax.php',
type:'GET',
data:{name:'xxx'},
dataType:'jsonp',
jsonp:'callback',
success:function(data){
var str = '';
for(i in data){
str += data[i].id + '___' + data[i].user + '<br/>';
}
$('#content').html(str);
}
});
}
</script>
<div id="content" style="border:1px solid red;width:300px;height:200px;"></div>
<input type="button" value="test" onclick="test()" />
在jquery中還有一個方法是，使用起來更簡潔一點，只需要將函數內的代碼更改為：
$.getJSON("http://www.111cn.net /ajax.php?callback=?",
function(data){
var str = '';
for(i in data){
str += data[i].id + '___' + data[i].user + '<br/>';
}
$('#content').html(str);
});
最後要說的一點是jsonp和ajax不同，是利用script標籤的跨域請求，應該是這個原因測試POST提交方式沒有成功，如果有那位朋友測試POST方式成功並且代碼不繁瑣，請給我留言
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
