主頁 > 知識庫 > Ajax jsonp跨域請求實現方法

Ajax jsonp跨域請求實現方法

熱門標簽:硅語電話機器人公司 超級大富翁地圖標注 地圖標注項目怎么樣 機器人電銷騙局揭秘 ai機器人電銷資源 個人怎樣在百度地圖標注地名 越南河內地圖標注 云呼外撥網絡電話系統(tǒng) 騰訊地圖標注位置能用多久

什么是跨域?

簡單的來說,出于安全方面的考慮,頁面中的JavaScript無法訪問其他服務器上的數據,即“同源策略”。而跨域就是通過某些手段來繞過同源策略限制,實現不同服務器之間通信的效果。

具體策略限制情況可看下表:

 

URL 說明 允許通信
http://www.a.com/a.js
http://www.a.com/b.js
同一域名下 允許
http://www.a.com/lab/a.js
http://www.a.com/script/b.js
同一域名下不同文件夾 允許
http://www.a.com:8000/a.js
http://www.a.com/b.js
同一域名,不同端口 不允許
http://www.a.com/a.js
https://www.a.com/b.js
同一域名,不同協(xié)議 不允許
http://www.a.com/a.js
http://127.0.0.100/b.js
域名和域名對應ip 不允許
http://www.a.com/a.js
http://script.a.com/b.js
主域相同,子域不同 不允許
http://www.a.com/a.js
http://a.com/b.js
同一域名,不同二級域名(同上) 不允許
http://www.a.com/a.js
http://www.b.com/b.js
不同域名 不允許

什么是JSONP?

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式,而JSONP(JSON with Padding)則是JSON 的一種“使用模式”,通過這種模式可以實現數據的跨域獲取。

JSONP跨域的原理

在同源策略下,在某個服務器下的頁面是無法獲取到該服務器以外的數據的,但img、iframe、script等標簽是個例外,這些標簽可以通過src屬性請求到其他服務器上的數據。利用script標簽的開放策略,我們可以實現跨域請求數據,當然,也需要服務端的配合。當我們正常地請求一個JSON數據的時候,服務端返回的是一串JSON類型的數據,而我們使用JSONP模式來請求數據的時候,服務端返回的是一段可執(zhí)行的JavaScript代碼。

跨域: js有一個同源限制,簡單說來源不一樣的話就無法相互間交互.那么怎么算來源不一樣呢, 舉個例子:瀏覽器訪問-->服務器A--->得到頁面A---頁面A中的js腳本只能訪問服務器A的資源(相同域名和端口,此外域名與對應的ip也算不同源,要么都域名,要么都ip).

以上就是js的跨域問題,但是這里需要注意一點的是服務器A是沒有跨域的問題的,這個只有js存在這個問題,也就是說: 頁面A中js-->服務器A--->跨域資源,這個路徑是可以.只有 頁面A中的js--->跨域資源,這個路徑是不行的.

然后說一下解決方案中的jsonp,這個不是一種格式,而是一種解決方案.

jsonp的原理:js雖然有同源限制,但是引入js文件的時候卻沒有這個限制,也就是說:

script type="text/javascript" src="xxx/xxxx.js">/script>

其中src屬性引入js文件的時候是沒有同源限制的,此時是可以引入域外資源的.jsonp的原理就在這里,通過動態(tài)的創(chuàng)建一個以上那行js引入語句,通過其src屬性訪問域外資源.而域外資源服務器只要返回一個能被解析為js語句的字符串即可達到返回結果的目的,形如:

callback({"key":"value",...}) 

其中callback是需要事先約定的名字,綠字部分為要返回到json字符串,然后拼接成以上那種形式直接返回即可.這樣頁面中的js從服務端接收到這個拼接的字符串后,就會直接執(zhí)行本地的名為callback的js方法,這也就是為何callback這個需要事先約定的原因,需要保證頁面?zhèn)纫嬖谶@個js方法,這個方法傳入的參數就為服務器側的返回值.

ajax是支持jsonp的,所以以上那些麻煩事情都會替我們做,寫法如下:

$.ajax({
     type: 'GET',
     url: "http://127.0.0.1:8080/xxx/xxx",
     async: false,
     dataType: "jsonp",
     jsonp: "callback",
     success: function(result){
       .....
     },
     timeout:3000 
  });

紅字部分標識我們使用jsonp的方式調用,實際上此時這個已經不是傳統(tǒng)意義上的ajax的get請求了,它的真實實現方式就是我們上文中說的那樣.其中紅字部分的callback為我們要和服務器端進行溝通的部分,這個請求發(fā)送到服務器端,實際上這樣的:

http://127.0.0.1:8080/xxx/xxx?callback=jqueryxxxx

服務器端需要通過callback來取值(類似用request.getParameter("callback")),也就是取后面的jqueryxxxx等自動生成的值,這個值實際上就是對應的我們發(fā)送請求的ajax方法中的success回調方法,服務器端如果返回

jqueryxxxx({"ret":"ok"})

頁面中會自動執(zhí)行success方法,且將{"ret":"ok"}傳給success方法的參數result.

以上就是ajax通過jsonp的方式實現跨域訪問的過程.可以看出基本不用我們做什么額外操作,全都封裝好了.

ps:在jQuery中如何通過JSONP來跨域獲取數據

第一種方法是在ajax函數中設置dataType為'jsonp': 

$.ajax({
    dataType: 'jsonp',
    url: 'http://www.a.com/user?id=123',
    success: function(data){
        //處理data數據
    }
});

第二種方法是利用getJSON來實現,只要在地址中加上callback=?參數即可: 

$.getJSON('http://www.a.com/user?id=123callback=?', function(data){
    //處理data數據
});

也可以簡單地使用getScript方法:

//此時也可以在函數外定義foo方法
function foo(data){
    //處理data數據
}
$.getJSON('http://www.a.com/user?id=123callback=foo');

JSONP的應用

JSONP在開放API中可以起到非常重要的作用,開放API是運用在開發(fā)者自己的應用上,而許多應用往往是在開發(fā)者的服務器上而不是在新浪微博的服務器上,因此跨域請求數據成為開發(fā)者們所需要解決的一大問題,廣大開放平臺應該實現對JSONP的支持,這一點新浪微博開放平臺便做的非常好(雖然某些API里沒有說明,但實際上是可以使用JSONP方式調用的)。

您可能感興趣的文章:
  • 實例講解使用原生JavaScript處理AJAX請求的方法
  • 原生js jquery ajax請求以及jsonp的調用方法
  • 詳解JavaScript原生封裝ajax請求和Jquery中的ajax請求
  • 原生javascript的ajax請求及后臺PHP響應操作示例
  • Javascript原生ajax請求代碼實例
  • 輕松搞定jQuery+JSONP跨域請求的解決方案
  • JavaScript用JSONP跨域請求數據實例詳解
  • JSONP跨域請求實例詳解
  • 詳細解密jsonp跨域請求
  • JSONP跨域請求
  • jsonp跨域請求實現示例
  • 原生js實現ajax請求和JSONP跨域請求操作示例

標簽:內蒙古 遼源 舟山 海南 洛陽 鄭州 林芝 邢臺

巨人網絡通訊聲明:本文標題《Ajax jsonp跨域請求實現方法》,本文關鍵詞  Ajax,jsonp,跨域,請求,實現,;如發(fā)現本文內容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《Ajax jsonp跨域請求實現方法》相關的同類信息!
  • 本頁收集關于Ajax jsonp跨域請求實現方法的相關信息資訊供網民參考!
  • 推薦文章