Kas yra JSONP?

Suprantu JSON, bet ne JSONP. JSON Wikipedia dokumentas yra (buvo) geriausias JSONP paieškos rezultatas. Jame nurodyta:

JSONP arba „JSON su priedu“ yra JSON plėtinys, kuriame prefiksas yra nurodytas kaip paties skambučio argumentas.

Eh? Koks skambutis? Man nėra prasmės. JSON yra duomenų formatas. Jokio skambučio.

Antrasis paieškos rezultatas yra iš kai kurio vaikino, vardu Remy, kuris rašo apie JSONP:

JSONP yra scenarijaus žyma, kuri siunčia atsakymą iš serverio į vartotojo nurodytą funkciją.

Aš tai galiu suprasti, bet ji vis dar neturi prasmės.


Taigi, kas yra JSONP? Kodėl jis buvo sukurtas (kokia problema ją išsprendžia)? Ir kodėl turėčiau jį naudoti?


Įrašyta . Aš tiesiog sukūriau naują puslapį JSONP Wikipedia; dabar jis turi aiškų ir išsamų JSONP aprašymą pagal jvenema atsakymą.

1884 m
14 янв. „Cheeso“ nustatytas sausio 14 d 2010-01-14 23:53 '10, 11:53, 2010-01-14 23:53
@ 8 atsakymai

Tai tikrai nėra per sunku ...

Pasakykite, kad esate pavyzdyje.com, ir norite pateikti užklausą dėl example.net domeno. Norėdami tai padaryti, daugumoje naršyklių reikia peržengti domeno ribas.

Vienas elementas, apeinantis šį apribojimą, yra <script> žymės. Kai naudojate scenarijų žymą, domeno apribojimas ignoruojamas, tačiau įprastomis aplinkybėmis negalite nieko daryti su rezultatais, scenarijus tiesiog gauna sąmatą.

Įveskite JSONP. Kai pateikiate užklausą į serverį, kuris įgalintas JSONP, jūs perduodate specialų parametrą, kuris šiek tiek informuoja serverį apie jūsų puslapį. Tokiu būdu serveris gali gražiai užbaigti savo atsakymą į tai, kaip jūsų puslapis gali dirbti.

Pavyzdžiui, tarkime, kad serveris tikisi „atgalinio ryšio“ parametro, kad įgalintų JSONP galimybes. Tada jūsų prašymas atrodys taip:

JSONRequest “ pasiūlymas yra puikus sprendimas, kaip išspręsti tarpdomenų scenarijus, palaikyti saugumą ir užtikrinti tinkamą užklausos kontrolę. 

Šiomis dienomis (2015 m.) CORS yra rekomenduojamas požiūris prieš JSONRequest. JSONP vis dar naudinga senesnėms naršyklėms, tačiau, atsižvelgiant į saugumą, jei neturite pasirinkimo, CORS yra geriausias pasirinkimas.

1838 m
15 янв. Jvenema atsakymas, sausio 15 d 2010-01-15 00:08 '10, 00:08 2010-01-15 00:08

JSONP yra tikrai paprastas triukas, norint įveikti tą pačią XMLHttpRequest domeno politiką. (Kaip žinote, negalite siųsti AJAX užklausos (XMLHttpRequest) į kitą domeną.)

Taigi, užuot naudoję XMLHttpRequest, turime naudoti HTML scenarijų žymas, kurias paprastai naudojate atsisiųsti js failus, kad js galėtų priimti duomenis iš kito domeno. Skamba keistai?

Dalykas - paaiškėja, kad scenarijų žymos gali būti naudojamos panašiai kaip XMLHttpRequest ! Išbandykite:

 script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'http://www.someWebApiServer.com/some-data'; 

Todėl, įkėlus duomenis, gaunate scenarijų segmentą, kuris atrodo taip:

 <script> {['some string 1', 'some data', 'whatever data']} </script> 

Tačiau tai šiek tiek nepatogu, nes mes turime gauti šią masyvą iš scenarijaus žymos. Todėl JSONP kūrėjai nusprendė, kad tai veiks geriau (ir taip):

 script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'http://www.someWebApiServer.com/some-data ?callback=my_callback '; 

Atkreipkite dėmesį į „ my_callback“ funkciją. Taigi, kai JSONP serveris gauna jūsų užklausą ir suranda atgalinio ryšio parametrą - vietoj grąžinimo paprastą js masyvą, jis grąžina:

border=0
 my_callback({['some string 1', 'some data', 'whatever data']}); 

