首先要说明一下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. 第12章 网络基础（1）_网络分层和TCP/IP协议族

    1. 协议的概念 (1)计算机网络中实现通信必须有一些约定.如对速率.传输代码.代码结构.传输控制步骤和出错控制等约定,这些约定即被称为通信协议 (2)在两个节点之间要成功地进行通信,两个节点之间必须 ...

  2. 【Linux_Unix系统编程】chapter6 进程

    chapter6 进程 重点关注进程虚拟内存的布局及内容.6.1 进程和程序 进程(process)是一个可执行程序(program)的实例. 程序是包含了一系列信息的文件,这些信息描述了如何在运行时 ...

  3. crs_stop 错误一列

      http://www.forzw.com/archives/703 grid 与 oracle 版本为11.2.0.4,为两节点RAC,在通过crs_stop -all命令关闭oracle服务时出 ...

  4. python(十二)下：ORM框架SQLAlchemy使用学习

    此出处:http://blog.csdn.net/fgf00/article/details/52949973 本节内容 ORM介绍 sqlalchemy安装 sqlalchemy基本使用 多外键关联 ...

  5. 0_Simple__vectorAdd + 0_Simple__vectorAdd_nvrtc + 0_Simple__vectorAddDrv

    ▶ 使用 CUDA Runtime API,运行时编译,Driver API 三种接口计算向量加法 ▶ 源代码,CUDA Runtime API #include <stdio.h> #i ...

  6. Unable to open file '.RES'

    Unable to open file '.RES' 另存工程,带来的隐患,工程图标也改不了. 搜索发现源码里某个man.cpp里带了prgram  resource aaa.res,换成新工程文件名 ...

  7. myeclipse配置gradle插件

    首先,到Gradle官网下载最新版的gradle,已经到了2.13了 下载地址是 http://gradle.org/gradle-download/ 下载下来解压到任意目录 然后配置Windows环 ...

  8. Simple2D-26 Simple2D 最后的工作，开发结束

    开始的时候打算将 Simple2D 做成一个库的,但现在没有那个功夫了. 要渲染顶点数据,就必须将渲染函数放置到 glClear( ) 函数和 SwapBuffers( ) 函数之间,但又不希望开发时 ...

  9. 【转】.net 实现 语音搜索(仅限WebKit内核浏览器)

    <input type="text" class="text" name="value_2" id="value_2&quo ...

  10. Mybatis知识(4)

    1.当实体类中的属性名和表中的字段名不一样 解决办法①: 通过在查询的sql语句中定义字段名的别名,让字段名的别名和实体类的属性名一致 <select id=”selectorder” para ...