JSONP nedir ve neden olu┼čturuldu?


Al─▒nan cevaba git


JSON'u anl─▒yorum ama JSONP'yi de─čil. Wikipedia'n─▒n JSON belgesinde, JSONP i├žin en ├žok aranan sonu├ž oldu (oldu). Bu diyor ki:

JSONP veya "Dolgu ile JSON" bir ├Ânek ├ža─čr─▒n─▒n kendisinin giri┼č arg├╝man─▒ olarak belirtildi─či bir JSON uzant─▒s─▒d─▒r.

Ha? Ne ├ža─čr─▒s─▒? Bu bana hi├ž mant─▒kl─▒ gelmiyor. JSON bir veri format─▒d─▒r. Arama yok.

2 arama sonucu diye birine dan Remy JSONP hakk─▒nda ┼čunlar─▒ yazm─▒┼č:

JSONP, yan─▒t─▒ sunucudan kullan─▒c─▒ taraf─▒ndan belirlenen bir i┼čleve ileten komut dosyas─▒ etiketi enjeksiyonudur.

Bunu anlayabilirim, ama hala bir anlam ifade etmiyor.


Peki JSONP nedir? Neden yarat─▒ld─▒ (hangi problemi ├ž├Âz├╝yor)? Ve neden kullanay─▒m ki?


Ek : Wikipedia'da JSONP i├žin yeni bir sayfa haz─▒rlad─▒m ; ┼×imdi jvenema'n─▒n cevab─▒n─▒ temel alan JSONP'─▒n net ve kapsaml─▒ bir a├ž─▒klamas─▒na sahiptir .


2021









Cevap say─▒s─▒n─▒ say: 9






Asl─▒nda ├žok da karma┼č─▒k de─čil.

Etki alan─▒nda oldu─čunuzu ve etki alan─▒ example.com i├žin bir istek yapmak istedi─činizi varsayal─▒m example.net . Bunu yapmak i├žin, taray─▒c─▒ alanlar─▒n─▒n ├žo─čunda bir hay─▒r-hay─▒r olan etki alan─▒ s─▒n─▒rlar─▒n─▒ ge├žmeniz gerekir .

Bu s─▒n─▒rlamay─▒ atlayan bir ├Â─če <script> etiketlerdir. Bir komut dosyas─▒ etiketi kulland─▒─č─▒n─▒zda, etki alan─▒ s─▒n─▒rlamas─▒ yoksay─▒l─▒r, ancak normal ko┼čullar alt─▒nda , sonu├žlarla ilgili hi├žbir ┼čey yapamazs─▒n─▒z , komut dosyas─▒ yaln─▒zca de─čerlendirilir.

Girin JSONP . ─░ste─činizi JSONP'nin etkin oldu─ču bir sunucuya yapt─▒─č─▒n─▒zda, sunucuya sayfan─▒z hakk─▒nda biraz bilgi veren ├Âzel bir parametre iletirsiniz. Bu ┼čekilde, sunucu yan─▒t─▒n─▒ sayfan─▒z─▒n idare edebilece─či ┼čekilde g├╝zel bir ┼čekilde sarabilir.

├ľrne─čin, sunucunun callback JSONP ├Âzelliklerini etkinle┼čtirmek i├žin ├ža─čr─▒lan bir parametre bekledi─čini s├Âyleyin. Sonra iste─činiz ┼č├Âyle g├Âr├╝n├╝r:

 http://www.example.net/sample.aspx?callback=mycallback
 

JSONP olmadan, bunun gibi baz─▒ temel JavaScript nesnelerini d├Ând├╝rebilir:

 { foo: 'bar' }
 

Bununla birlikte, JSONP ile sunucu "geri arama" parametresini ald─▒─č─▒nda, sonucu biraz farkl─▒ bir ┼čekilde sarar ve ┼č├Âyle bir ┼čey d├Ând├╝r├╝r:

 mycallback({ foo: 'bar' });
 

G├Ârd├╝─č├╝n├╝z gibi, ┼čimdi belirtti─činiz y├Ântemi ├ža─č─▒racak. B├Âylece, sayfan─▒zda geri arama i┼člevini tan─▒mlars─▒n─▒z:

 mycallback = function(data){
  alert(data.foo);
};
 

Ve ┼čimdi, komut dosyas─▒ y├╝klendi─činde, de─čerlendirilecek ve i┼čleviniz yerine getirilecektir. Voila, etki alanlar─▒ aras─▒ istekleri!

