上一篇：Django之ajax文件上传的两种方式和ifname上传文件【交互篇六】https://blog.csdn.net/Burgess_zheng/article/details/86558155
下一篇：Django之前后端交互篇目录https://blog.csdn.net/Burgess_zheng/article/details/86563865
目录
JSONP简单理解：
由于同源策略，前端阻止了ajax请求外网的，而我们有这个需求进行请求外网API虎丘数据应用到我们的前端，所以jsonp是作用就是解决同源策略的影响
同源策略介绍：
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
1.同源策略，它是由Netscape提出的一个著名的安全策略。
2.现在所有支持JavaScript 的浏览器都会使用这个策略。
3.所谓同源是指，域名，协议，端口相同。
4.当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面
5.当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，
6.即检查是否同源，只有和百度同源的脚本才会被执行。 [1]
7.如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问
为什么要使用JSONP？
1我们自己的浏览器发给了自己的server，
2我们自己的server向外部发请求，
3拿到结果返回给我们的server
4.server拿到结果后我我们应用到我们的浏览器
所以向外部发请求就多了几个步骤（效率太低），而我们希望的是没必要通过我们的server
所以浏览器想要直接向外部发只能通过js来发(但是同源策略阻止js（ajax）)
JSONP的两种实现方式
后端
def jsonp(request):
func = request.GET.get(call)
content = '%s(10000)' %(func,)
return HttpResponse(content)前端
原生html实现jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="获取数据" onclick="getContent();"/>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function getContent(){
//原生html实现jsonp
var tag = document.createElement('script');
tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';
//对方响应回来的数据为list(参数)，自动调用了function list(arg){}
document.head.appendChild(tag);
//该tag标签放在head头部标签下
document.head.removeChild(tag)
//移除掉该标签
function list(arg){
console.log(arg)
}
</script>
</body>
</html>jquery实现jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="获取数据" onclick="getContent();"/>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function getContent(){
//jquery实现jsonp
$.ajax({
url:'http://www.jxntv.cn/data/jmd-jxtv2.html?_=1454376870403',
type:'POST',//如果是JSONP 内部自动请求类型转成GET
dataType:'jsonp',
jsonp:'callback',//get请求的key
jsonpCallback:'list'//get请求的value
})
}
function list(arg){
console.log(arg)
}
</script>
</body>
</html>其实还有另外一种方式： CORS（跨站资源共享）
上一篇：Django之ajax文件上传的两种方式和ifname上传文件【交互篇六】https://blog.csdn.net/Burgess_zheng/article/details/86558155
下一篇：Django之前后端交互篇目录https://blog.csdn.net/Burgess_zheng/article/details/86563865