PHP 中jsonp格式

转载 2017年01月03日 20:59:51

1. JSONP定义

JSONP是英文JSON with Padding的缩写,是一个非官方的协议。它允许在服务器端生成scripttags返回至客户端,通过javascript callback的形式来实现站点访问。 JSONP是一种scripttag的注入,将server返回的response添加到页面实现特定功能。

2.JSONP由来

要解释JSONP的来由,先要说一下浏览器的“同源策略(SOP:Same Origin Policy)”。简而言之,就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互,这包括共享和传递变量等。cookie的传递也是遵从同样策略。这就造成一些涉及到多个服务器的应用在整合时一些麻烦。跨域访问的问题造成A站点的Ajax代码无法访问B站点的数据。

如何解决跨域访问呢?那就要借助浏览器的一个特性:尽管浏览器不允许页面中的脚本程序跨域读取数据,但却允许HTML引用跨域的资源,如图片,CSS和脚本程序。对于脚本程序的引用比较特殊,它被浏览器解析以后,就和本地的脚本程序别无二致且可立即进行解释并执行。如在B站点的一个js文件,一个简单的提示框:alert(“ThisisVictor!”);。在A站点引用这个js,这个脚本就会在B站点的应用中执行,显示一个alert信息。由于站外脚本的引用是通过scripttag来实现的,而脚本程序又可通过DOM的方式可以对HTML页面的所有标签进行控制(包括动态的创建script标签),这就可以实现通过调用站外程序对本地资源进行更改了。另外,通过标记的使用,就可从服务端直接返回可执行的JavaScript函数调用或者JSON数据。

3. JSONP原理

首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成JSON数据。然后以JavaScript 语法的方式,生成一个function,function名字就是传递上来的参数jsonp.

然后,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段 js 语法的文档,返回给客户端。

最后,在客户端浏览器中解析script标签,并执行返回的JavaScript文档,此时数据作为参数,传入到了客户端预先定义好的回调函数里(动态执行回调函数)。

4、JSONP的客户端具体实现:

不管jQuery也好,extjs也罢,又或者是其他支持jsonp的框架,他们幕后所做的工作都是一样的。



我们现在www.test.com这个域名下面有这么个html文件testjsonp.html:

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
     <title>Untitled Page</title>
      <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
      <script type="text/javascript">
     jQuery(document).ready(function(){
        $.ajax({
             type: "GET",
             async: false,
             //url: "http://test/jsonp.php",
             url:"http://mytaobao.com/jsonp.php",
             dataType: "jsonp",
             jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
             success: function(json){
                 alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。回调函数名为: '+json.func);
             },
             error: function(){
                 alert("fail");
             }
         });
     });
     </script>
     </head>
  <body>
  </body>
 </html>

注意,要真正运行上面的代码可能需要jquery的文件,你可以将<script type="text/javascript" src="jquery-1.7.2.min.js"></script>改为你目录中jquery的文件路径:
如:<script type="text/javascript" src="js/jquery.js"></script>
然后,你可以再找个另外一个域名的web目录,将文件jsonp.php:
复制代码 代码如下:

<?php
$callback = $_GET["callback"];
$a = array(
 'code'=>'CA1998',
    'price'=>'6000',
    'tickets'=>20,
    'func'=>$callback,
);
$result = json_encode($a);
echo "flightHandler($result)";
exit;

放到这个目录下面去。这样就可以测试了。
直接在浏览器访问testjsonp.html.就可以看到效果了。

相关文章推荐

php中 如何生成jsonp数据接口及如何调用?

什么是jsonp? JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example....

json和jsonp数据格式返回

  • 2017-03-10 09:26
  • 54KB
  • 下载

jQuery Ajax 跨域下调用webservice返回jsonp格式数据实例

先是简单介绍什么是跨域,然后添出一个jQuery ajax跨域访问WebService的例子

教你如何使用JSONP数据格式,如何使用jQuery

介绍 在这篇文章中,我将解释执行跨域服务电话从客户端浏览器和工作需要做它使用jQuery的JSONP调用的障碍。我会还提供了一个一步一步实现的例子JSONP调用。NET 4.0中的WCF服务。 跨...

json和jsonp的使用格式

最近一直在看关于json和jsonp的区别和各自的用法、优缺点!  下面是我看到过解释最清楚的一片文章 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是...

java、jquery 、ajax跨域请求获取返回值(jsonp格式)

最近用到了ajax跨域请求(jsonp),整理起来以便自己及需要的朋友参考!第一种情况:java ———– servlet 第一步:ajax代码 function commonQuery(){va...

PHP AJAX JSONP实现跨域请求使用实例

实例1 test.html test ajax.js $.ajax({ type : "post", url : "ajax.php", ...

AJAX 跨域请求 – JSONP的使用,PHP实例详解

今天一个项目中遇到增加验证码,我本有一个服务器上有一套完整的验证和生成验证码的逻辑,本想直接通过ajax访问次服务器验证就好了,尝试了很久没有成功,返回状态码200,但是数据一直是空,经过查询,原来a...

js跨域交互(jQuery+php)之jsonp使用心得

jsonp是什么?说到jsonp,你可能最先想到JSON;它还真和JSON有关系;JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题...

PHP AJAX JSONP实现跨域请求使用实例

实例1  jquery-1.5.2.min.js 自己从网上下载 test.html test  ajax.js $.ajax(...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)