一：什么是JSONP
JSONP(JSON with Padding)是JSON的一种"使用模式"，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。
二:使用原生js,或者jquery访问跨域报错
<body>
<h1>后台获取结果</h1>
{{ result }}
<h1>js直接获取结果</h1>
<input type="button" value="获取数据" id="ok_button" onclick="getData();">
<div id=""container> </div> <script>
//原生js
function getData(){
var xhr=new XMLHttpRequest()
xhr.open("GET","http://127.0.0.1:8001/req")//以什么方式a
xhr.onreadystatechange=function(){//执行成功后的回调信息
console.log(xhr.responseText)
}
xhr.send() //发送信息
}
</script>
</body> #js发错报错
XMLHttpRequest cannot load http://127.0.0.1:8001/req. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8000' is therefore not allowed access.
以把请求放过去了，也收到了，但在在数据回到浏览器的时候，我浏览器拒不接受。这是浏览器策略。
三：使用script发送数据
#jsonp 存在的意义就是：由于浏览器具有同源策略（阻止ajax请求，但是无法阻止script）。
#通过script发送数据。
<body>
<h1>后台获取结果</h1>
{{ result }}
<h1>js直接获取结果</h1>
<input type="button" value="获取数据" id="ok_button" onclick="getData();">
<div id=""container> </div> <script>
//原生js
function getData(){
var tag=document.createElement("script") //创建script标签
tag.src="http://127.0.0.1:8001/req //要发送地址
document.head.appendChild(tag)//script加入头部
}
</script>
</body>
#但是返回结果会出错，原因返回的结果不是script语法，所以要把返回结果必须是JS格式
return HttpResponse("alter(123)") 正确
return HttpResponse("")报错。
四：例子
#例子：通过script跨哉访问请求（js发送数据）
工程2：
#views.py
from django.shortcuts import render,HttpResponse # Create your views here.
def req(request):
func=request.GET.get("func")
return HttpResponse('func("XXX")') #返回func是js定义的函数 #urls.py
url(r'^req$',views.req), #起动地址
http://127.0.0.1:8001/req 工程1：
#views.py
from django.shortcuts import render,HttpResponse
import requests
# Create your views here. def a(request):
return HttpResponse("ok") #urls.py
#url(r'^a/', views.a), #模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>js直接获取结果</h1>
<input type="button" value="获取数据" id="ok_button" onclick="getData();">
<div id=""container> </div> <script>
//原生js
function getData(){ var tag=document.createElement("script") //创建script标签
tag.src="http://127.0.0.1:8001/req?func=func" //要发送地址
document.head.appendChild(tag)//script加入头部
}
#func=func 把js方法传递给后台
function func(arg){
alert(arg);
}
</script>
</body>
</html>
五：JSONP跨域请求的本质
由于浏览器具有同源策略（阻止ajax跨域请求，但是无法阻止script）
1）创建script标签
2）src=远程地址
3）返回的数据必须是js格式 JSONP只能发GET请求
六：jquery跨域实现
#jsonp跨域请求jquery方式
<script src="/static/jquery-1.12.4.js"></script>
<script>
//原生js $.ajax({
url:"http://127.0.0.1:8001/req?",
type:"POST",
dataType:"jsonp",
jsonp:"callback",//发送的参数
jsonpCallback:"func",//发送参数的值 等价http://127.0.0.1:8001/req?callback=func
})
}
function func(arg){
alert(arg);
}
</script>
七：总结
就是利用script标签绕过同源策略，获得一个类似这样的数据，jsonpcallback是页面存在的回调方法，参数就是想得到的json。