ajax jsonp跨域

kamushin233 發(fā)布于2019-08-22 10:43 / 2383人閱讀

摘要：簡單理解利用標(biāo)簽可以跨域，讓服務(wù)器端返回可執(zhí)行的函數(shù)，參數(shù)為要回發(fā)的數(shù)據(jù)。另外不聲明函數(shù)，使用也能拿到返回值。附加一種后端的處理跨域的方式如果的和的不匹配的話也會報(bào)錯(cuò)。

JSONP是一種非正式傳輸協(xié)議，該協(xié)議的一個(gè)要點(diǎn)就是允許用戶傳遞一個(gè)callback參數(shù)給服務(wù)端，然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會將這個(gè)callback參數(shù)作為函數(shù)名來包裹住JSON數(shù)據(jù)，這樣客戶端就可以隨意定制自己的函數(shù)來自動處理返回?cái)?shù)據(jù)了。

簡單理解

利用

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參數(shù)名
    jsonpCallback: "foo", // 自定義回調(diào)函數(shù)名稱
    data: {"firstname": "tom"}
});

看下請求及返回結(jié)果

不難看出，返回的是一個(gè)有實(shí)參的函數(shù)調(diào)用。

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

而這個(gè)函數(shù)是已經(jīng)在js里聲明好的。

處理過程就是$.ajax動態(tài)創(chuàng)建script添加src，完事再刪除一個(gè)過程。

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

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

注意：因?yàn)閖sonp是通過動態(tài)添加script標(biāo)簽，在src中添加查詢參數(shù)callback，再利用js運(yùn)行機(jī)制實(shí)現(xiàn)的，所以jsonp只適合GET請求。

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

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

如果request的Accept和response的Content-Type不匹配的話也會報(bào)錯(cuò)。

GPU云服務(wù)器云服務(wù)器 ajax jsonp跨域傳值 jsonp 跨域 jsonp 跨域亂碼 jsonp跨域請求

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/91137.html

相關(guān)文章

再也不學(xué)AJAX了?。ㄈ?em>跨域獲取資源 ② - JSONP & CORS

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

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

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

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

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

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

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

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

摘要：這里只講解了兩種常見的跨域方式，因?yàn)榇嬖谝恍┍锥耍虼送扑]使用等方式來解決跨域問題。一、什么是 AJAX 跨域問題同源策略規(guī)定，AJAX 請求（XMLHttpRequest）只能發(fā)給同源的網(wǎng)址，否則就會出錯(cuò)。所謂的同源策略是指 3 個(gè)相同：協(xié)議相同、域名相同、端口相同。比如 http://www.example.com/index.html 這個(gè)網(wǎng)址，協(xié)議是http ，域名是 w...

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

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

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