JSON anlıyorum ama JSONP değil. Wikipedia'nın JSON'daki dokümanı, JSONP için en iyi arama sonucuydu. Şöyle diyor:

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 diyorsun? Bu benim için bir anlam ifade etmiyor. JSON bir veri biçimidir. Çağrı yok.

2 arama sonucu diye birine dan Remy JSONP hakkında şunları yazmış:

JSONP, sunucudan gelen yanıtları kullanıcı tanımlı bir işleve ileten komut dosyası etiket enjeksiyonudur.

Bunu bir şekilde anlayabilirim, ama yine de bir anlam ifade etmiyor.

Peki JSONP nedir? Neden yaratıldı (hangi sorunu çözüyor)? Neden kullanayım ki?

Ek : Wikipedia'da JSONP için yeni bir sayfa oluşturdum ; Şimdi dayalı JSONP açık ve kapsamlı bir açıklama vardır jvenema 'ın cevabı.

Aslında çok karmaşık değil ...

Alan adında olduğunuzu ve alan adı example.comiçin istekte bulunmak istediğinizi varsayalım example.net. Bunu yapmak için, tarayıcı alanlarının çoğunda hayır olan etki alanı sınırlarını aşmanız gerekir.

Bu sınırlamayı aşan bir öğe <script>etiketlerdir. Bir komut dosyası etiketi kullandığınızda, etki alanı sınırlaması yok sayılır, ancak normal koşullar altında , sonuçlarla gerçekten hiçbir şey yapamazsınız , komut dosyası değerlendirilir.

Enter JSONP. JSONP etkin olan bir sunucuya istekte bulunduğunuzda, sunucuya sayfanız hakkında biraz bilgi veren özel bir parametre iletirsiniz. Bu şekilde, sunucu yanıtını sayfanızın işleyebileceği şekilde güzel bir şekilde tamamlayabilir.

Örneğin, sunucunun callbackJSONP özelliklerini etkinleştirmek için çağrılan bir parametre beklediğini varsayalım. O zaman isteğiniz şöyle görünecektir:

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

JSONP olmadan bu, aşağıdaki gibi bazı temel JavaScript nesnelerini döndürebilir:

{ foo: 'bar' }

Ancak, 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ğırır. 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 yürütülecektir. Voila, alanlar arası talepler!

JSONP ile ilgili önemli bir sorunu da belirtmek gerekir: isteğin kontrolünü çok fazla kaybedersiniz. Örneğin, uygun hata kodlarını geri almanın "iyi" bir yolu yoktur. Sonuç olarak, her zaman biraz şüpheli olan isteği vb. İzlemek için zamanlayıcılar kullanırsınız. JSONRequest için öneri, alanlar arası kodlamaya izin vermek, güvenliği korumak ve isteğin uygun şekilde kontrol edilmesini sağlamak için harika bir çözümdür.

Bugünlerde (2015), CORS , JSONRequest'e karşı önerilen yaklaşımdır. JSONP hala eski tarayıcı desteği için yararlıdır, ancak CORS daha iyi bir seçim seçeneğiniz olmadığı sürece güvenlik sonuçları göz önüne alındığında.

JSONP , aynı XMLHttpRequest etki alanı ilkesinin üstesinden gelmek için basit bir hile . (Bildiğiniz gibi, AJAX (XMLHttpRequest) isteği farklı bir alana gönderilemez.)

Yani - XML'in başka bir alandan veri alabilmesi için XMLHttpRequest kullanmak yerine, js dosyalarını yüklemek için kullandığınız komut dosyası HTML etiketlerini kullanmamız gerekir. Kulağa garip geliyor?

Şey - çıkıyor komut dosyası etiketleri XMLHttpRequest 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 şöyle görünen bir komut dosyası segmentiyle karşılaşacaksınız:

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

Ancak bu biraz rahatsız edici, çünkü bu diziyi kod etiketinden almamız gerekiyor . Yani JSONP yaratıcıları bu daha iyi çalışır (ve öyle) olduğuna karar:

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

Orada my_callback işlevine dikkat edin mi? Yani - JSONP sunucusu isteğinizi aldığında ve geri arama parametresi 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 otomatik geri arama (my_callback) alıyoruz. JSONP
hakkında bilmeniz gereken her şey bu : geri arama ve kod 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 yayını)

<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 yayını)

<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 . (çoğu insanın “dolgu” olarak düşündüğü şeyle gerçekten ilgisi olmadığı için çok kötü adlandırılmış bir teknik.)

