首先要说明一下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. Maven web项目启动出错

    问题描述: 在第一次建立maven项目后,启动测试,结果jsp页面报告404错误 问题解决: 在pom.xml中引入servlet-api 和 jsp-api,maven不会自动的添加,因此,要在首次 ...

  2. Web 下载图片为空

    问题描述: 文件下载功能是web开发中经常使用到的功能,使用HttpServletResponse对象就可以实现文件的下载.但是下载任务正常进行,下载下来的图片却是空 问题代码: //从服务器下载一张 ...

  3. ORM PetaPoco 框架的 CRUD 操作

    PetaPoco 的查询操作 public IEnumerable<T> GetAll(string sqlString, object[] obj) { try { IEnumerabl ...

  4. node实现缓存

    内容: 1.缓存基本原理 2.node实现缓存 1.缓存基本原理 第一重要.缓存策略: cache-control:用于控制缓存,常见的取值有private.no-cache.max-age.must ...

  5. django框架预备知识

    内容: 1.web预备知识 2.django介绍 3.web框架的本质及分类 4.django安装与基本设置 1.web预备知识 HTTP协议:https://www.cnblogs.com/wyb6 ...

  6. 解决问题E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用)

    在用sudo apt-get install 安装软件时,结果终端提示: “E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) E: 无法锁定管理目录(/ ...

  7. 0_Simple__simpleMPI

    MPI 的简单使用 ▶ 源代码.主机根结点生成随机数组,发布副本到各结点(例子用孩子使用了一个结点),分别使用 GPU 求平方根并求和,然后根结点使用 MPI 回收各节点的计算结果,规约求和后除以数组 ...

  8. 循环神经网络(RNN)

    1.    场景与应用 在循环神经网络可以用于文本生成.机器翻译还有看图描述等,在这些场景中很多都出现了RNN的身影. 2.    RNN的作用 传统的神经网络DNN或者CNN网络他们的输入和输出都是 ...

  9. leetcode504

    public class Solution { public string ConvertToBase7(int num) { ? "" : "-"; var ...

  10. DEMO: springboot 与 freemarker 集成

    直接在 DEMO: springboot 与 mybatis 集成 基础上,进行修改. 1.pom.xml 中引用 依赖 <dependency> <groupId>org.s ...