js/jquery_jsonp 跨域

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

具体可以查看下表:

js/jquery_jsonp 跨域_第1张图片

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

解决跨域问题的方法如下:
1、javascript_get(jsonp)方式跨域:
原理:<script>标签的src属性并不被同源策略所约束,所以可以获取任何服务器上脚本并执行。

html页面添加以下js代码:

<span style="font-size:18px;"><script type="text/javascript">
    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");
    }
</script></span>

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

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

2、javascript_post 方式跨域:
post方法跨域有两种方案:
一是,建立同源代理,通过代理发送请求获取返回值
二是,注入js脚本,插入iframe,在iframe中插入from,通过from提交数据,发送请求
注意:post方法跨域最好不要用
3、jquery_ajax_get 方法跨域:
方法一:ajax法:

<span style="font-size:18px;"><script>
$.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);
        }
});
</script></span>

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

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

方法二:getjson法:

<span style="font-size:18px;"><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></span>



你可能感兴趣的:(js/jquery_jsonp 跨域)