ajax jsonp跨域

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

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

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

簡(jiǎn)單理解

利用

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"}
});

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

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

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

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

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

另外不聲明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是通過(guò)動(dòng)態(tài)添加script標(biāo)簽，在src中添加查詢參數(shù)callback，再利用js運(yùn)行機(jī)制實(shí)現(xiàn)的，所以jsonp只適合GET請(qǐng)求。

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91137.html

相關(guān)文章

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

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

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

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

scq000 2019-08-20 17:16 評(píng)論0 收藏0
JSONP跨域訪問(wèn)API接口深入理解

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

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

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

ytwman 2019-08-22 11:21 評(píng)論0 收藏0
AJAX 跨域解析

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

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

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

alexnevsky 2019-08-22 15:00 評(píng)論0 收藏0