您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“如何理解ajax跨域請(qǐng)求”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
同源策略限制
同源策略阻止從一個(gè)域上加載的腳本獲取或操作另一個(gè)域上的文檔屬性。也就是說(shuō),受到請(qǐng)求的 URL 的域必須與當(dāng)前 Web 頁(yè)面的域相同。這意味著瀏覽器隔離來(lái)自不同源的內(nèi)容,以防止它們之間的操作。這個(gè)瀏覽器策略很舊,從 Netscape Navigator 2.0 版本開(kāi)始就存在?!詃eveloperWorks
所謂同源是指,域名,協(xié)議,端口相同。
平地一聲吼
本文講解的是怎么利用ajax實(shí)現(xiàn)跨域請(qǐng)求,那么知道“同源策略”,就可以解決很多疑問(wèn):“為毛我的ajax加載不了數(shù)據(jù)!”“為毛瀏覽器控制臺(tái)會(huì)對(duì)我如此漂亮的代碼報(bào)錯(cuò)!”
例子1
先上一個(gè)錯(cuò)誤示范
客戶端代碼:
復(fù)制代碼 代碼如下:
<script>
// 客戶端使用getJSON方法請(qǐng)求另一臺(tái)機(jī)子上的腳本
$.getJSON("http://172.22.22.120/new/ajax.php",function(json){
alert(json.website);
});
</script>
服務(wù)端PHP腳本代碼:
復(fù)制代碼 代碼如下:
<?php
// ajax.php
header('Content-type: application/json');
echo json_encode(array('website'=>'hcoding'));
?>
firefox下的錯(cuò)誤提示:
根據(jù)同源策略的概念,localhost和172.22.22.120是出于不同的域名下的,所以跨域請(qǐng)求理所當(dāng)然地被瀏覽器拒絕了。
JSONP
JSONP(JSON with Padding)是資料格式 JSON 的一種“使用模式”,可以讓網(wǎng)頁(yè)從別的網(wǎng)域要資料。另一個(gè)解決這個(gè)問(wèn)題的新方法是跨來(lái)源資源共享。由于同源策略,一般來(lái)說(shuō)位于 server1.example.com 的網(wǎng)頁(yè)無(wú)法與不是 server1.example.com 的服務(wù)器溝通,而 HTML 的 <script> 元素是一個(gè)例外。利用 <script> 元素的這個(gè)開(kāi)放策略,網(wǎng)頁(yè)可以得到從其他來(lái)源動(dòng)態(tài)產(chǎn)生的 JSON 資料,而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON,而是任意的 JavaScript,用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析?!跃S基百科
這話該怎么理解呢!我個(gè)人是這樣認(rèn)為的,用<script>跨域的請(qǐng)求數(shù)據(jù),跨域的服務(wù)器返回一段【JavaScript代碼】,是 的,你沒(méi)看錯(cuò),不是json格式數(shù)據(jù),是JavaScript代碼,這樣,這段代碼就由JavaScript 直譯器執(zhí)行。上例子更直觀:
例子2
客戶端代碼:
復(fù)制代碼 代碼如下:
<script>
// 這是回調(diào)方法
function cb(data){
alert(data.website);
}
</script>
<!--這是跨域請(qǐng)求的代碼,切記,這段代碼要在回調(diào)函數(shù)之后-->
<script src="http://172.22.22.120/new/ajax_jsonp.php?callback=cb"></script>
服務(wù)端PHP腳本代碼:
復(fù)制代碼 代碼如下:
<?php
$cb = htmlspecialchars($_GET['callback']); // 注意了,這里要做好過(guò)濾,防止xss攻擊
echo $cb,'(',json_encode(array('website'=>'hcoding')),')'; // 返回客戶端的數(shù)據(jù)為:cb({"name":"hcoding"}) 這是一段js代碼
?>
瀏覽器會(huì)發(fā)生什么事呢,我就不說(shuō)了,當(dāng)然是cb方法被調(diào)用啦:
所以,再說(shuō)jsonp的概念,利用<script>不受同源策略的限制,跨域的服務(wù)器把要返回的json數(shù)據(jù)作為參數(shù)和回調(diào)函數(shù)一起返回客戶端。
JQuery對(duì)JSONP的支持
本文要講ajax的跨域請(qǐng)求,前面說(shuō)了那么多,下面當(dāng)然要講主題啦。
從 1.2 版本開(kāi)始,jQuery 擁有對(duì) JSONP 回調(diào)的本地支持。如果指定了 JSONP 回調(diào),就可以加載位于另一個(gè)域的 JSON 數(shù)據(jù),回調(diào)的語(yǔ)法為:url?callback=?。jQuery 自動(dòng)將 ? 替換為要調(diào)用的生成函數(shù)名。
例子3:$.getJSON方法跨域請(qǐng)求
例子4:$.ajax方法自定義回調(diào)方法
例子3
客戶端代碼:
復(fù)制代碼 代碼如下:
<script>
// 客戶端使用getJSON方法請(qǐng)求另一臺(tái)機(jī)子上的腳本
// 瀏覽器會(huì)生成一個(gè)隨機(jī)的callback參數(shù)
$.getJSON("http://172.22.22.120/new/ajax_jsonp.php?callback=?",function(json){
alert(json.website);
});
</script>
服務(wù)端PHP腳本代碼:
復(fù)制代碼 代碼如下:
<?php
$cb = htmlspecialchars($_GET['callback']); // 注意了,這里要做好過(guò)濾,防止xss攻擊
echo $cb,'(',json_encode(array('website'=>'hcoding')),')'; // 返回客戶端的數(shù)據(jù),這是一段js代碼
?>
$.getJSON簡(jiǎn)單易用,但就是不能指定回調(diào)函數(shù)。
例子4
客戶端代碼:
復(fù)制代碼 代碼如下:
<script>
$.ajax({
type : "GET",
url : "http://172.22.22.120/new/ajax_jsonp.php",
dataType : "jsonp", // 數(shù)據(jù)格式指定為jsonp
jsonp: "callback", // 服務(wù)點(diǎn)通過(guò)這個(gè)鍵值獲取回調(diào)方法
jsonpCallback:"cb", // 指定回調(diào)方法
success : function(json){
},
});
// 回調(diào)方法
function cb(data){
alert(data.website);
}
</script>
服務(wù)端PHP腳本代碼和例子3的相同。
“如何理解ajax跨域請(qǐng)求”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。