JSONP, uzak bir veri hizmeti konumu isteyen bir "komut dosyası" öğesi (HTML biçimlendirmesinde veya JavaScript aracılığıyla DOM'a eklenmiş) oluşturarak çalışır. Yanıt, tarayıcınıza, önceden tanımlanmış işlevin adının yanı sıra, istenen JSON verisi olan parametre geçirilerek yüklenen bir javascripttir. Komut dosyası yürütüldüğünde, işlev JSON verileriyle birlikte çağrılır ve istekte bulunan sayfanın verileri almasını ve işlemesini sağlar.

Daha Fazla Okuma İç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 . ")";
?>

Çünkü sunucudan döndürülen JSON nesnesine bir önek eklemesini isteyebilirsiniz. Örneğin

function_prefix(json_object);

tarayıcının evalJSON dizesini bir ifade olarak "satır içi" yapması için . Bu hile, sunucunun javascript kodunu doğrudan İstemci tarayıcısına "enjekte etmesini" ve bu da "aynı başlangıç" kısıtlamalarını atlayarak mümkün kılar.

Başka bir deyişle, alanlar arası veri alışverişi gerçekleştirebilirsiniz .

Normalde, XMLHttpRequestalanlar arası veri alışverişine doğrudan izin verilmez (aynı alandaki bir sunucudan geçilmesi gerekir):

<script src="some_other_domain/some_data.js&prefix=function_prefix> `kökeninden farklı bir alandaki verilere erişilebilir.

Ayrıca dikkat edilmelidir: sunucu bu tür bir "hile" denemeden önce "güvenilir" olarak düşünülse de, nesne biçimindeki olası değişikliklerin yan etkileri bulunabilir. function_prefixJSON 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şlemeden önce kontroller gerçekleştirebilir.

JSONP, web alanları arası kodlama hatalarından kurtulmak için harika bir yerdir. Sunucu tarafında bir AJAX proxy uygulamak zorunda kalmadan yalnızca JS ile bir JSONP hizmeti tüketebilirsiniz.

Nasıl çalıştığını görmek için b1t.co hizmetini kullanabilirsiniz . Bu, URL'lerinizi küçültmenize izin veren ücretsiz bir JSONP hizmetidir. Hizmet için kullanılacak URL:

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

Örneğin, http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&url=google.com çağrı

dönecekti

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

Ve böylece bu get sizin js bir src olarak yüklendiğinde, otomatik olarak geri arama işlevi olarak uygulamak gerekir whatJavascriptName çalışacaktır:

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

Aslında JSONP çağrısı yapmak için, birkaç yol hakkında (jQuery kullanımı dahil) yapabilirsiniz, ancak işte 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);
}

Adım adım örnek ve üzerinde çalışılacak bir jsonp web hizmeti şu adreste bulunabilir: bu yazı

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;

    ?>    

JSONP'yi anlamadan önce JSON biçimini ve XML'i bilmeniz gerekir. Şu anda web'de en sık kullanılan veri biçimi XML'dir, ancak XML çok karmaşıktır. Kullanıcıları Web sayfalarına katıştırılmış işlemleri işlemek için elverişsiz hale getirir.

JavaScript'in veri işleme programı gibi kolayca veri alışverişi yapabilmesi için, JavaScript nesnelerine göre ifadeyi kullanıyoruz ve JSON olan basit bir veri alışverişi biçimi geliştirdik. JSON veri olarak veya bir JavaScript programı olarak kullanılabilir.

JSON doğrudan JavaScript'e gömülebilir, bunları kullanarak belirli JSON programını doğrudan yürütebilirsiniz, ancak güvenlik kısıtlamaları nedeniyle tarayıcı Sandbox mekanizması, etki alanları arası JSON kodu yürütülmesini devre dışı bırakır.

JSON'un yürütmeden sonra geçebilmesi için bir JSONP geliştirdik. JavaScript Geri Arama işlevselliği ve <script> etiketi ile JSONP tarayıcının güvenlik sınırlarını atlayın.

Kısacası JSONP'nin ne olduğunu, hangi problemi çözdüğünü (ne zaman kullanılacağını) açıklar.

TL; DR

JSONP, farklı bir sunucudan JSON verisi almamızı engelleyen güvenlik kısıtlamasını atlamak için icat edilen eski bir numaradır (farklı bir kaynak * ).

Hile <script>, o yerden JSON isteyen bir etiket kullanarak çalışır , örneğin:, { "user":"Smith" }ancak gerçek JSONP ("Padding ile JSON"):

peopleDataJSONP({"user":"Smith"})

Bu formda almak, peopleDataJSONPfonksiyonumuzdaki verileri kullanmamızı sağlar . JSONP kötü bir uygulamadır , kullanmayın (aşağıyı okuyun)

Sorun

Gezintiğimizi ourweb.comve JSON verilerini (veya gerçekten herhangi bir ham veriyi) almak istediğimizi varsayalım anotherweb.com. Biz GET isteği kullanmak için olsaydı (gibi XMLHttpRequestbir, fetchçağrı, $.ajaxvb), bizim tarayıcı bu çirkin hata ile izin verilmez bize anlatırdı:

