Jsonp實現Ajax跨域Demo

2022-08-23 09:06:08 字數 1807 閱讀 3140

1、乙個眾所周知的問題,ajax直接請求普通檔案存在跨域無許可權訪問的問題,甭管你是靜態頁面、動態網頁、web服務、wcf,只要是跨域請求,一律不准;

2、不過我們又發現,web頁面上呼叫js檔案時則不受是否跨域的影響(不僅如此,我們還發現凡是擁有」src」這個屬性的標籤都擁有跨域的能力,比如script、img、iframe);

3、於是可以判斷,當前階段如果想通過純web端(activex控制項、服務端**、屬於未來的html5之websocket等方式不算)跨域訪問資料就只有一種可能,那就是在遠端伺服器上設法把資料裝進js格式的檔案裡,供客戶端呼叫和進一步處理;

4、恰巧我們已經知道有一種叫做json的純字元資料格式可以簡潔的描述複雜資料,更妙的是json還被js原生支援,所以在客戶端幾乎可以隨心所欲的處理這種格式的資料;

5、這樣子解決方案就呼之欲出了,web客戶端通過與呼叫指令碼一模一樣的方式,來呼叫跨域伺服器上動態生成的js格式檔案(一般以json為字尾),顯而易見,伺服器之所以要動態生成json檔案,目的就在於把客戶端需要的資料裝入進去。

6、客戶端在對json檔案呼叫成功之後,也就獲得了自己所需的資料,剩下的就是按照自己需求進行處理和展現了,這種獲取遠端資料的方式看起來非常像ajax,但其實並不一樣。

7、為了便於客戶端使用資料,逐漸形成了一種非正式傳輸協議,人們把它稱作jsonp,該協議的乙個要點就是允許使用者傳遞乙個callback引數給服務端,然後服務端返回資料時會將這個callback引數作為函式名來包裹住json資料,這樣客戶端就可以隨意定製自己的函式來自動處理返回資料了。

//第二種方法

$.getjson(""),

success: function(json),

error: function()

格式:handler();//handler為約定好的自定義**函式名稱

例如:return $callback."(".json_encode($data).")";

注意,jquey是不支援post方式跨域的.

為什麼呢?

雖然採用post +動態生成iframe是可以達到post跨域的目的,但這樣做是乙個比較極端的方式,不建議採用.

也可以說get方式的跨域是合法的,post方式從安全角度上,被認為是不合法的, 萬不得已還是不要劍走偏鋒..

client端跨域訪問的需求看來也引起w3c的注意了,看資料說html5 websocket標準支援跨域的資料交換,應該也是乙個將來可選的跨域資料交換的解決方案

ajax和jsonp這兩種技術在呼叫方式上「看起來」很像,目的也一樣,都是請求乙個url,然後把伺服器返回的資料進行處理,因此jquery和 ext等框架都把jsonp作為ajax的一種形式進行了封裝;但ajax和jsonp其實本質上是不同的東西。ajax的核心是通過 xmlhttprequest獲取非本頁內容,而jsonp的核心則是動態新增script標籤來呼叫伺服器提供的js指令碼。所以說,其實ajax與 jsonp的區別不在於是否跨域,ajax通過服務端**一樣可以實現跨域,jsonp本身也不排斥同域的資料的獲取。還有就是,jsonp是一種方式或 者說非強制性協議,如同ajax一樣,它也不一定非要用json格式來傳遞資料,如果你願意,字串都行,只不過這樣不利於用jsonp提供公開服務。總 而言之,jsonp不是ajax的乙個特例。

注:本文由

王智磊(王大寶兒)

JSONP跨域實現

跨域問題是由於瀏覽器為了防止csrf攻擊,避免惡意攻擊而帶來的風險 而採取的同源策略限制 當乙個頁面中使用xmlhttprequest物件傳送http請求時 xhr請求 必須 保證當前頁面和請求的物件是同源的,即協議,網域名稱和埠號要完全一致,否則 瀏覽器就會阻止此跨域請求返回的資料 同源策略 協議...

跨域 jsonp實現

ajax請求受同源策略影響,不允許進行跨域請求,而script標籤src屬性中的鏈結是可以訪問跨域的js指令碼的,利用這個特性,伺服器不再返回json格式的資料,而是返回一段條用某個函式的js 在src中進行了呼叫,實現跨域.src callback functionname script 複製 f...

jsonp解決ajax跨域問題

利用jsonp解決ajax跨域問題 至於success裡面的操作可以忽略 某工程下ajax請求 var isvisible true function getlog var startpage data.startpage var endpage data.endpage 拼接 導航 按鈕 和 資料...