Jsonp跨域访问原理分析
Jsonp是什么?
Jsonp实际上是一种跨域ajax发送http请求的方法,
它不是什么全新的技术,而是巧妙的利用,
组合目前的技术而实现跨域通讯的方法。我们知道浏览器由于安全考虑,
在编写ajax程序时,httprequest/xmlhttp都不能发送非本域的http请求,
类似下面的代码
<!--www.a.com/test.aspx页面里的内容 -->
<script>
ajax.request("http://www.b.com/ajaxserver.aspx",function(){});
</script>
都不会得到你想要的结果,由于您的网页域名是www.a.com,
而您发送的ajax请求的目标域却是www.b.com。
浏览器会阻止这一的请求,这就是所谓的同源策略。
而Jsonp就是解决这一问题的其中一种方式。
Jsonp原理分析
假如我们有一个网页www.a.com/index.aspx
其中一段代码如下:
<scriptsrc="http://www.b.com/test.js"><script>
test.js里面的代码:
alert("我是属于域www.b.com的");
显然这佯做毫无问题,我们打开www.a.com/index.aspx的时候,
会弹出一个框(我是属于www.b.com的)。
现在我们将www.a.com/index.aspx里面的代码改成这样
<script> function test(str){ alert(str); } window.onload=function(){var script=document.createElement("script"); script.src="http://www.b.com/test.js"; document.getElementByTagName("head")[0].appendChild(script); } </script>
www.b.com/test.js里面的内容改成:
test("我是www.b.com/test.js里面的参数哦");
如果不意外的话,浏览器加载完依然会弹出一个对话框(我是www.a.com里面的函数)。
这2个例子清晰的表明,对于js脚本,
浏览器并没有同源的限制,www.a.com能够直接使用www.b.com的javascript资源,
并且支持我们通过编写javascript脚本,动态的创建script标签,动态加载。
那么我们能否利用浏览器对于script没有同源限制的这一特性,
来实现我们的跨域通信呢,答案是肯定的,
jsonp实质上就是利用了这一点。
现在假设www.a.com/index.aspx 有个用户登陆了,
我们需要在index.aspx页面要将这一信息发送给www.b.com/login.aspx。index.aspx
我们可以编写如下面的代码
function callback(ret){ alert(ret); } var script=document.createElement("script"); script.src="http://www.b.com/login.aspx"+"?name="+youname+"&pwd="+pwd+"&call=callback"; document.getElementByTagName("head")[0].appendChild(script);
在www.b.com/login.aspx页面编写如下代码
Response.Header.Append("Content-Type","application/javascript"); var name=Request.QueryString["name"]; var pwd=Request.QueryString["pwd"]; var call=Request.QueryString["call"] if(SystemService.Login(name,pwd)){ Response.Write(call+"('login success!')");}else{Response.Write(call+"('name or pwd error!')"); } Response.End();
大家如果能看懂上面的代码吗? 对, 这就是所谓的jsonp。
Jsonp的缺点
1,目标域的服务器必须要如你所愿的输出一些你想要的脚本才可以。
如上面www.b.com/login.aspx页面输出的callback ,想象一下,
假如www.b.com/login.aspx输出的并非callback;
而是输出alert("。。。。。),那会是一种什么情况....
说白了, 目标域,如果不受你控制,又不支持这样方式,
那么你是无法使用Jsonp这种方式的。
2,只能使用Get请求