什麼是jsonp？有什麼用處？本篇文章就帶大家來認識jsonp及對jsonp原理的理解，有需要的朋友可以參考一下。 話不多說，我們直接進入正文~ jsonp是什麼？ 我們可以從網路上查到jsonp的定義：JSONP(JSON with Padding)是JSON的一種“使用模式”，可用於解決主流瀏覽器的跨域資料存取的問題。由於同源策略，一般來說位於 server1.example.com 的網頁無法與不是 server1.example.com的伺服器溝通，而 HTML 的 元素是例外。利用 <script> 元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。 <strong>其實簡單點來說jsonp就是一種輕量級的資料傳輸格式，用來解決跨域請求問題。 </strong></p> <p>我們就來分析一下<strong>jsonp的原理</strong></p> <p>ajax請求受同源策略影響，不允許進行跨域請求，而script標籤src屬性中的連結卻可以存取跨域的js腳本，利用這個特性，服務端不再返回JSON格式的數據，而是返回一段調用某個函數的js程式碼，在src中進行了調用，這樣實現了跨域。 </p> <p>我們來看一個jsonp的例子：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><!DOCTYPE html> <html> <head> <title>GoJSONP</title> </head> <body> < script type="text/javascript"> function jsonhandle(data){ alert("age:" + data.age + "name:" + data.name); } $(document).ready(function(){ var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle"; var obj = $('<\/script>'); obj.attr("src",url); $("body").append(obj); });
