- 這里提到了JSONP，那有人就問了，它同JSON有什么區別不同和區別呢，接下我們就來看看，百度百科有以下說明：
'''
1. JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它基於JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一個子集。 JSON采用完全獨立於語言的文本格式，但是也使用了類似於C語言家族的習慣（包括C, C++, C#, Java, JavaScript, Perl, Python等）。這些特性使JSON成為理想的數據交換語言。易於人閱讀和編寫，同時也易於機器解析和生成(網絡傳輸速度快)。
2. JSONP(JSON with Padding)是JSON的 一種“使用模式”，可用於解決主流瀏覽器的跨域數據訪問的問題。由於同源策略，一般來說位於 server1.example.com 的網頁無法與不是 server1.example.com的服務器溝通,而 HTML 的`<script>` 元素是一個例外。利用 <script> 元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。
3. 我們知道，由於同源策略的限制，XmlHttpRequest只允許請求當前源（域名、協議、端口）的資源。若要跨域請求出於安全性考慮是不行的，但是我們發現，Web頁面上調用js文件時則不受是否跨域的影響，而且擁有”src”這個屬性的標簽都擁有跨域的能力，比如<script>、<img>、<iframe>，這時候，聰明的程序猿就想到了變通的方法，如果要進行跨域請求， 通過使用html的script標記來進行跨域請求，並在響應中返回要執行的script代碼，其中可以直接使用JSON傳遞 javascript對象。即在跨域的服務端生成JSON數據，然后包裝成script腳本回傳，着不就突破同源策略的限制，解決了跨域訪問的問題了么。
第一種jQuery實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>后台獲取的結果</h1>
{{ result }}
<h1>js直接獲取結果</h1>
<input type="button" value="獲取數據" onclick="getContent();" />
<div id="container"></div>
<script src="/static/jquery-1.8.2.js"></script>
<script>
function getContent(){
$.ajax({
url: 'http://www.jxntv.cn/data/jmd-jxtv2.html',
type: 'POST',
dataType: 'jsonp', //數據格式為jsonp
jsonp: 'callback', //函數變量名
jsonpCallback: 'list' //函數名稱
})
}
function list(arg){
console.log(arg);
}
</script>
</body>
</html>
第二種XMLHttpRequest實現的
function getContent(){
var xhr = new XMLHttpRequest();
xhr.open('GET','http://wupeiqi.com:8001/jsonp.html?k1=v1&k2=v2');
xhr.onreadystatechange = function(){
console.log(xhr.responseText);
};
xhr.send();
var tag = document.createElement('script');
tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';
document.head.appendChild(tag);
document.head.removeChild(tag);
Python后端代碼
def jsonp(request):
func = request.GET.get('callback')
content = '%s(100000)' %(func,)
return HttpResponse(content)