同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。
同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问,该异常原因是浏览器拦截了非同源站点的返回结果。
jsonp是实现跨域请求的一种方法,利用的是script标签的src属性具有无视同源策略的特性,将需要访问的非同源地址放在script标签的src属性中进行访问,非同源站点的视图函数则响应一个指定回调函数的字符串,并将json数据作为回调函数的参数一起返回给请求方。
#请求方页面
<button onclick="f()">sendAjax</button>
<script>
#创建script标签
function addScriptTag(src){
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
document.body.removeChild(script);
}
function func(name){
alert("hello"+name)
}
#将需要调用的回调函数通过url传参的方式传递给响应方视图函数
function f(){
addScriptTag("http://127.0.0.1:7766/SendAjax/?callbacks=func")
}
</script>
#响应方视图函数
def SendAjax(request):
import json
dic={"k1":"v1"}
print("callbacks:",request.GET.get("callbacks"))
callbacks=request.GET.get("callbacks")
return HttpResponse("%s('%s')"%(callbacks,json.dumps(dic)))
jQuery实现
1、getJSON方法实现
#url的后面必须添加一个callback参数,callback后面的那个问号是内部自动生成的一个回调函数名
<button onclick="f()">sendAjax</button>
<script>
function f(){
$.getJSON("http://127.0.0.1:7766/SendAjax/?callbacks=?",function(arg){
alert("hello"+arg)
});
}
</script>
2、Ajax实现
#用自定义回调函数处理响应,jsonp定义回调函数的键,jsonpCallback定义回调函数的值即回调函数函数名
<script>
function f(){
$.ajax({
url:"http://127.0.0.1:7766/SendAjax/",
dataType:"jsonp",
jsonp: 'callbacks',
jsonpCallback:"SayHi"
});
}
function SayHi(arg){
alert(arg);
}
</script>
<script>
#用Ajax的success回调函数处理响应
function f(){
$.ajax({
url:"http://127.0.0.1:7766/SendAjax/",
dataType:"jsonp", //必须有,告诉server,这次访问要的是一个jsonp的结果。
jsonp: 'callbacks', //jQuery帮助随机生成的:callbacks="wner"
success:function(data){
alert("hi "+data)
}
});
}
</script>