JSONP ile ilgili en b├╝y├╝k sorunu dikkat etmenizde yarar var: ─░ste─čin kontrol├╝n├╝ ├žok kaybedersiniz. ├ľrne─čin, uygun ar─▒za kodlar─▒n─▒ geri alman─▒n "g├╝zel" bir yolu yoktur. Sonu├ž olarak, iste─či izlemek i├žin zamanlay─▒c─▒lar─▒ kullan─▒rs─▒n─▒z, bu her zaman biraz ┼č├╝phelidir. JSONRequest teklifi, etki alanlar─▒ aras─▒ komut dosyas─▒ ├žal─▒┼čt─▒rmaya izin vermek, g├╝venli─či sa─člamak ve iste─čin uygun ┼čekilde kontrol edilmesini sa─člamak i├žin m├╝kemmel bir ├ž├Âz├╝md├╝r.

Bug├╝nlerde (2015), CORS , JSONRequest'e kar┼č─▒ ├Ânerilen bir yakla┼č─▒md─▒r. JSONP, daha eski taray─▒c─▒ deste─či i├žin kullan─▒┼čl─▒d─▒r, ancak CORS daha iyi bir se├ženek olmad─▒─č─▒ s├╝rece, g├╝venlik a├ž─▒s─▒ndan verilen sonu├žlara g├Âre.


1964







JSONP , XMLHttpRequest ayn─▒ etki alan─▒ politikas─▒n─▒ yenmek i├žin ger├žekten basit bir p├╝f noktas─▒d─▒r . (Bildi─činiz gibi AJAX (XMLHttpRequest) iste─či farkl─▒ bir etki alan─▒na g├Ânderilemiyor.)

Yani - XMLHttpRequest kullanmak yerine, js'nin ba┼čka bir alandan veri alabilmesi i├žin genellikle js dosyalar─▒n─▒ y├╝klemek i├žin kulland─▒─č─▒n─▒z script HTML etiketlerini kullanmak zorunday─▒z. Kula─ča garip geliyor?

┼×ey - ├ž─▒k─▒yor - script etiketleri XMLHttpRequest ! 'E benzer bir ┼čekilde kullan─▒labilir ! ┼×una bir bak:

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

Verileri y├╝kledikten sonra buna benzeyen bir script segmenti ile sonlanacaks─▒n─▒z :

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

Ancak bu biraz sak─▒ncal─▒d─▒r, ├ž├╝nk├╝ bu diziyi script etiketinden almak zorunday─▒z . B├Âylece JSONP yarat─▒c─▒lar─▒ bunun daha iyi ├žal─▒┼čaca─č─▒na karar verdi (ve ├Âyle):

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

Oradaki my_callback i┼člevine dikkat edin ? Yani - JSONP sunucusu iste─činizi ald─▒─č─▒nda ve geri arama parametresini buldu─čunda - d├╝z js dizisini d├Ând├╝rmek yerine ┼čunu d├Ând├╝r├╝r:

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

K├ór─▒n nerede oldu─čunu g├Âr├╝n: ┼×imdi verileri ald─▒─č─▒m─▒zda tetiklenecek olan otomatik geri arama (my_callback) al─▒yoruz. JSONP
hakk─▒nda bilmeniz gereken tek ┼čey bu: bir geri ├ža─č─▒rma ve script etiketleri.

NOT: Bunlar JSONP kullan─▒m─▒n─▒n basit ├Ârnekleridir, bunlar ├╝retime haz─▒r komut dosyalar─▒ de─čildir.

Temel JavaScript ├Ârne─či (JSONP kullanarak basit Twitter beslemesi)

 <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&callback=myCallback"></script>
    </body>
</html>
 

Temel jQuery ├Ârne─či (JSONP kullanarak basit Twitter beslemesi)

 <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 , Dolgu ile JSON'un k─▒saltmas─▒d─▒r . (├žok zay─▒f olarak adland─▒r─▒lan teknik, ├žo─ču insan─▒n ÔÇťdoldurmaÔÇŁ olarak d├╝┼č├╝necekleri ile hi├žbir ilgisi olmad─▒─č─▒ i├žin ger├žekten.


693







JSONP, uzak bir veri hizmeti konumu isteyen bir ÔÇťkomut dosyas─▒ÔÇŁ ├Â─česi (HTML i┼čaretlemesinde veya DOM i├žine JavaScript arac─▒l─▒─č─▒yla eklenmi┼č) olu┼čturarak ├žal─▒┼č─▒r. Yan─▒t, taray─▒c─▒n─▒za ├Ânceden tan─▒mlanm─▒┼č i┼člevin ad─▒yla birlikte g├Ânderilen ve JSON verileri istenen parametre iletilen bir javascript. Betik ├žal─▒┼čt─▒r─▒ld─▒─č─▒nda, i┼člev, talep eden sayfan─▒n verileri almas─▒na ve i┼člemesine izin vererek JSON verileriyle birlikte ├ža─čr─▒l─▒r.

