首頁 web前端 js教程 jquery下利用jsonp跨域访问实现方法_jquery

jquery下利用jsonp跨域访问实现方法_jquery

May 16, 2016 pm 06:22 PM
jsonp 跨域訪問

复制代码 代码如下:

$.ajax({
async:false,
url: '', // 跨域URL
type: 'GET',
dataType: 'jsonp',
jsonp: 'jsoncallback', //默认callback
data: mydata, //请求数据
timeout: 5000,
beforeSend: function(){ //jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了
},
success: function (json) { //客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
if(json.actionErrors.length!=0){
alert(json.actionErrors);
}

},
complete: function(XMLHttpRequest, textStatus){

},
error: function(xhr){
//jsonp 方式此方法不被触发
//请求出错处理
alert("请求出错(请检查相关度网络状况.)");
}
});



复制代码 代码如下:

$.getJSON(url+"?callback=?",
function(json){

});

这种方式其实是上例$.ajax({..}) 的一种高级封装。

在服务端通过获得callback参数(如:jsonp*****)得到jQuery端随后要回调的
然后返回类似:"jsonp*****("+要返回的json数组+")";
jquery就会通过回调方法动态加载调用这个:jsonp*****(json数组);
这样就达到了跨域数据交换的目的.

JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患。

注意:jquey是不支持post方式跨域的。
参考:http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用Nginx Proxy Manager實現跨網域存取的授權管理 如何使用Nginx Proxy Manager實現跨網域存取的授權管理 Sep 27, 2023 pm 04:43 PM

如何使用NginxProxyManager實現跨網域存取的授權管理NginxProxyManager是一個強大的代理伺服器,可實現反向代理、負載平衡、SSL/TLS終端代理等功能。在實際應用中,我們經常會遇到前端跨域存取的問題,為了保護後端資源,我們需要進行授權管理。本文將介紹如何使用NginxProxyManager實現跨網域存取的授權管理,並提

Vue中如何利用JSONP實作跨域請求 Vue中如何利用JSONP實作跨域請求 Oct 15, 2023 pm 03:52 PM

Vue中如何利用JSONP實現跨域請求簡介由於同源策略的限制,前端在進行跨域請求時會受到一定的阻礙。 JSONP(JSONwithPadding)是一種跨域請求的方法,它利用<script>標籤的特性,透過動態建立<script>標籤來實現跨域請求,並將回應資料作為回呼函數的參數傳遞回來。本文將詳細介紹在Vue中如何利用JSONP實

Vue專案中如何利用JSONP進行跨域請求 Vue專案中如何利用JSONP進行跨域請求 Oct 15, 2023 am 10:07 AM

Vue專案中如何利用JSONP進行跨域請求引言:在Vue專案中,有時會遇到需要從不同網域下取得資料的情況,例如透過呼叫第三方API取得數據,一般情況下,由於瀏覽器的同來源策略,直接跨域請求是被禁止的。但是在某些情況下,我們可以利用JSONP技術來實作跨域請求。本文將介紹如何在Vue專案中使用JSONP進行跨域請求,並給出具體的程式碼範例。一、JSONP工作原理

PHP通訊:如何實現跨域資料傳輸? PHP通訊:如何實現跨域資料傳輸? Aug 20, 2023 am 11:17 AM

PHP通訊:如何實現跨域資料傳輸?引言:在網頁開發中,常常需要實現不同網域之間的資料傳輸,這就需要跨域通訊。本文將介紹使用PHP語言實作跨域資料傳輸的方法,並附上程式碼範例。一、什麼是跨域通訊?跨域通訊指的是網頁開發中,不同網域間進行資料傳輸的過程。通常情況下,由於同源策略的限制,瀏覽器會阻止頁面向不同網域的伺服器發送請求或接收回應。因此,為了在不同域之間實現

如何解決Java中的跨域存取問題 如何解決Java中的跨域存取問題 Oct 11, 2023 am 08:01 AM

如何解決Java中的跨域存取問題在使用Java開發Web應用程式時,我們經常會遇到跨網域存取問題。跨網域存取是指客戶端請求的資源來自於不同的網域,例如從www.domain1.com的網頁請求資源domain2.com的資源。由於同源策略的限制,這種跨域請求是不被允許的。本文將介紹幾種解決Java中跨域存取問題的方法,並提供具體的程式碼範例。方法一:使用Filter

Nginx搭建伺服器的跨網域存取設定與CORS協定支援指南 Nginx搭建伺服器的跨網域存取設定與CORS協定支援指南 Aug 04, 2023 pm 10:57 PM

Nginx搭建伺服器的跨網域存取設定和CORS協定支援指南引言:在目前的網頁應用程式開發中,跨網域請求已經成為一種常見的需求。為了確保安全性,瀏覽器預設會限制透過AJAX請求進行的跨網域操作。 CORS(跨域資源共享)協定為開發者提供了一個可靠的解決方案,可以實現跨域存取的可控授權。 Nginx是一個高效能的Web伺服器和反向代理伺服器,本文將介紹如何使用Nginx來搭

PHP中API如何處理JSONP和跨站點請求 PHP中API如何處理JSONP和跨站點請求 Jun 17, 2023 am 10:37 AM

隨著越來越多的網路應用程式開始支援跨站點請求和JSONP技術,PHP中的API設計者必須考慮如何處理這些請求。在本文中,我們將探討如何在PHP中處理JSONP和跨站點請求。首先,我們來看一下JSONP。 JSONP(JSONwithPadding)是一種允許在客戶端和伺服器之間跨網域請求資料的技術。它是透過使用JavaScript程式碼動態來創建一個<

jsonp怎麼解決跨域問題 jsonp怎麼解決跨域問題 Nov 29, 2023 am 10:18 AM

JSONP是一種透過動態建立<script>標籤來實現跨域請求的技術。其步驟如下:1、在客戶端頁面中建立一個回調函數,該函數用於處理從伺服器返回的資料;2、動態建立一個<script>標籤,設定其src屬性為目標伺服器的URL,並在URL中傳遞一個參數,該參數是回調函數的名稱;3、伺服器接收到請求後,在傳回的資料中將資料包裝在回調函數中,並傳回給客戶端等等。

See all articles