Pažiūrėkite, kur pelnas yra: dabar mes gauname automatinį atgalinį ryšį („my_callback“), kuris bus pradėtas gavus duomenis.
Viskas, ką jums reikia žinoti apie JSONP : tai yra atgalinio ryšio ir scenarijų žymos.

PASTABA. Tai yra paprasti JSONP naudojimo pavyzdžiai, jie nėra paruošti gamybos scenarijai.

Pagrindinis „JavaScript“ pavyzdys (paprastas „Twitter“ tiekimas naudojant JSONP)

 <html> <head> </head> <body> <div id = 'twitterFeed'></div> <script> function myCallback(dataWeGotViaJsonp){ var text = ''; var len = dataWeGotViaJsonp.length; for(var i=0;i<len;i++){ twitterEntry = dataWeGotViaJsonp[i]; text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>' } document.getElementById('twitterFeed').innerHTML = text; } </script> <script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10 </body> </html> 

Pagrindinis „jQuery“ pavyzdys (paprastas „Twitter“ kanalas naudojant JSONP)

 <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> $(document).ready(function(){ $.ajax({ url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10', dataType: 'jsonp', success: function(dataWeGotViaJsonp){ var text = ''; var len = dataWeGotViaJsonp.length; for(var i=0;i<len;i++){ twitterEntry = dataWeGotViaJsonp[i]; text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>' } $('#twitterFeed').html(text); } }); }) </script> </head> <body> <div id = 'twitterFeed'></div> </body> </html> 


JSONP reiškia JSON su padding . (Labai blogai pavadinta technika, nes ji tikrai neturi nieko bendro su tuo, ką dauguma žmonių suvoks kaip „užpildymą“).

655
30 июля '11 в 0:40 2011-07-30 00:40 atsakymas pateikiamas „ ThatGuy“ liepos 30 d., 11 val. 0:40 2011-07-30 00:40

„JSONP“ sukuria „scenarijaus“ elementą (arba HTML žymėjime, arba įdėjus į DOM per „JavaScript“), kuris prašo nuotolinės duomenų paslaugos vietos. Atsakymas yra „JavaScript“ įkeliamas į jūsų naršyklę su iš anksto nustatytos funkcijos pavadinimu ir parametru, kuris turi būti perduodamas, prašantis JSON duomenų. Kai vykdomas scenarijus, funkcija vadinama kartu su JSON duomenimis, leidžiančia prašančiam puslapiui gauti ir apdoroti duomenis.

Daugiau informacijos rasite šiuo adresu : https://blogs.sap.com/2013/07/15/secret-behind-jsonp/

kliento pusės kodo fragmentas

  <!DOCTYPE html> <html > 

PHP serverio kodo dalis

 <?php header("Content-Type: application/javascript"); $callback = $_GET["callback"]; $message = $_GET["message"]." you got a response from server yipeee!!!"; $jsonResponse = "{\"message\":\"" . $message . "\"}"; echo $callback . "(" . $jsonResponse . ")"; ?> 
41
17 марта '13 в 16:32 2013-03-17 16:32 atsakymą pateikė „ Ajain Vivek “ kovo 17 d. 13 val. 16:32 2013-03-17 16:32

Kadangi galite paprašyti serverio pridėti priešdėlį prie grąžinto JSON objekto. Pavyzdžiui

function_prefix(json_object);

taip, kad eval naršyklė „įterptų“ JSON eilutę kaip išraišką. Šis triukas leidžia serveriui „įvesti“ „JavaScript“ kodą tiesiai į kliento naršyklę, o tai apeina „tos pačios kilmės“ apribojimus.

Kitaip tariant, galite keistis duomenimis tarp domenų .


Paprastai XMLHttpRequest neleidžia tiesiogiai keistis domenų duomenų mainais (turite pereiti per tą patį domeną turinčią serverį), tuo tarpu:

<script src="some_other_domain/some_data.js> >" galite pasiekti duomenis iš kito domeno, išskyrus originalą.


Taip pat verta paminėti: nepaisant to, kad serveris turi būti laikomas „patikimu“ prieš bandant tokį „apgauti“, gali atsirasti galimų objekto formato pakeitimų ir pan. Jei function_prefix naudojamas JSON objektui gauti (t. Y. Js gimtoji funkcija), ši funkcija gali atlikti patikrinimus prieš priimant / toliau apdorojant grąžintus duomenis.

37
14 янв. Atsakymas pateikiamas jldupont 14 sausis 2010-01-14 23:58 '10, 23:58, 2010-01-14 23:58
17
28 марта '13 в 18:59 2013-03-28 18:59 atsakymas dardawk duotas kovo 28 d. 13 val. 18:59 2013-03-28 18:59

