關於json-p

關於json-p

目錄

• • 關於json-p
  • json-p是什麼
  • 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請求