您的位置:首页 > Web前端 > JQuery

js/jquery_jsonp 跨域

2016-03-30 16:50 465 查看
同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。

具体可以查看下表:



而解决这个问题的方法即为跨域。

解决跨域问题的方法如下:
1、javascript_get(jsonp)方式跨域:

原理:<script>标签的src属性并不被同源策略所约束,所以可以获取任何服务器上脚本并执行。

html页面添加以下js代码:

function result(data) {
//此处弹出返回值的message,若不需要返回值,result方法可不写
alert(data.message);
}
//添加<script>标签的方法
function addScriptTag(src){
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}

window.onload = function(){
addScriptTag("http://localhost/test.php?v=1.0&q=apple&callback=result");
}


被请求的php文件,返回json字符串:

<?php
//获取回调函数名
$result = $_POST['callback'];
//返回json数据
$json_data  = '{"status":1,"message":"success"}';
echo result.'('.$json_data .')';
?>

2、javascript_post 方式跨域:

post方法跨域有两种方案:

一是,建立同源代理,通过代理发送请求获取返回值

二是,注入js脚本,插入iframe,在iframe中插入from,通过from提交数据,发送请求

function funPostBack(srvMethod){
var contentNR=$(document.getElementById("reportFrame").contentWindow.document).find("#content-container div.pageContentDIV.contentDIV").html();
if(document.getElementById("SMAL")!=null)
{
document.getElementById("SMAL").remove();//首先删除
}
var form ="<form action='"+postbackUrl+"' method='post'>" +
"<input type='hidden' name='parms' value=''/> " +
"<input type='hidden' name='srvMethod' value=''/> " +
"</form> ";
$("body").append("<iframe id='SMAL' name='SMAL' style='display: none'></iframe>");//载入iframe
$( "#SMAL" ).contents().find('body').html(form);//将form表单塞入iframe;
$( "#SMAL" ).contents().find("form input[name='parms']").val(contentNR);
$( "#SMAL" ).contents().find("form input[name='method']").val(srvMethod);
$( "#SMAL" ).contents().find('form').submit();
}
注意:post方法跨域最好不要用
3、jquery_ajax_get 方法跨域:

方法一:ajax法:

$.ajax({
//此处?表示person
url:"http://visit_log/target_log.php?callback=?&category=vale1&name=vale2&action=value3&value=value4",
dataType:"jsonp",
jsonpCallback:"person",
success:function(data){
alert(data.status + " is a a" + data.message);
}
});


被请求的php文件,返回json字符串:

<?php
//获取回调函数名
$result = $_POST['callback'];
//返回json数据
$json_data  = '{"status":1,"message":"success"}';
echo result.'('.$json_data .')';
?>


方法二:getjson法:、

<script>
$.getJSON("http://visit_log/target_log.php?callback=?&category=vale1&name=vale2&action=value3&value=value4",function(data){
alert(data.status + " is a a" + data.message);
});
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: