快捷導(dǎo)航

JSONP跨域請(qǐng)求實(shí)例詳解

更新時(shí)間：2016年07月04日 16:08:50 作者：snandy

JSONP(JSON with Padding)是JSON的一種“使用模式”，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。接下來通過本文給大家介紹JSONP跨域請(qǐng)求實(shí)例詳解，感興趣的朋友一起看下吧

JSOP簡(jiǎn)介

JSONP(JSON with Padding)是JSON的一種“使用模式”，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。由于同源策略，一般來說位于 server1.example.com 的網(wǎng)頁(yè)無(wú)法與不是 server1.example.com的服務(wù)器溝通，而 HTML 的<script> 元素是一個(gè)例外。利用 <script> 元素的這個(gè)開放策略，網(wǎng)頁(yè)可以得到從其他來源動(dòng)態(tài)產(chǎn)生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析。

跨域請(qǐng)求的方式有很多種：

1.iframe
2.document.domain
3.window.name
4.script
5.XDomainRequest (IE8+)
6.XMLHTTPRequest (Firefox3.5+)
7.postMessage (HTML5)
8.后臺(tái)代理
9....

它們有各自的優(yōu)缺點(diǎn)，返回的數(shù)據(jù)格式也各不同，應(yīng)根據(jù)需求慎重選擇。比如iframe返回html片段就比較適合，費(fèi)老勁用它返回JSON就得不償失了。這篇開始我將打造一個(gè)實(shí)用的跨域請(qǐng)求工具Sjax。使用script請(qǐng)求的最大缺點(diǎn)，挑戰(zhàn)是錯(cuò)誤處理。比如404錯(cuò)誤，它不象XMLHTTPRequest能準(zhǔn)確的返回狀態(tài)碼404。我把這個(gè)放在最后一篇。

本系列主要描述以上列舉的方式4，即通過script返回JSON格式數(shù)據(jù)數(shù)據(jù)。這種方式現(xiàn)在稱為JSONP。JSON是目前前后臺(tái)溝通使用最流行，也最廣泛的格式之一。相對(duì)于早期的AJAX返回XML（AJAX中的X就是XML），JSON顯得更輕量級(jí)，沒有多余的Tag標(biāo)記，解析也是原生的。XML返回到前端后先轉(zhuǎn)成文檔，通過DOM API一層層的解析。解析DOM是開銷比較大的，尤其在早期的IE版本中（IE6/7/8），core js與dom溝通的代價(jià)是很大的。

JSONP的實(shí)現(xiàn)思路很簡(jiǎn)單

1.前端創(chuàng)建script標(biāo)記，設(shè)置src，添加到head中（你可以往body中添加）

2.后臺(tái)返回一個(gè)js變量jsonp，這個(gè)jsonp就是請(qǐng)求后的JSON數(shù)據(jù)

3.回調(diào)完成后刪除script標(biāo)記（還有一些清理工作如避免部分瀏覽器內(nèi)存泄露等）

接口

Sjax.load(
url, // 跨越請(qǐng)求的URL
success, // 回調(diào)函數(shù)，必須定義一個(gè)形參，用于接收后臺(tái)返回的全局變量jsonp （約定后臺(tái)返回如jsonp = {...}結(jié)構(gòu)）
timestamp, // 傳true會(huì)加一個(gè)時(shí)間戳，防止緩存，默認(rèn)不加
);

示例：

<!DOCTYPE HTML>
<html> 
<head> 
<meta charset="utf-8"> 
<title>sjax_0.1.js by snandy</title>
<script src="http://files.cnblogs.com/snandy/sjax_0.1.js"></script>
</head> 
<body>
<p id="p1" style="background:gold;"></p>
<input type="button" value="Get Name" onclick="clk()"/>
<script type="text/javascript">
function clk(){
Sjax.load(
'http://files.cnblogs.com/snandy/jsonp.js', 
function(){
document.getElementById('p1').innerHTML = 'Hi, ' + jsonp.name;
}
); 
}
</script>
</body>
</html>

這個(gè)html實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的前后臺(tái)交互功能，點(diǎn)擊按鈕“Get Name”，獲取到name后顯示在段落P上。

clk函數(shù)中調(diào)用Sjax.load方法，Sjax中的S指script。之前我的Ajax系列中使用的Ajax命名，這里就使用了Sjax。

請(qǐng)求的后臺(tái)url是jsonp.js，它返回如下

jsonp = {name:'jack'};

因?yàn)槭菧y(cè)試，這里使用最簡(jiǎn)單的方式實(shí)現(xiàn)。請(qǐng)求的后臺(tái)其實(shí)不必是js文件，可以是php，java等任何后臺(tái)語(yǔ)言，它們可能會(huì)連接數(shù)據(jù)庫(kù)進(jìn)行一系列的業(yè)務(wù)查詢?？傊詈蠓祷氐慕Y(jié)構(gòu)必須變量jsonp，這個(gè)變量就是一個(gè)js對(duì)象，至于有多復(fù)雜則無(wú)需關(guān)注。

以上所述是小編給大家介紹的JSONP跨域請(qǐng)求實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: