您的位置：首页 > 其它

跨域一

2015-07-20 14:11 169 查看

什么是跨域？

URL　　　　说明　　　　是否允许通信http://www.a.com/a.jshttp://www.a.com/b.js　　　　同一域名下　　允许http://www.a.com/lab/a.jshttp://www.a.com/script/b.js同一域名下不同文件夹允许http://www.a.com:8000/a.jshttp://www.a.com/b.js同一域名，不同端口不允许http://www.a.com/a.jshttps://www.a.com/b.js同一域名，不同协议不允许http://www.a.com/a.jshttp://70.32.92.74/b.js域名和域名对应ip不允许http://www.a.com/a.jshttp://script.a.com/b.js主域相同，子域不同不允许http://www.a.com/a.jshttp://a.com/b.js同一域名，不同二级域名（同上）不允许（cookie这种情况下也不允许访问）http://www.cnblogs.com/a.jshttp://www.a.com/b.js不同域名不允许

JSONP

原理：动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。

缺点：只能实现get请求，不能实现post请求。

demo:

应为它用到的只是所有HTML元素中一个简单的script元素。看到这是不是觉得越发奇怪了？没关系，继续看下去就会茅厕（塞）顿开的，嘿嘿～来看个例子吧：
demo.html:

<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Demo</title>
</head>
<body>
<scripttype="text/javascript">
functionsay(words){
alert(words);
}
</script>
<scripttype="text/javascript"src="demo.js"></script>
</body>
</html>


demo.js:

say("Hello,everyone!");

运行demo.html文件后，是不是看到写着“Hello,everyone!”的警告框了？你可能会觉得这个例子很简单，没什么了不起的，甚至会在想：这和JSONP有关系吗？那么，我可以很肯定的告诉你：有关系！而且，这个例子实际上就是JSONP的原型！你也许会想到，JSONP不是访问远程数据的吗？对，试想一下，如果demo.js文件在其它域的服务器上呢？结果会不会出现问题？我也可以很负责的告诉你：不会！你可以将上面例子中的demo.js更改为：http://demo.hpyer.cn/php/jsonp.php?callback=say再试一下。
现在，聪明的你应该已经明白JSONP到底是怎么回事了，那么，再来解释一下本节开头第一句话吧。看过demo.js文件的内容，应该知道，其只是对一个函数（通常称之为：回调函数）的调用，而需要交互的数据则通过参数形势进行返回。所以通过JSONP访问的服务器需要提供一个可以设置回调函数名的接口，就像http://demo.hpyer.cn/php/jsonp.php?callback=say中的callback，所以，综上所述JSONP是需要服务器端的支持的。附上jsonp.php的源码：



<?php
$type=isset($_GET['type'])?$_GET['type']:'';
$callback=isset($_GET['callback'])?$_GET['callback']:'';
$json='';
if($type=='json'){
$json='{
"Image":{
"Width":800,
"Height":600,
"Title":"Viewfrom15thFloor",
"Thumbnail":{
"Url":"http://www.example.com/image/481989943",
"Height":125,
"Width":"100"
},
"IDs":[116,943,234,38793]
}
}';
}else{
$json='"Hello,everyone!"';
}
if(!empty($callback)){
$json=$callback.'('.$json.')';
}
echo$json;


jquery中的应用:
自1.2版本起，jQuery加入了对JSONP的支持。我们可以很容易的利用$.getJSON()方法（或者其它基于$.ajax()的方法），来跨域加载JSON数据。来个例子吧：

<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Demo</title>
<scripttype="text/javascript"src="jquery.js"></script>
<scripttype="text/javascript">
functiondo_jsonp(){
$.getJSON("http://demo.hpyer.cn/php/jsonp.php?type=json&callback=?",
function(data){
$('#result').val('data.Image.IDs:'+data.Image.IDs);
});
}
</script>
</head>
<body>
<ahref="javascript:do_jsonp();">Clickme</a><br/>
<textareaid="result"cols="50"rows="5"></textarea>
</body>
</html>


你可能注意到上面的例子中，url被写成了http://demo.hpyer.cn/php/jsonp.php?type=json&callback=?，需要说明的是，这个问号会被jQuery自动替换为回调函数的函数名（如果是一个匿名函数，jQuery会自动生成一个带时间戳的函数名）。

看我在项目中的一个例子：


//定义Ajax函数
functionajaxFun(){
vartimeStamp=Math.floor(newDate().getTime()/1000);
varurl="http://apiso.alidemo.3gpp.cn/httpserver/cp/yisou/ali_feedback_interface.php?callback=jsonpCallback&feedbacktype=add&type="+feedbackNumber+"&book="+me.mixedInfo.title+"&author="+me.mixedInfo.author+"&chapter="+me.mixedInfo.cname+"&chapterid="+me.mixedInfo.cid+"&questiondesc="+text+"&platform=1&t="+timeStamp+"&sn="+md5("d30fcd1a9f1900fa049b4766e0a275e1"+timeStamp);
varscriptObj=document.createElement("script");
scriptObj.src=url;
scriptObj.id="jsonpScript";
document.body.appendChild(scriptObj);
//jsonp回调函数，jsonpCallback必须为全局函数，因为jsonp返回的是在全局环境中执行函数的语句，即jsonpCallback(data)
window.jsonpCallback=function(data){
switch(data.code){
case"1":
novel.readerPrompt('提交成功，即将返回……',1,function(){
window.history.go(-1);
});
break;
case"0":
novel.readerPrompt('提交失败。',2);
break;
case"900":
novel.readerPrompt('提交失败，验证失败。',2);
break;
}
//成功后删除scriptObj，后面的setTimeout就不会执行了
if(document.getElementById("jsonpScript")){
document.body.removeChild(scriptObj);
}
}
//设置超时，超时的话直接显示提交成功
setTimeout(function(){
if(document.getElementById("jsonpScript")){
document.body.removeChild(scriptObj);
novel.readerPrompt('提交成功，即将返回……',1,function(){
window.history.go(-1);
});
}
},2000);
}
ajaxFun();


参考：

web开发之跨域访问篇（二）

关于javascript跨域及JSONP的原理与应用
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航