İstediğimiz veriler nasıl elde edilir? Eh, <script>etiketler Bütün bu sunucu (orijin *) kısıtlamaya tabi değildir! Bu nedenle CDQ gibi herhangi bir sunucudan jQuery veya Google Haritalar gibi bir kitaplığı hatasız yükleyebiliriz.

Önemli nokta : Eğer düşünürseniz, bu kütüphaneler gerçek, çalıştırılabilir JS kodudur (genellikle içindeki tüm mantıkla büyük bir işlevdir). Peki ham veriler? JSON verileri kod değildir . Kaçacak bir şey yok; sadece düz veri.

Bu nedenle, değerli verilerimizi işlemenin veya işlememenin bir yolu yoktur. Tarayıcı, etiketimizin işaret ettiği verileri indirir <script>ve işlerken haklı olarak şikayet eder:

wtf {"user":"Smith"}yüklediğimiz bu saçmalık mı? Kod değil. Hesaplayamıyorum, sözdizimi hatası!

JSONP kesmek

Bu verileri kullanmanın eski / hacky yolu? Bu sunucunun bir mantık göndermesi gerekiyor, bu yüzden yüklendiğinde tarayıcıdaki kodunuz söz konusu verileri kullanabilecektir. Yabancı sunucu bize JSON verilerini bir JS işlevi içinde gönderir. Verilerin kendisi bu işlevin girdisi olarak ayarlanır. Şöyle görünüyor:

peopleDataJSONP({"user":"Smith"})

Bu da tarayıcımızın şikayet etmeden ayrışacağı JS kodunu yapar ! Tam olarak jQuery kütüphanesinde olduğu gibi. Şimdi, bu şekilde elde etmek için, istemci genellikle böyle yapılan JSONP dostu sunucuyu "sorar":

<script src="https://anotherweb.com/api/data-from-people.json?myCallback=peopleDataJSONP"></script>

Tarayıcımız JSONP'u bu işlev adıyla alacaktır, bu nedenle kodumuzda aynı ada sahip bir işleve ihtiyacımız var, şöyle:

const peopleDataJSONP = function(data){
  alert(data.user); // "Smith"
}

Veya bunun gibi, aynı sonuç:

function peopleDataJSONP(data){
  alert(data.user); // "Smith"
}

Tarayıcı JSONP'yi indirecek ve işlevimizi çağıran argümanın dataJSON olacağı yerde çalıştıracaktır . Artık verilerimizle ne yapmak istiyorsak yapabiliriz.

JSONP kullanmayın, CORS kullanın

JSONP, birkaç dezavantajı olan siteler arası bir kesmek:

• Yalnızca GET isteklerini gerçekleştirebiliriz
• Basit bir komut dosyası etiketi tarafından tetiklenen bir GET isteği olduğundan, yararlı hatalar veya ilerleme bilgileri almıyoruz
• Ayrıca, istemci JS kodunuzda kötü amaçlı bir yüke değiştirilebilecek bazı güvenlik sorunları da vardır.
• Yalnızca JSON verileriyle ilgili sorunu çözer, ancak Aynı Kökenli güvenlik ilkesi diğer veriler için geçerlidir (WebFonts, drawImage () ile çizilen resimler / video ...)
• Çok zarif veya okunabilir değil.

Paket servisi, bugünlerde kullanmaya gerek yoktur .

JSONP, başka bir sunucudan JSON verisi almanın hilesidir, ancak başka tür siteler arası içeriklere ihtiyacımız olursa aynı güvenlik ilkesini (Aynı Kökenli) ihlal ederiz.

Sen gerektiğini burada CORS hakkında okumak , ama bunun özü şudur:

Kaynaklar Arası Kaynak Paylaşımı (CORS), tarayıcılara bir kaynaktan çalışan bir web uygulamasına farklı kaynaklardan seçilen kaynaklara erişim vermelerini bildirmek için ek HTTP üstbilgileri kullanan bir mekanizmadır. Bir web uygulaması, kendisinden farklı bir kaynağı (etki alanı, protokol veya bağlantı noktası) olan bir kaynak istediğinde bir çapraz kökenli HTTP isteği yürütür.

* orijin 3 şeyle tanımlanır: protokol , port ve ana bilgisayar . Bu nedenle, örneğin, https://web.comfarklı bir daha kökeni http://web.com(farklı protokolü) ve https://web.com:8081açıkçası (farklı bağlantı noktası) ve https://thatotherweb.net(farklı konakçı)

Büyük cevaplar zaten verildi, sadece parçamı javascript kod blokları şeklinde vermem gerekiyor (ayrıca çapraz kökenli istekler için daha modern ve daha iyi bir çözüm içereceğim: HTTP Başlıkları ile 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);

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ın JSONP kullanma olanakları da vardır :

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