Daha Fazla Okuma Ziyareti ─░├žin: https://blogs.sap.com/2013/07/15/secret-behind-jsonp/

istemci taraf─▒ kod snippet'i

     <!DOCTYPE html>
    <html lang="en">
    <head>
     <title>AvLabz - CORS : The Secrets Behind JSONP </title>
     <meta charset="UTF-8" />
    </head>
    <body>
      <input type="text" id="username" placeholder="Enter Your Name"/>
      <button type="submit" onclick="sendRequest()"> Send Request to Server </button>
    <script>
    "use strict";
    //Construct the script tag at Runtime
    function requestServerCall(url) {
      var head = document.head;
      var script = document.createElement("script");

      script.setAttribute("src", url);
      head.appendChild(script);
      head.removeChild(script);
    }

    //Predefined callback function    
    function jsonpCallback(data) {
      alert(data.message); // Response data from the server
    }

    //Reference to the input field
    var username = document.getElementById("username");

    //Send Request to Server
    function sendRequest() {
      // Edit with your Web Service URL
      requestServerCall("http://localhost/PHP_Series/CORS/myService.php?callback=jsonpCallback&message="+username.value+"");
    }    

  </script>
   </body>
   </html>
 

PHP kodunun sunucu taraf─▒ par├žas─▒

 <?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 . ")";
?>
 

44







├ç├╝nk├╝ sunucudan d├Ânen JSON nesnesine bir ├Ân ek eklemesini isteyebilirsiniz. ├ľrne─čin

function_prefix(json_object);

Taray─▒c─▒n─▒n eval JSON dizesini bir ifade olarak "sat─▒r i├ži" haline getirmesi i├žin . Bu numara, sunucunun javascript kodunu do─črudan ─░stemci taray─▒c─▒s─▒nda "enjekte etmesini" ve "ayn─▒ k├Âken" k─▒s─▒tlamalar─▒n─▒ atlayarak bunu m├╝mk├╝n k─▒lar.

Ba┼čka bir deyi┼čle, etki alanlar─▒ aras─▒ veri al─▒┼čveri┼čine sahip olabilirsiniz .


Normal olarak, XMLHttpRequest etki alanlar─▒ aras─▒ veri al─▒┼čveri┼čine do─črudan izin vermez (birinin ayn─▒ etki alan─▒ndaki bir sunucudan ge├žmesi gerekir);

<script src="some_other_domain/some_data.js&prefix=function_prefix > `one, k├Âkenden farkl─▒ bir alan ad─▒ndan verilere eri┼čebilir.


Ayr─▒ca kayda de─čer: Bu t├╝r bir "hile" denemeden ├Ânce sunucu "g├╝venilir" olarak kabul edilmekle birlikte, nesne bi├žiminde vb. Olas─▒ de─či┼čikliklerin yan etkileri bulunabilir. function_prefix JSON nesnesini almak i├žin bir (yani uygun bir js i┼člevi) kullan─▒l─▒rsa, s├Âz konusu i┼člev d├Ând├╝r├╝len verileri kabul etmeden / i┼člemden ge├žirmeden ├Ânce kontrolleri ger├žekle┼čtirebilir.


39







JSONP, etki alanlar─▒ aras─▒ komut dosyas─▒ olu┼čturma hatalar─▒n─▒ gidermek i├žin harika bir yerdir. Sunucu taraf─▒nda bir AJAX proxy uygulamas─▒ gerekmeksizin yaln─▒zca bir JSONP servisini yaln─▒zca JS ile kullanabilirsiniz.

B1t.co servisini nas─▒l ├žal─▒┼čt─▒─č─▒n─▒ g├Ârmek i├žin kullanabilirsiniz . Bu, URLÔÇÖlerinizi k├╝├ž├╝ltmeniz i├žin sizi y├Ânlendiren ├╝cretsiz bir JSONP hizmetidir. Hizmet i├žin kullan─▒lacak URL:

http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack]&url=[escapedUrlToMinify]

├ľrne─čin arama, http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&url=google.com

d├Ânecekti

 whateverJavascriptName({"success":true,"url":"http://google.com","shortUrl":"http://b1t.co/54"});
 

