Ajax跨域原理JQuery之Jsonp使用剖析

Ajax跨域原理JQuery之Jsonp使用剖析技術

maybe yes 發表於2014-12-27 18:21

原文連接 : http://blog.lmlphp.com/archives/49  來自 : LMLPHP後院

有 關Ajax技術，對於咱們這些常常在互聯網打滾的人來講，已是再熟悉不過了。關於Ajax原理，以前我也研究過，這裏順帶解說一番。 JavaScript是一種基於事件的單線程執行腳本語言，要實現Ajax通訊，必須先實例化 XMLHttpRequest 對象，而後對該對象的 onreadystatechange 註冊事件，而後再執行 open 和 send 方法。通常來講，實現簡單的Ajax請求，咱們只須要在 readyState 等於 4(請求完成) 以後再進行後續的狀態碼判斷並處理。對於IE瀏覽器，實現起來稍有不一樣，IE系列是使用 ActiveXObject 控件來實現異步請求的，不一樣版本的IE瀏覽器在寫法上稍有不一樣，所以完整的Ajax類須要對IE系列瀏覽器作個判斷，不過IE11以後已經再也不是IE內核 了，此是後話。

Ajax技術是遵循同源策略的，全部的瀏覽器都是如此。試想，若是能夠隨意請求別的網站的資源，互聯網不就亂套了嗎。經過安 裝瀏覽器插件使用 background 技術也能夠實現跨域並與外部進行通訊，著名的360網頁搶票插件就是這麼實現的。在現實的需求中，常常會須要跨域，Ajax不能夠，HTML的一些其餘的 標籤，好比 IMG, LINK, SCRIPT等都是能夠的，萬維網的設計者們在這一點上仍是放鬆了，不過這樣確實帶來很多方便。著名的JSONP技術，就是經過SCRIPT標籤來實現請 求外部資源，網上不少的文章和帖子都說成了「Ajax跨域」，其實這樣已經再也不是Ajax技術了。

Jsonp雖然可以很方便的請求外部資 源，實現跨域與服務端通訊，但也有所限制的。這種限制要求服務端返回的內容必須是合法的 JavaScript 代碼，通常都須要配合客戶端的要求返回相應的回調函數。以前本人每次使用Jsonp實現跨域，都是動態的建立SCRIPT標籤，而後發出請求，雖然知道 JQuery也有提供這樣的功能，以前感受使用起來非常麻煩。最近使用JQuery的Ajax方法，才發現它封裝的比較好，JQuery每次發給服務端的 函數名都是惟一的，這點確實避免了複雜環境下容易出錯的問題。

附上使用JQuery實現Jsonp代碼示例，下面的代碼每次請求都是以 jsonpcallback 做爲參數名發送一個相似於「jQuery21102093567821251967_1419672602306」這樣的惟一的函數名給服務端，服務端以 這個名稱返回回調函數和數據：

<script>
$.ajax({
	url:'url',
	dataType:"jsonp",
	jsonp:"jsonpcallback",
	success:function(data){
		custom_callback(data);
	}
});
</script>

閱(33)評(0)查看評論