• PHP下ajax跨域的解决方案之jsonp


    首先要说明一下json和jsonp的区别?
    json是一种基于文本的数据交换方式,或者叫做描述数据的一种格式。
    var person = {
    	"name": "test",
    	"age": "25",
    	"sex": "男"
    };
    
    var data = [1, 2, 3, 4, 5];
    
    而jsonp是一种非官方跨域数据交互协议,该协议允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

    比如我在a.com的网站上引用了b.com的一个b.js,但这样跨域的引用并不会产生错误,说明调用js文件时不受跨域的影响。
    <script type="text/javascript" src="http://www.b.com/b.js"></script>
    
    那么我们在b.js里添加如下代码,看看是否能够执行
    alert("I from b");
    
    确定是可以执行。
     
    那么如果我们在a.com上自已创建一个js函数,而在b.com下的b.js中调用,那是否可行呢?
    a.com下的index.html如下:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    </head>
    <body>
    	<script type="text/javascript">
    		function a(data) {
    			alert("I from a 
    " + "data:" + data);
    		}
    	</script>
    	<script type="text/javascript" src="http://www.b.com/b.js"></script>
    </body>
    </html>
    
    b.com下的b.js如下:
    a("from b");
    
    上面也是可以执行的,我们可以看到在b.js中的数据确实正确的传到了函数a中。
     
    问题又来了,a.com中创建的函数名与b.js中调用的函数名必须一致,那么如何才能让b.com服务端知道这个函数名,只有通过地址栏来传递了,加上一个callback=函数名来传递。当然callback这个命名可以改,但大家都这么命名,也就约定俗成了。
    a.com下的index.html如下:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    </head>
    <body>
    	<script type="text/javascript">
    		function a(data) {
    			alert("uid :" + data.uid + "name :" + data.name);
    		}
    	</script>
    
    	<!-- 注意这里把b.js改成b.php了 -->
    	<script type="text/javascript" src="http://www.b.com/b.php?callback=a"></script>
    </body>
    </html>
    
    b.com下的b.php如下:
    <?php
    
    $callback = !empty($_GET['callback']) ? trim($_GET['callback']) : '';
    
    if(!empty($callback)) {
        $data = json_encode(array(
            'uid' => 1,
            'name' => '测试',
        ));
        
        echo "{$callback}({$data});";
    }
    

    上面也是可以执行的,知道了回调函数名,b.com服务端处理好数据,然后通过字符串拼接输出。

     
    jquery中就已经提供了jsonp的支持,a.com下的index.html如下所示:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    </head>
    <body>
    	<div class="info"></div>
    	<script type="text/javascript" src="http://www.b.com/jquery.js"></script>
    	<script type="text/javascript">
    	$.ajax({
    		dataType: "jsonp",
    		url: "http://www.b.com/b.php",
    		jsonp: "callback",
    		success: function(data) {
    			$(".info").text("uid:" + data.uid + " name:" + data.name);
    		}		
    	});
    	</script>
    </body>
    </html>
    
    PHP下ajax跨域的解决方案之jsonp - 怀素真 - 因上努力 果上随缘
    跨域策略限制情况表如下:
    URL 说明 允许通信
    http://www.a.com/a.js
    http://www.a.com/b.js
    同一域名下 允许
    http://www.a.com/lab/a.js
    http://www.a.com/script/b.js
    同一域名下不同文件夹 允许
    http://www.a.com:8000/a.js
    http://www.a.com/b.js
    同一域名,不同端口 不允许
    http://www.a.com/a.js
    https://www.a.com/b.js
    同一域名,不同协议 不允许
    http://www.a.com/a.js
    http://127.0.0.100/b.js
    域名和域名对应ip 不允许
    http://www.a.com/a.js
    http://script.a.com/b.js
    主域相同,子域不同 不允许
    http://www.a.com/a.js
    http://a.com/b.js
    同一域名,不同二级域名(同上) 不允许
    http://www.a.com/a.js
    http://www.b.com/b.js
    不同域名 不允许
  • 相关阅读:
    flash不保存在IE缓存中
    pv 3d
    ASP.NET优化
    根据文件名判断文件扩展名 和 根据流真正判断文件类型的关键函数
    as3.0
    编码
    AS3中Event的target和currentTarget
    显示用户IP来源的代码
    启用IIS的Gzip压缩功能
    Css之多个子元素水平平均分布——flex布局法
  • 原文地址:https://www.cnblogs.com/jkko123/p/6294624.html
Copyright © 2020-2023  润新知