JSONP浅析（转） -

jyqc688

浏览: 145183 次
性别:
来自: 北京

最近访客更多访客>>

lliiqiang

cyj1988jyc

hejin_sl

coollyj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JSONP浅析（转）

博客分类：

jsonp

觉得有用转的，源地址：

http://hi.baidu.com/l4yn3/item/0a2b8ed3734921362b35c7e0

JSONP即JSON with padding，翻译成中文就是带填充的json，如果你告诉我你不知道什么是json，那建议你先去补习一下，很简单的东西。当然没关系jsonp不一定要用json数据格式的。

我们都知道ajax可以异步的处理数据给我们更好的用户体验，但是有一个问题：ajax只能获取同服务器上面的数据，也就是说它只能获得属于你自己的数据，别的服务器上的数据你是没有权利用它访问的。这就是所谓的同源策略，当初为了浏览器的安全定下的规则。可是如果我们需要用javascript访问非同源的数据怎么办，jsonp将是一个很好的选择。

话不多少，先贴实例代码，来源于网络。

jsonp.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo</title>
<script type="text/javascript">
function say(words) {
alert(words);
}
</script>
</head>
<body>
<script type="text/javascript" src="jsonp.php?callback=say"></script>
</body>
</html>

jsonp的关键技术就是用script标签调用远程脚本文件，因为这种方式是不受同源策略限制的。<script type="text/javascript" src="jsonp.php?callback=say"></script>
将向src所指向的远程脚本发送请求，当远程脚本文件处理完请求，按照http协议，当然会给客户端以相应。

jsonp.php代码如下：

<?php
$type = isset($_GET['type']) ? $_GET['type'] : '';
$callback = isset($_GET['callback']) ? $_GET['callback'] : '';
$json = '';

if ($type == 'json') {
$json = '{
"Image": {
"Width": 800,
"Height": 600,
"Title": "View from 15th Floor",
"Thumbnail": {
"Url": "http://www.example.com/image/481989943",
"Height": 125,
"Width": "100"
},
"IDs": [116, 943, 234, 38793]
}
}';
} else {
$json = '"Hello, everyone!"';
}

if (!empty($callback)) {
$json = $callback . '(' . $json . ')';
}

echo $json;

很简单是吧，我大概解释一下:我所请求的url是="jsonp.php?callback=say，没有发送json字符串，也就是说按照流程$json = '"Hello, everyone!"',然后由于$callback不为空，那么$json将被赋值为say("Hello everyone"),之后echo $json，就是echo say("Hello everyone")。我们知道无论是ajax还是什么，任何的输出都将作为服务器端对客户端的相应，那这样say("Hello everyone")就将返回给请求它的<script type="text/javascript" src="jsonp.php?callback=say"></script>标签对，也就变成了<script type="text/javascript" src="jsonp.php?callback=say">say("Hello everyone")</script>,又因为我们在
jsonp.html定义了say(words)这个函数，所以他会被执行，将会alert出Hello everyone!如图：