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!如图:

   

现在我们完成了调用服务器端数据的功能了,这就是最基本的jsonp原理,当然他能做很多很强大的事情!很明显它是需要服务器端配合的,可是如果程序没有写好,也会让黑客用这种技术来获取数据的!

 你可以试着修改一下请求的url,看看都回返回什么结果,深入的理解一下这个东西。

猜你喜欢

转载自jyqc688.iteye.com/blog/1702856
今日推荐