认识JSONP
JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
想要使用JSONP进行跨域访问，必须服务器端支持。其实JSONP早已存在了，只是说法比较新颖，我们在实际应用中也肯定用过。来看个例子：
jsonp.html
[code lang=”js”]
<!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>jsonp</title>
<script type="text/javascript">
function callback(data) {
alert(data);
}
</script>
<script type="text/javascript" src="jsonp.js"></script>
</head>
<body>
</body>
</html>
[/code]
jsonp.js
[code lang=”js”]
callback("这种实现方式叫做JSONP");
[/code]
运行 json.html 后结果会弹出“这种实现方式叫做JSONP”，例子很简单，这就是JSONP的原型。script 标签不存在跨域的问题，src 属性可以是任意的网址，我们可以写成“http://www.abc.com/jsonp.php”这样的动态页面地址。我们让这个动态页面返回“callback(“这种实现方式叫做JSONP”);”，是不是结果就和上面运行的结果一样了。我们再扩充一下，让这个动态页面接收一个参数，这个参数我们在传值的时候会传入我们将要执行的函数名，这个函数我们通常称之为回调函数。比如：“http://www.abc.com/jsonp.php?c=abc”这个地址接收一个c参数，让这个c参数值作为函数名返回。返回结果应该是：“abc(“这种实现方式叫做JSONP”);”。是不是已经大概明白了，我们在看个具体的实例：
demo.html 演示地址：http://demo.joyfulboy.cn/js/jsonp/JsonP.html
[code lang=”js”]
<!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>JsonP跨域的应用</title>
<style type="text/css">
body
{
padding: 20px;
margin: 0px;
}
img
{
border: 0px none;
vertical-align: bottom;
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
function callBack(data) {
document.body.innerHTML += "<h1>标题：" + data.title + "</h1><p>网址：" + data.link + "</p><p>日期：" + data.modified + "</p>";
for (var i = 0; i < data.items.length; i++ ) {
var img = document.createElement("img");
img.src = data.items[i].media.m;
document.body.appendChild(img);
}
}
</script>
<script type="text/javascript" src="http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=callBack"></script>
</html>
[/code]
运行 demo.html 结果我们会看到页面中动态添加和很多张图片，这就是JSONP的实现。
3 条评论