ajax jsonp跨域

kamushin233 發布于2019-08-22 10:43 / 2330人閱讀

摘要：簡單理解利用標簽可以跨域，讓服務器端返回可執行的函數，參數為要回發的數據。另外不聲明函數，使用也能拿到返回值。附加一種后端的處理跨域的方式如果的和的不匹配的話也會報錯。

JSONP是一種非正式傳輸協議，該協議的一個要點就是允許用戶傳遞一個callback參數給服務端，然后服務端返回數據時會將這個callback參數作為函數名來包裹住JSON數據，這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。

簡單理解

利用

php代碼

"tom","age"=>23);
echo $_GET["bar"]."(".json_encode($a).")";

下面以 $.ajax 的 jsonp 為例：

function foo(res) {
    console.log(res);
}
$.ajax({
    type: "get",
    url: "demo.php",
    dataType: "jsonp",
    jsonp: "bar", // jsonp參數名
    jsonpCallback: "foo", // 自定義回調函數名稱
    data: {"firstname": "tom"}
});

看下請求及返回結果

不難看出，返回的是一個有實參的函數調用。

foo({"name":"tom","age":23})

而這個函數是已經在js里聲明好的。

處理過程就是$.ajax動態創建script添加src，完事再刪除一個過程。

另外不聲明jsonpCallback函數，使用success也能拿到返回值。

$.ajax({
    type: "get",
    url: "demo.php",
    dataType: "jsonp",
    jsonp: "bar",
    jsonpCallback: "foo",
    data: {"firstname": "tom"},
    success: function(res) {
        console.log(res);
    }
});

注意：因為jsonp是通過動態添加script標簽，在src中添加查詢參數callback，再利用js運行機制實現的，所以jsonp只適合GET請求。

附加一種后端的處理跨域的方式：

header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept");

如果request的Accept和response的Content-Type不匹配的話也會報錯。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91137.html

再也不學AJAX了！（三）跨域獲取資源 ② - JSONP & CORS

摘要：瀏覽器的同源策略固然保障了互聯網世界的數據隱私與數據安全，但是如果當我們需要使用跨域請求資源時，同源策略又會成為開發者的阻礙。我們之前提到過，如果想要繞過瀏覽器同源策略，實現使用技術跨域獲取資源，需要服務端和客戶端的協同合作。瀏覽器的同源策略固然保障了互聯網世界的數據隱私與數據安全，但是如果當我們需要使用AJAX跨域請求資源時，同源策略又會成為開發者的阻礙。在本文中，我們會簡單介紹需...

enda 2019-08-21 17:55 評論0 收藏0
jsonp 跨域原理分析

摘要：為請求指定一個回調函數名。這主要用來讓生成一個獨特的函數名，這樣管理請求更容易，也能方便地提供回調函數和錯誤處理。在回調函數中，通常我們只需通過判斷請求是否完成，如果已完成，再根據判斷是否是一個成功的響應。本篇文章借鑒自博客園文章原文地址 AJAX即Asynchronous Javascript And XML（異步JavaScript和XML），是指一種創建交互式網頁應用的...

scq000 2019-08-20 17:16 評論0 收藏0
JSONP跨域訪問API接口深入理解

摘要：說明關于跨域問題的解決方案多達七八種，你不要說哪有這么多，我不跟你較真哈，你也別跟我較真哈自行百度或這里不會跟你說那么多種只說使用最多的一種你要非說用的不是最多的我不信哦你信好了哈哈你開心就好關于跨域瀏覽器的同源策略要了解什么是跨域你需要了說明關于跨域問題的解決方案多達七、八種，你不要說哪有這么多，我不跟你較真哈，你也別跟我較真哈, ?！自行百度或 Google, 這里不會跟你...

tunny 2019-06-28 18:28 評論0 收藏0
ajax跨域，這應該是最全的解決方案了

摘要：關于，強烈推薦閱讀跨域資源共享詳解阮一峰另外，這里也整理了一個實現原理圖簡化版如何判斷是否是簡單請求瀏覽器將請求分成兩類簡單請求和非簡單請求。前言從剛接觸前端開發起，跨域這個詞就一直以很高的頻率在身邊重復出現，一直到現在，已經調試過N個跨域相關的問題了，16年時也整理過一篇相關文章，但是感覺還是差了點什么，于是現在重新梳理了一下。個人見識有限，如有差錯，請多多見諒，歡迎提出iss...

ytwman 2019-08-22 11:21 評論0 收藏0
AJAX 跨域解析

摘要：這里只講解了兩種常見的跨域方式，因為存在一些弊端，因此推薦使用等方式來解決跨域問題。一、什么是 AJAX 跨域問題同源策略規定，AJAX 請求（XMLHttpRequest）只能發給同源的網址，否則就會出錯。所謂的同源策略是指 3 個相同：協議相同、域名相同、端口相同。比如 http://www.example.com/index.html 這個網址，協議是http ，域名是 w...

tinylcy 2019-08-23 12:14 評論0 收藏0
AJAX跨域完全講解

摘要：跨域完全講解今天在慕課網上學習了跨域完全講解我在收集面試題的時候其實就已經有過跨域的問題的了，當時候知道了為什么會存在跨域，以及跨域解決的方案有哪些，今天隨著課程的學習，又加深了跨域的理解，以此記錄下來。 AJAX跨域完全講解今天在慕課網上學習了AJAX跨域完全講解：https://www.imooc.com/learn/947 我在收集AJAX面試題的時候其實就已經有過AJAX跨域...

alexnevsky 2019-08-22 15:00 評論0 收藏0