相信大部分前端都遇到过跨域问题，也知道可以用jsonp处理跨域。像jquery，extjs等一些流行的库已经为我们封装好了jsonp的解决方案，我们可以很方便的来使用。接下来我们实际案例来简单的讲一下它的基本原理。
我们都知道ajax请求时，由于同源策略，会产生跨域，但是html标签的src属性是自带跨域功能的，比如img，script，link等，jsonp就是利用script标签的src属性来实现协商跨域。另外我们也知道，当网页加载完js文件后，就会去执行这个js脚本。因此服务器可以把数据塞到这个脚本里返回给前端去处理。
我们先看一个简单的例子
一个本地页面
<html>
<head>
<script src="https://xxx.remote.com/jsonp.js"></script>
</head>
<body></body>
</html>复制代码远程服务器的js文件
alert('我是远程文件');复制代码这时我们会看到页面上弹出一个alert警告框，那如果我们把参数换成前端需要的数据，函数名设为前端用来处理返回数据的方法，那不就完成了我们的需求嘛，既拿到了想要的数据，并且可以按照我们想要的方式去处理数据。
结合callback参数
为了方便测试，我事先在服务器上放了一个js文件
callbackHandler({ result: 'i am the jsonp result' });
// 就是简单的执行一个js函数，在本例中我把函数名和参数都写死了。
实际应用场景中，参数应为前端所请求的数据，函数名称为前端请求时callback参数的value值，
并且由服务器来动态生成的这个js文件返回给前端
复制代码本地页面
<html>
<head>
<script charset="utf-8">
function callbackHandler(data) {
console.log(data);
}
</script>
<script src="https://xxx.remote.com/jsonp.js?callback=callbackHandler"></script>
</head>
<body></body>
</html>复制代码
185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
