關于json-p

文章出處

json-p是什么

json-p實際上是一種跨域ajax發送http請求的方法，它不是什么全新的技術，而是巧妙的利用，組合目前的技術而實現跨域通訊的方法。我們知道瀏覽器由于安全考慮，在編寫ajax程序時，httprequest/xmlhttp都不能發送非本域的http請求，類似下面的代碼

<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的缺點

目標域的服務器必須要如你所愿的輸出一些你想要的腳本才可以。如上面www.b.com/login.aspx頁面輸出的callback ，想象一下，假如www.b.com/login.aspx輸出的并非callback;而是輸出alert（"你妹的，你妹的"），那會是一種什么情況....說白了，目標域，如果不受你控制，又不支持這樣方式，那么你是無法使用json-p這種方式的。
只能是get請求

文章列表