关闭

JSONP 教程

标签: JSONP 教程
190人阅读 评论(0) 收藏 举报
分类:

JSONP 教程

本章节我们将向大家介绍 JSONP 的知识。

Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

为什么我们从不同的域(网站)访问数据需要一个特殊的技术(JSONP )呢?这是因为同源策略。

同源策略,它是由Netscape提出的一个著名的安全策略,现在所有支持JavaScript 的浏览器都会使用这个策略。


JSONP 应用

1. 服务端JSONP格式数据

如客户想访问 : http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction。

假设客户期望返回JSON数据:["customername1","customername2"]。

真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。

服务端文件jsonp.php代码为:

jsonp.php 文件代码

<?phpheader('Content-type: application/json');//获取回调函数名$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);//json数据$json_data = '["customername1","customername2"]';//输出jsonp格式的数据echo $jsoncallback . "(" . $json_data . ")";?>

2. 客户端实现 callbackFunction 函数

<script type="text/javascript">function callbackFunction(result, methodName){ var html = '<ul>'; for(var i = 0; i < result.length; i++) { html += '<li>' + result[i] + '</li>'; } html += '</ul>'; document.getElementById('divCustomers').innerHTML = html;}</script>

页面展示

<div id="divCustomers"></div>

客户端页面完整代码

<!DOCTYPE html><html><head><meta charset="utf-8"><title>JSONP 实例</title></head><body> <div id="divCustomers"></div> <script type="text/javascript">
function callbackFunction(result, methodName) { var html = '<ul>'; for(var i = 0; i < result.length; i++) { html += '<li>' + result[i] + '</li>'; } html += '</ul>'; document.getElementById('divCustomers').innerHTML = html; }
</script><script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script></body></html>

jQuery 使用 JSONP

以上代码可以使用 jQuery 代码实例:

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JSONP 实例</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script> </head><body><div id="divCustomers"></div><script>
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) { var html = '<ul>'; for(var i = 0; i < data.length; i++) { html += '<li>' + data[i] + '</li>'; } html += '</ul>'; $('#divCustomers').html(html); });
</script></body></html>
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

jsonp跨域请求资源使用方法与简单原理

jsonp跨域请求资源
  • dnidong
  • dnidong
  • 2016-12-05 16:17
  • 852

对jsonp的callback的猜测

jquery jsonp的请求数据: $.ajax({ dataType : "JSONP", jsonp : "callback",//请求自动带上callback参数,callback值...
  • xiuye2015
  • xiuye2015
  • 2017-02-08 15:17
  • 3658

JQuery解决jsonp问题,后台采用java

创建html页面如下 <meta name="viewport" content="width=device-width, initial-s
  • qq_28988969
  • qq_28988969
  • 2017-08-01 21:59
  • 409

JSONP跨域请求例子

什么是jsonp? JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨...
  • jayshe100xin
  • jayshe100xin
  • 2014-06-28 21:50
  • 2724

JSONP原理优缺点(只能GET不支持POST)

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都 可以运行,不需要XMLHttpRequest或ActiveX...
  • z69183787
  • z69183787
  • 2014-02-14 10:08
  • 35479

jsonp实现json数据跨域访问

为什么会出现json数据跨域访问限制? 这是因为所有支持Javascript的浏览器都会使用同源策略这个安全策略。看看百度的解释: 同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支...
  • a491857321
  • a491857321
  • 2016-10-13 16:42
  • 1154

jsonp跨域传值

1、什么是jsonp? JSONP是一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数...
  • qq_36374223
  • qq_36374223
  • 2017-02-03 00:58
  • 2039

JSONP(手写一个跨域组件)

在客户端调用提供JSONP支持的URL Service,获取JSONP格式数据。 比如客户想访问http://www.yiwuku.com/myService.aspx?jsonp=callbackF...
  • zxiang248
  • zxiang248
  • 2016-09-23 08:44
  • 1484

自己封装的JSONP跨域函数

尝试封装了一个JSONP的函数。用来进行跨域操作。调用方式类似jQuery的ajax方式。 主要实现功能: 1.参数拼装。 2.给每个回调函数唯一命名。 3.在回调成功或请求失败之后删除创建的java...
  • liusaint1992
  • liusaint1992
  • 2016-03-22 23:53
  • 4758

JavaScript跨域问题之CORS方法与JSONP的对比

什么是跨域? 只要协议、域名、端口有任何一个不同,都会被当成不同的域。而JavaScript同源政策的限制,无法进行跨域调用解决方法: 1.跨域资源共享(CORS): 定义了在...
  • IT_caainiao
  • IT_caainiao
  • 2016-10-31 19:36
  • 992
    个人资料
    • 访问:325680次
    • 积分:4992
    • 等级:
    • 排名:第6573名
    • 原创:198篇
    • 转载:323篇
    • 译文:0篇
    • 评论:30条
    文章分类