首頁 web前端 js教程 JSONP之我見_json

JSONP之我見_json

May 16, 2016 pm 04:07 PM
jsonp 跨域

JavaScript初學,一點自己的理解,有不當之處請大家指正~

JSONP:

本地html檔案要取得xxx網站(跨網域)資料時所使用的方法。

跨域問題:

外部伺服器的資料只能用外部伺服器中的js訪問,而本地js無法用XMLHttpRequest()存取。

外部伺服器中的Web服務提供JSON數據,例如在http://gumball.wickedlysmart.com/中,資料包含在函數updateSales中作為參數,現在要在本地html中存取外部伺服器中的JSON資料該怎麼辦?

1, 檢視Web服務文檔,明確服務實際使用的參數名稱(本例只有一個參數即一個物件數組);
2, 在url中指定一個回呼函數,http://gumball.wickedlysmart.com/?callback=updateSales,用來指定Web服務中存取JSON資料的函數名稱;
3, 在本地js檔案中使用剛才定義的函數名稱建立函數updateSales(物件),編寫處理得到外部JSON資料的方法;
4, 在html檔案中的

標籤下使用<script>標籤連結到外部Web服務,url為2中的那個路徑。 <p><strong>總結: <p>JSONP目的在於提供給本地html一個函數介面(本地html可透過在url後方加入?callback=functionName的方法指定函數名稱),為了確保資料存取的安全,伺服器將安全的資料放在回呼函數的參數中,函數內部的參數就是伺服器提供給本地的數據,至於怎麼使用這些數據就要在本地的js中定義這個callback函數了。 <p>注意:本地使用JSONP請求存取Web服務,可能會取得不安全的Js程式碼,所以要確保信任這個Web服務。 <p><strong>JSONP與XMLHttpRequest: <p>         XMLHttpRequest用於開發內部Web服務,內部存取內部,同域存取會更加簡單。 <p>         存取外部資料時(跨網域存取)要使用JSONP。 <p>以上所述就是本文的全部內容了,希望大家能夠喜歡,能夠對大家學習jsonp有所幫助。 </script>
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡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)

PHP Session 跨域問題的解決方法 PHP Session 跨域問題的解決方法 Oct 12, 2023 pm 03:00 PM

PHPSession跨域問題的解決方法在前後端分離的開發中,跨域請求已成為常態。在處理跨域問題時,我們通常會涉及session的使用和管理。然而,由於瀏覽器的同源策略限制,跨域情況下預設無法共享session。為了解決這個問題,我們需要採用一些技巧和方法來實現session的跨域共享。一、使用cookie跨域共享session最常

Vue 中如何進行跨域請求? Vue 中如何進行跨域請求? Jun 10, 2023 pm 10:30 PM

Vue是一種流行的JavaScript框架,用於建立現代化的Web應用程式。在使用Vue開發應用程式時,常常需要與不同的API交互,而這些API往往位於不同的伺服器上。由於跨域安全性策略的限制,當Vue應用程式在一個網域上運行時,它不能直接與另一個網域上的API進行通訊。本文將介紹幾種在Vue中進行跨域請求的方法。 1.使用代理常見的跨域解決方案是使用代理

如何使用Flask-CORS實現跨域資源共享 如何使用Flask-CORS實現跨域資源共享 Aug 02, 2023 pm 02:03 PM

如何使用Flask-CORS實現跨域資源共享引言:在網路應用開發中,跨域資源共享(CrossOriginResourceSharing,簡稱CORS)是一種機制,允許伺服器與指定的來源或網域名稱之間共享資源。使用CORS,我們可以靈活地控制不同域之間的資料傳輸,實現安全、可靠的跨域存取。在本文中,我們將介紹如何使用Flask-CORS擴充庫來實現CORS功

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

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

如何在HTML中允許跨域使用影像和畫布? 如何在HTML中允許跨域使用影像和畫布? Aug 30, 2023 pm 04:25 PM

為了允許跨網域使用影像和畫布,伺服器必須在其HTTP回應中包含適當的CORS(跨網域資源共用)頭。這些頭可以設定為允許特定的來源或方法,或允許任何來源存取資源。 HTMLCanvasAnHTML5CanvasisarectangularareaonawebpagethatiscontrolledbyJavaScriptcode.Anythingcanbedrawnonthecanvas,includingimages,shapes,text,andanimations.Thecanvasisagre

Vue技術開發中遇到的跨域問題及解決方法 Vue技術開發中遇到的跨域問題及解決方法 Oct 08, 2023 pm 09:36 PM

Vue技術開發中遇到的跨域問題及解決方法摘要:本文將介紹在Vue技術開發過程中,可能遇到的跨域問題以及解決方法。我們將從導致跨域的原因開始,然後介紹幾種常見的解決方案,並提供具體程式碼範例。一、跨域問題的原因在網路開發中,由於瀏覽器的安全策略,瀏覽器會限制從一個來源(網域、協定或連接埠)請求另一個來源的資源。這就是所謂的「同源策略」。當我們在Vue技術開發中,前端與

在Beego框架中使用CORS解決跨域問題 在Beego框架中使用CORS解決跨域問題 Jun 04, 2023 pm 07:40 PM

隨著Web應用程式的發展和互聯網的全球化,越來越多的應用程式需要進行跨域請求。對於前端開發人員而言,跨域請求是一個常見的問題,它可能導致應用程式無法正常運作。在這種情況下,解決跨域請求問題的最佳方法之一是使用CORS。在本文中,我們將重點放在如何在Beego框架中使用CORS來解決跨域問題。什麼是跨域請求?在網路應用程式中,跨網域請求是指從一個網域的網頁向另一

PHP Session 跨域的跨平台相容性處理 PHP Session 跨域的跨平台相容性處理 Oct 12, 2023 am 09:46 AM

PHPSession跨域的跨平台相容性處理隨著Web應用程式的發展,越來越多的開發者面臨跨域的問題。跨域是指在一個網域下的網頁去請求另一個網域下的資源,這在一定程度上增加了開發難度,特別是對於涉及到會話(Session)管理的應用程式來說,更是一個棘手的問題。本文將介紹如何在PHP中處理跨域的會話管理,並提供一些具體的程式碼範例。會話管理是We

See all articles