您的位置：首页 > Web前端 > JavaScript

JSONP的原理

2015-10-19 20:41 666 查看
今天学习了下跨域的解决方式之一：JSONP。趁着热乎，赶紧写下。如果以后忘记了，可以随时翻阅。现在越来越发现随手写笔记的好处了，因为很多知识，学习了，当时你记得很清楚。可是知识这东西不像吃饭，一天三顿。过一段时间不用，就会忘记（真是吃大亏了）。好了，废话少说，进入正题。

JSON是一种数据格式，被原生JS支持。JSONP和JSON也有一点关系，后面再说。先来谈谈JS。大家都知道script的src可以引入不同域的JS（所有具有src的属性都可以），JSONP就是建立在此基础上的。先看下面一个例子

<!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></title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<body>
<script>
var callback = function(data) {
console.log(data.result);
};
callback({"result":"本地代码"});
</script>
<script src="jsonp.js"></script>
</body>
</html>
很正常的一个函数声明，并且调用。先别急，重点在后面。下面放jsonp.js的代码：

callback({"result":"后台代码"});

哈哈，其实也是本地callback函数的调用，不同的是：是通过script引入的外部函数。到这里，大家有没有想到什么？没错，如果jsonp.js引入的是不同域的js，我们本地通过声明相同的函数，后面再调用，那么我们就可以获得不同域的数据了。但是有个问题，怎么让远程服务器知道本地函数的名字呢。答案是我们可以加参数的方式实现。

例如：<script src="http://www.XXX.com/jsonp.js?callback=jsonpCallBack"></script>

通过这种传参的方式告知服务器函数的名字，然后后台就可以根据此名字返回相应的调用函数

（其实就是拼接字符串）。

借鉴：http://kb.cnblogs.com/page/139725/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航