首頁 > web前端 > js教程 > 主體

如何使用 JSONP 在 JavaScript 中發出跨網域 HTTP 請求?

Mary-Kate Olsen
發布: 2024-10-31 04:46:30
原創
392 人瀏覽過

How to Make Cross-Domain HTTP Requests in JavaScript Using JSONP?

使用Native API 在JavaScript 中進行JSONP 請求

跨域HTTP 請求經常會遇到同源策略,該策略會限制來自同源策略,該策略會限制來自同源策略以下來源的請求不同的域或不安全(HTTP) 域與安全性(HTTPS) 域。 JSONP(帶填充的 JSON)是一種用於規避此限制的技術,允許 JavaScript 程式碼從不同網域檢索資料。

建立JSONP 要求

讓沒有外部函式庫的JSONP 要求,請依照下列步驟操作:

  1. 建立回呼函數: 定義一個將處理回應資料的JavaScript 函數。此函數的名稱將用作 JSONP 請求中的回呼參數。
  2. 建構請求URL: JSONP 請求URL 應包含以下參數:

    • 託管資料的伺服器URL
    • 設定為回呼函數名稱的回呼參數
    • 要傳送的資料(可選)
  3. 建立腳本元素:建立<script>元素並將其src屬性設定為請求URL。瀏覽器將執行此腳本並發送 JSONP 請求。 </script>
  4. 附加腳本元素: 新增 <script>元素到 <head>或<正文>您的 HTML 文件的內容,這將觸發請求。 </script>

範例:

<code class="javascript">function foo(data) {
  // do stuff with data
}

var script = document.createElement('script');
script.src = '//example.com/path/to/jsonp?callback=foo';

document.head.appendChild(script);</code>
登入後複製

解析回應資料:

收到回應資料後,將以收到回應資料後,將會收到回應資料後,會收到數據作為參數呼叫回調函數。您可以使用 JavaScript 內建的 JSON.parse() 方法解析 JSON 回應,並在程式碼中使用產生的物件。

以上是如何使用 JSONP 在 JavaScript 中發出跨網域 HTTP 請求?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!