Ve bu, js'nize bir src olarak y├╝klendi─činde, geri ├ža─č─▒rma i┼čleviniz olarak uygulaman─▒z gereken her bir JavascriptAd─▒ otomatik olarak ├žal─▒┼čacakt─▒r:

 function minifyResultsCallBack(data)
{
    document.getElementById("results").innerHTML = JSON.stringify(data);
}
 

JSONP ├ža─čr─▒s─▒n─▒ ger├žekten yapmak i├žin birka├ž yolla (jQuery kullan─▒m─▒ dahil) yapabilirsiniz ancak i┼čte size saf bir JS ├Ârne─či:

 function minify(urlToMinify)
{
   url = escape(urlToMinify);
   var s = document.createElement('script');
   s.id = 'dynScript';
   s.type='text/javascript';
   s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
   document.getElementsByTagName('head')[0].appendChild(s);
}
 

Bir ad─▒m ad─▒m ├Ârnek ve ├╝zerinde ├žal─▒┼čmak i├žin bir jsonp web servisi mevcuttur: bu yaz─▒


19







JSONP kullan─▒m─▒ i├žin basit bir ├Ârnek.

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;

    ?>    
 

13







JSONP'yi anlamadan ├Ânce, JSON bi├žimini ve XML'ini bilmeniz gerekir. ┼×u anda web'de en s─▒k kullan─▒lan veri format─▒ XML'dir, ancak XML olduk├ža karma┼č─▒kt─▒r. Kullan─▒c─▒lar─▒ Web sayfalar─▒na g├Âm├╝l├╝ i┼člem yapmak i├žin elveri┼čsiz k─▒lar.

JavaScript'in veri al─▒┼čveri┼či program─▒ olarak bile kolayca veri al─▒┼čveri┼či yapabilmesi i├žin, JavaScript nesnelerine g├Âre ifadeler kullan─▒yoruz ve JSON olan basit bir veri de─či┼čim format─▒ geli┼čtirdik. JSON veri olarak veya bir JavaScript program─▒ olarak kullan─▒labilir.

JSON do─črudan JavaScript'e eklenebilir, bunlar─▒ kullanarak do─črudan belirli JSON program─▒n─▒ ├žal─▒┼čt─▒rabilirsiniz, ancak g├╝venlik k─▒s─▒tlamalar─▒ nedeniyle, taray─▒c─▒ Sandbox mekanizmas─▒ etki alanlar─▒ aras─▒ JSON kod y├╝r├╝t├╝lmesini devre d─▒┼č─▒ b─▒rak─▒r.

JSON'un y├╝r├╝tmeden sonra ge├žmesini sa─člamak i├žin bir JSONP geli┼čtirdik. JSONP, taray─▒c─▒n─▒n g├╝venlik s─▒n─▒rlar─▒n─▒ JavaScript Geri Arama i┼čleviyle ve <script> etiketiyle atlar.

K─▒sacas─▒ JSONP'nin ne oldu─čunu, hangi sorunu ├ž├Âzd├╝─č├╝n├╝ (ne zaman kullanaca─č─▒n─▒) a├ž─▒klar.


10







Harika cevaplar ├žoktan verildi, sadece javascript kod kodlar─▒ bi├žiminde yapmam gerekiyor (ayn─▒ zamanda ├žapraz kaynakl─▒ talepler i├žin daha modern ve daha iyi bir ├ž├Âz├╝m i├žerece─čim: HTTP Ba┼čl─▒klar─▒ olan CORS):

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

3







JSONP a├ž─▒l─▒m─▒ JSON ile germe .

Burada ile site, b├╝y├╝k ├Ârnekler , en basit kullan─▒m─▒ndan a├ž─▒klama ile bu tekni─čin en ileri seviyeye u├ža─č─▒ JavaScript:

w3schools.com / JSONP

Benim daha favori tekniklerinden biri yukar─▒da a├ž─▒klanan oldu─čunu Dinamik JSON Sonucu , URL parametresinde PHP dosyas─▒na JSON g├Ândermesine izin ve izin PHP dosyas─▒ da al─▒r bilgilere dayal─▒ bir JSON nesnesi d├Ând├╝r├╝r .

JQuery gibi ara├žlar da JSONP kullanma imkanlar─▒na sahiptir :

 jQuery.ajax({
  url: "https://data.acgov.org/resource/k9se-aps6.json?city=Berkeley",
  jsonp: "callbackName",
  dataType: "jsonp"
}).done(
  response => console.log(response)
);
 

0