Paprastas JSONP naudojimo pavyzdys.

client.html

  <html> <head> </head> body> <input type="button" id="001" onclick=gO("getCompany") value="Company" /> <input type="button" id="002" onclick=gO("getPosition") value="Position"/> <h3> <div id="101"> </div> </h3> <script type="text/javascript"> var elem=document.getElementById("101"); function gO(callback){ script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'http://localhost/test/server.php?callback='+callback; elem.appendChild(script); elem.removeChild(script); } function getCompany(data){ var message="The company you work for is "+data.company +"<img src='"+data.image+"'/ >"; elem.innerHTML=message; } function getPosition(data){ var message="The position you are offered is "+data.position; elem.innerHTML=message; } </script> </body> </html> 

server.php

  <?php $callback=$_GET["callback"]; echo $callback; if($callback=='getCompany') $response="({\"company\":\"Google\",\"image\":\"xyz.jpg\"})"; else $response="({\"position\":\"Development Intern\"})"; echo $response; ?> 
10
06 июня '14 в 9:45 2014-06-06 09:45 atsakymas pateikiamas sarath joseph 06 birželio 14 d. 9:45 2014-06-06 09:45

Prieš suprasti JSONP, turite žinoti JSON ir XML formatą. Šiuo metu dažniausiai naudojamas interneto formatas yra XML, tačiau XML yra labai sudėtingas. Tai leidžia vartotojams nepatogiai tvarkyti įterptus tinklalapius.

Kad „JavaScript“ galėtų lengvai keistis duomenimis, net kaip duomenų apdorojimo programa, formuluotę naudojame pagal „JavaScript“ objektus ir sukūrėme paprastą duomenų mainų formatą, kuris yra JSON. JSON gali būti naudojamas kaip duomenys arba „JavaScript“ programa.

JSON gali būti tiesiogiai įdėta į „JavaScript“, naudojant juos, galite tiesiogiai vykdyti tam tikrą „JSON“ programą, tačiau dėl saugumo apribojimų naršyklės „Sandbox“ mechanizmas neleidžia vykdyti tarp domeno prieigos JSON kodo.

Kad JSON būtų perduotas po vykdymo, mes sukūrėme JSONP. JSONP apeina naršyklės saugumo apribojimus naudojant „JavaScript“ atgalinio ryšio funkciją ir <script>.

Taigi, trumpai paaiškinkite, kas yra JSONP, kokia problema sprendžiama (kada ją naudoti).

9
08 дек. Atsakymą pateikė Marcus Thornton. 2015-12-08 07:02 '15 at 7:02 am 2015-12-08 07:02

Jau buvo pateikti puikūs atsakymai, turiu tik pateikti savo kodą kaip kodo blokus javascript'e (aš taip pat turėsiu modernesnį ir geresnį sprendimą dėl užklausų su kryžminiu paleidimu: CORS su HTTP antraštėmis):

JSONP:

1.client_jsonp.js

 $.ajax({ url: "http://api_test_server.proudlygeek.c9.io/?callback=?", dataType: "jsonp", success: function(data) { console.log(data); } });​​​​​​​​​​​​​​​​​​ 

2.server_jsonp.js

 var http = require("http"), url = require("url"); var server = http.createServer(function(req, res) { var callback = url.parse(req.url, true).query.callback || "myCallback"; console.log(url.parse(req.url, true).query.callback); var data = { 'name': "Gianpiero", 'last': "Fiorelli", 'age': 37 }; data = callback + '(' + JSON.stringify(data) + ');'; res.writeHead(200, {'Content-Type': 'application/json'}); res.end(data); }); server.listen(process.env.PORT, process.env.IP); console.log('Server running at ' + process.env.PORT + ':' + process.env.IP); 

CORS :

3.client_cors.js

 $.ajax({ url: "http://api_test_server.proudlygeek.c9.io/", success: function(data) { console.log(data); } });​ 

4.server_cors.js

 var http = require("http"), url = require("url"); var server = http.createServer(function(req, res) { console.log(req.headers); var data = { 'name': "Gianpiero", 'last': "Fiorelli", 'age': 37 }; res.writeHead(200, { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' }); res.end(JSON.stringify(data)); }); server.listen(process.env.PORT, process.env.IP); console.log('Server running at ' + process.env.PORT + ':' + process.env.IP); 
0
04 дек. Atsakymas duotas Humoyun 04 Dec. 2018-12-04 05:39 '18 at 5:39 2018-12-04 05:39