首先要说明一下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 \r\n" + "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>
跨域策略限制情况表如下:
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
不同域名 不允许

PHP下ajax跨域的解决方案之jsonp的更多相关文章

  1. PHP下ajax跨域的解决方案之CORS

    由于安全的限制(同源策略,javascript只能访问同域名下的内容),如果需要进行跨域操作,那就免不了要进行跨域.   CORS(跨域资源共享,Cross-Origin Resource Shari ...

  2. ajax跨域问题解决方案(jsonp,cors)

    跨域 跨域有三个条件,满足任何一个条件就是跨域 1:服务器端口不一致 2:协议不一致 3:域名不一致 解决方案: 1.jsonp 在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用 ...

  3. ajax跨域问题解决方案(jsonp的使用)

    错误提示: 是由于在ajax中填写url: "http://10.176.220.60:8080/SSM/login" 包含IP地址,系统默认跨域导致: 解决方法:在ajax当中d ...

  4. PHP下ajax跨域的解决方案之window.name

    原理核心:window对象的name属性是一个很特别的属性,当该window的location变化,然后重新加载,它的name属性可以依然保持不变. 依此原理,我们可以在页面A中用iframe加载其他 ...

  5. ie8或9下ajax跨域问题

    ie8或9下ajax跨域支持,添加如下代码 <!--[if (IE 8)|(IE 9)]><script src="https://cdn.bootcss.com/jque ...

  6. java、ajax 跨域请求解决方案('Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.)

      1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...

  7. AJAX 跨域 CORS 解决方案

    本篇文章由:http://xinpure.com/solutions-for-cross-domain-ajax-cors/ 两种跨域方法 在 Javascript 中跨域访问是比较常见的事情 就像现 ...

  8. ajax跨域问题解决方案

    今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面 ...

  9. ajax跨域访问http服务--jsonp

    在前面一篇文章<Spring Cloud 前后端分离后引起的跨域访问解决方案>里我们提到使用ajax跨域请求其他应用的http服务,使用的是后台增加注解@CrossOrigin或者增加Co ...

随机推荐

  1. 对话框(VC_Win32)

    资源描述表中对话框定义 格式: 对话框名 DIALOG[载入特性] X,Y,Width,Height[设置选项] { 对话框控件定义; } 说明: 对话框名称: 标识对话框资源,可为一个字符串也可以为 ...

  2. 解析Excel数据

    解析Excel数据常用的方式就是使用POI和JXL工具了,这两种工具使用起来有些类似,这里记录一下使用方式提供个参考 POI使用 File file = new File(filePath); Fil ...

  3. php 数组函数实例

    数组的概念 数组(array)是 PHP 中一个非常重要的概念,我们可以把数组看做一系列类似的数据的集合,实际上数组是一个有序图. PHP 还提供了超过 70 个内建函数来操作数组. 由于数组在php ...

  4. express有中间件的增删改查

    var express = require('express');引入express框架 var router = express.Router();引入router路由级中间件 var data = ...

  5. mysql更新(五) 完整性约束 外键的变种 三种关系 数据的增删改

    11-数据的增删改   本节重点: 插入数据 INSERT 更新数据 UPDATE 删除数据 DELETE 再来回顾一下之前我们练过的一些操作,相信大家都对插入数据.更新数据.删除数据有了全面的认识. ...

  6. uva-705-深搜

    题意,就是根据斜线组成的迷宫,判断能够组成多少个闭环. 解法: 放大俩倍或者三倍 俩倍 \     ------->10 01 三倍 \ ------->100 010 001 然后深搜, ...

  7. 19.XPath选择器

    1.extract():提取数据 2./text()     :获取节点内容文本 3./@href   :获取节点href属性 4. @         :获取属性名称 需要注意问题: 用定义的规则那 ...

  8. text-overflow:ellipsis ,溢出文本显示省略号

    text-overflow:ellipsis 对溢出文本显示省略号有两个好处, 一是不用通过程序限定字数 二是有利于SEO. 需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友 ...

  9. (3/24)轻松配置 webpack3.x入口、出口配置项

    在上一节中我们只是简单的尝了一下webpack的鲜,对其有了基本的了解,对于上一节当中的打包方式,在实际开发中并不使用,而是通过webpack的配置文件的方式进行设置的,所以该节就在上一节的基础上学一 ...

  10. java web 读取文件,文件路劲不对的问题

    都知道,一般java项目,编译后的文件是在classes文件夹下面: 而java web项目,则是在WEB-INF/classes文件夹下面.new File(fileName)须先获取tomcat中 ...