JSONP实现Ajax跨域访问-强哥

最新推荐文章于 2018-10-31 17:09:57 发布

u011886490

最新推荐文章于 2018-10-31 17:09:57 发布

阅读量956

点赞数

分类专栏：系统运维

本文链接：https://blog.csdn.net/lampzdrj/article/details/10598899

版权

系统运维专栏收录该内容

298 篇文章 0 订阅

订阅专栏

JSONP实现Ajax跨域访问

JSONP = JSON with padding，但JSONP和JSON不一样，它并不是一种数据格式。JSONP是一种JavaScript实现跨域cross-domain数据访问的方法。
基于same originpolicy，浏览器要求javascript/ajax只能够进行同域数据请求，该安全原因的限制使得使用开放API的数据不是非常方便。例如：Site1提供API:http://site1.com/api/user.php，输出内容为JSON格式的数据：
{"Name": "Min", "Id" : 1983,"Rank": 7}
在site2.com/test.html使用javascript代码将无法获取site1提供的API的数据，因为是跨域的。
JSONP利用HTML的<script>标签可获取任何来源JavaScript代码的特点，实现数据的跨域访问：
site2.com/test.html的代码如下：
<html>
<scripttype="text/javascript">
function jsonpCallback(result) {
alert(result.Name);
}
</script>
<script type="text/javascript"src="http://site1.com/api/user.php?cb=jsonpCallback"></script>
</html>
将site1.com/api/user.php的代码稍微进行修改，结果如下：
<?php
$data = '{"Name":"Min", "Id" : 1983, "Rank": 7}';

if (isset($_REQUEST['cb'])) {
print $_REQUEST['cb']."(".$data.")"; //相当于输出了jsonpCallback({"Name": "Min", "Id" :1983, "Rank": 7});
} else {
print $data;
}
?>
这样当运行site2.com/test.html的时候，代码<scripttype="text/javascript" src="http://site1.com/api/user.php?cb=jsonpCallback"></script>的结果变为：
<script type="text/javascript">
jsonpCallback({"Name": "Min", "Id" : 1983,"Rank": 7});
</script>
然后调用本地定义的jsonpCallback函数，输出result.Name即为Min。最终实现跨域数据访问。
因此总结JSONP的基本原理即是：在本地定义一个callback，通过<script>标签的src属性获取远程API的数据(将callback函数名传递过去)，远程服务器的API需要符合JSONP的规范，即将原本JSON格式的输出数据改写为javascript的函数调用代码(callback为函数，原JSON数据为参数)；这样API返回的不再是JSON格式的数据而是JavaScript的代码。
JSONP is script tag injection, passing the response from the server into a user specified function.
[JSONP]使用实例：
使用Flickr的API：
<html>
<head>

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

</head>
<body></body>
<scripttype="text/javascript">
function showPictures(pictures){
$.each(pictures.photos.photo,function(index, pic){
//{"id":"5953295109","owner":"36456011@N07","secret":"b847e26995", "server":"6023","farm":7, "title":"DSC02569","ispublic":1, "isfriend":0, "isfamily":0,"url_s":"http:\/\/farm7.static.flickr.com\/6023\/5953295109_b847e26995_m.jpg","height_s":"160", "width_s":"240"}
var path = pic.url_s;
if (pic.url_o != undefined) {
path = pic.url_o;
}
var img = "<a href='"+path+"'><imgsrc='"+pic.url_s+"' style='border: 0;'/>";
$('body').append(img);
});
}
</script>

<scripttype="text/javascript"src="http://www.flickr.com/services/rest/?method=flickr.photos.getRecent&format=json&api_key=10ce77eec0bce44c7238e52cac7a1afa&extras=url_o,url_s&jsoncallback=showPictures"></script>

</html>
使用jQuery.ajax提供的JSONP功能：
jQuery的ajax实现了JSONP方法，具体实现原理是：jQuery attaches a globalfunction to the window object that is called when the script is injected, thenthe function is removed on completion.，参看如下实例：
<html>
<head>

</head>
<body></body>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: "http://test.54min.com/jsonp.php",
dataType: "jsonp",
error: function(jqXHR, textStatus, errorThrown) {
if (textStatus =="error") {
alert(textStatus + " :" +errorThrown);
} else {
alert(textStatus);
}
},
success: function(data, textStatus, jqXHR) {
alert(data.msg);
}
});
});
</script>
</html>
jsonp.php的代码如下：
<?php
echo $_GET['callback'] . "({'msg':'this is the remotemsg'});";
?>
当在$.ajax中设置dataType:"jsonp"的时候，jQuery会自动在url之后添加?callback=?，因此server端的API需要接受参数名为callback的值，且callback=?表示jQuery为该回调函数分配一个随机的唯一的名称。如果需要使用别的参数名而不是callback，可以设置jsonp选项；也可以使用jsonpCallback指定回调函数名。具体参看：http://api.jquery.com/jQuery.ajax/
jQuery使用JSONP的简化方法：
jQuery.getJSON(url, [data,][success(data, textStatus, jqXHR)])相当于：
$.ajax({
url: url,
dataType: 'json',
data: data,
success: callback
});
且$.getJSON规定如果url选项指定了诸如callback=?的字符串的话，会将其看作是JSONP方法，因此，简化使用如下：
<html>
<head>

</head>
<body></body>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON("http://www.flickr.com/services/rest/?method=flickr.photos.getRecent&format=json&api_key=10ce77eec0bce44c7238e52cac7a1afa&extras=url_o,url_s&jsoncallback=?",function(data, textStatus, jqXHR) {
$.each(data.photos.photo, function(index, pic) {
var path = pic.url_s;
if (pic.url_o != undefined) {
path = pic.url_o;
}
var img = "<ahref='"+path+"'><img src='"+pic.url_s+"'style='border: 0;'/>";
$('body').append(img);
});
});
});
</script>
</html>