关于json-p

关于json-p

目录

json-p是什么

json-p实际上是一种跨域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。浏览器会阻止这一的请求，这就是所谓的同源策略。而json-p就是解决这一问题的其中一种方式。

json-p原理分析

假如我们有一个网页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。

json-p的缺点

1. 目标域的服务器必须要如你所愿的输出一些你想要的脚本才可以。如上面www.b.com/login.aspx页面输出的callback ，想象一下，假如www.b.com/login.aspx输出的并非callback;而是输出alert（"你妹的，你妹的"），那会是一种什么情况....说白了， 目标域，如果不受你控制，又不支持这样方式，那么你是无法使用json-p这种方式的。
2. 只能是get请求