• 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
    不同域名 不允许
  • 相关阅读:
    Spring AOP获取拦截方法的参数名称跟参数值
    mybatis generator逆向工程自动生成带中文注释修改版(添加了实体类注释)文末附有git下载地址
    关于Java编写多行注释遇到方法字符串中正好也有注释符号产生冲突的解决办法
    SpringBoot入门学习以及整合MyBatis
    IO跟NIO的区别
    redis的配置文件详解redis.conf
    Redis入门基础内容(转载整理非原创)
    深入网络协议来理解数据传输三(http协议详解)
    深入网络协议来理解数据传输二(转载整理)
    Python编写ATM(初级进阶)
  • 原文地址:https://www.cnblogs.com/jkko123/p/6294624.html
Copyright © 2020-2023  润新知