Jsonp跨域
Posted 大厨的笔记
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jsonp跨域相关的知识，希望对你有一定的参考价值。
为什么要跨域，因为浏览器的同源策略。在本域里不可以访问其他域的数据。也就是在自己家里拿不到别人家里的东西。同样别人也拿不到你家里的东西，哪怕是你没有锁门你的东西别人是拿不到的，只可以自己拿自己的东西。这就是同源策略。但是生活中不可能不求人是吧，邻居之间总要借点东西来用一下，怎么借呢 ？
javascript中可以跨域的元素有这几个：
img / iframe / link / script . . . . 可能以后会更多，先举例这几个，它们共同的特点就是可以引入外部文件，不管这个外部文件在哪里，那么这就等于成功跨域了。
利用 script 的 src 属性跨域
1. 我们的 one.com下有一个 one.js文件，它的代码是：
alert(‘我是one.com/one.html‘);
2. 我们的two.com下有一个two.html文件。它的代码是：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="http://one.com/one.js"></script>
</body>
</html>
那么执行 two.html 会发生什么？ 会弹出 “我是one.com/one.js”这个是没有问题的。那么这就成功跨域引入了一个外部的js文件并执行。
利用<script>的src来跨域：通过给src赋值一个不同源文件的地址，这个文件返回的字符串浏览器会当做 javascript 代码来执行，那么这段字符串中就可以包含我们要请求的数据。数据请求过来后我就可以在本页面定义一个方法 jsonpFun() 来处理获取到的数据，而获取到的字符串中就可以直接调用方法 jsonpFun() 并把数据以参数的形式传进去。以上面的代码为例，修改two.html中的代码为：
<script>
function jsonpFun(data){
alert(data)
}
</script>
<script src="http://one.com/one.js"></script>
修改one.js中的代码为：
jsonpFun(‘我是one.com/one.js‘);
那么运行two.html自然会弹出 “我是one.com/one.js”这个是没有什么问题的。因为在one.js中已经调用了two.html页面中定义的jsonpFun()方法并给这个方法传入了参数。
如果是动态的加载数据那么two.html里的js代码就要这样写：
function creatScript(url){
var script = document.createElement(‘script‘);
script.src = url;
document.body.appendChild(script);
}
function jsonpFun(data){
alert(data);
}
//需要跨域的时候调用函数并且传入返回数据函数的名字，
creatScript(‘http://one.com/one.aspx?callback=jsonpFun‘);
以上代码是请求了一个aspx格式的文件，这个地址多出了一个 ?callback=jsonpFun 这段多出来的字符串意思就是把本页面处理数据的函数的名字一起传过去。当然这少不了后台代码的配合：
protected void Page_Load(object sender, EventArgs e)
{
if (this.IsPostBack == false)
{
string callback = "";
if (Request["callback"] != null)
{
callback = Request["callback"];
//服务器端要返回的数据
string data = "我是后台aspx文件里的字符串";
Response.Write(callback + "(" + data + ")");
}
}
}
上面这段java代码的意思是：获取callback参数，然后组成一个函数的形式返回。那么运行two.html里的代码则会返回 jsonpFun("我是后台aspx文件里的字符串"）。直接调用 jsonpFun()并传参数。
这就是JSONP。欢迎高手指点
以上是关于Jsonp跨域的主要内容，如果未能解决你的问题，请参考以下文章