首頁 > 開發者 > JavaScript
JSONP跨域請求執行個體詳解，jsonp執行個體詳解
JSOP簡介
JSONP(JSON with Padding)是JSON的一種“使用模式”，可用於解決主流瀏覽器的跨域資料訪問的問題。由於同源策略，一般來說位於 server1.example.com 的網頁無法與不是 server1.example.com的伺服器溝通，而 HTML 的<script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。
跨域請求的方式有很多種：
1.iframe
2.document.domain
3.window.name
4.script
5.XDomainRequest (IE8+)
6.XMLHTTPRequest (Firefox3.5+)
7.postMessage (HTML5)
8.後台代理
9....
它們有各自的優缺點，返回的資料格式也各不同，應根據需求謹慎選擇。比如iframe返回html片段就比較適合，費老勁用它返回JSON就得不償失了。這篇開始我將打造一個實用的跨域請求工具Sjax。使用script請求的最大缺點，挑戰是錯誤處理。比如404錯誤，它不象XMLHTTPRequest能準確的返回狀態代碼404。我把這個放在最後一篇。
本系列主要描述以上列舉的方式4，即通過script返回JSON格式資料資料。這種方式現在稱為JSONP。JSON是目前前後台溝通使用最流行，也最廣泛的格式之一。相對於早期的AJAX返回XML（AJAX中的X就是XML），JSON顯得更輕量級，沒有多餘的Tag標記，解析也是原生的。XML返回到前端後先轉成文檔，通過DOM API一層層的解析。解析DOM是開銷比較大的，尤其在早期的IE版本中（IE6/7/8），core js與dom溝通的代價是很大的。
JSONP的實現思路很簡單
1.前端建立script標記，設定src，添加到head中（你可以往body中添加）
2.後台返回一個js變數jsonp，這個jsonp就是請求後的JSON資料
3.回調完成後刪除script標記（還有一些清理工作如避免部分瀏覽器記憶體泄露等）
介面
Sjax.load(url, // 跨越請求的URLsuccess, // 回呼函數，必須定義一個形參，用於接收後台返回的全域變數jsonp （約定後台返回如jsonp = {...}結構）timestamp, // 傳true會加一個時間戳記，防止緩衝，預設不加);
樣本：
<!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>
這個html實現一個最簡單的前後台互動功能，點擊按鈕“Get Name”，擷取到name後顯示在段落P上。
clk函數中調用Sjax.load方法，Sjax中的S指script。之前我的Ajax系列中使用的Ajax命名，這裡就使用了Sjax。
請求的後台url是jsonp.js，它返回如下
jsonp = {name:'jack'};
因為是測試，這裡使用最簡單的方式實現。請求的後台其實不必是js檔案，可以是php，java等任何後台語言，它們可能會串連資料庫進行一系列的業務查詢。總之它最後返回的結構必須變數jsonp，這個變數就是一個js對象，至於有多複雜則無需關注。
以上所述是小編給大家介紹的JSONP跨域請求執行個體詳解，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！
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
