Saya mengerti JSON, tetapi bukan JSONP. Dokumen Wikipedia tentang JSON adalah hasil pencarian teratas untuk JSONP. Dikatakan ini:

JSONP atau "JSON with padding" adalah ekstensi JSON di mana awalan ditentukan sebagai argumen input dari panggilan itu sendiri.

Hah? Panggilan apa? Itu tidak masuk akal bagi saya. JSON adalah format data. Tidak ada panggilan.

Hasil pencarian kedua berasal dari beberapa pria bernama Remy , yang menulis ini tentang JSONP:

JSONP adalah injeksi tag skrip, meneruskan respons dari server ke fungsi yang ditentukan pengguna.

Saya bisa memahaminya, tetapi itu masih tidak masuk akal.

Jadi, apa itu JSONP? Mengapa itu dibuat (masalah apa yang dipecahkannya)? Dan mengapa saya menggunakannya?

Tambahan : Saya baru saja membuat halaman baru untuk JSONP di Wikipedia; sekarang memiliki deskripsi yang jelas dan menyeluruh tentang JSONP, berdasarkan jawaban jvenema .

Ini sebenarnya tidak terlalu rumit ...

Katakan Anda menggunakan domain example.com, dan Anda ingin membuat permintaan ke domain example.net. Untuk melakukannya, Anda harus melewati batas domain , yang boleh-boleh saja di sebagian besar browserland.

Satu item yang melewati batasan ini adalah <script>tag. Saat Anda menggunakan tag skrip, batasan domain diabaikan, tetapi dalam kondisi normal, Anda tidak dapat melakukan apa pun dengan hasilnya, skrip akan dievaluasi.

Masukkan JSONP. Saat Anda mengajukan permintaan ke server yang mengaktifkan JSONP, Anda memberikan parameter khusus yang memberi tahu server sedikit tentang halaman Anda. Dengan begitu, server dapat menyelesaikan responsnya dengan cara yang dapat ditangani oleh halaman Anda.

Sebagai contoh, katakanlah server mengharapkan parameter yang dipanggil callbackuntuk mengaktifkan kemampuan JSONP-nya. Maka permintaan Anda akan terlihat seperti:

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

Tanpa JSONP, ini mungkin mengembalikan beberapa objek JavaScript dasar, seperti:

{ foo: 'bar' }

Namun, dengan JSONP, ketika server menerima parameter "callback", itu membungkus hasilnya sedikit berbeda, mengembalikan sesuatu seperti ini:

mycallback({ foo: 'bar' });

Seperti yang Anda lihat, itu sekarang akan memanggil metode yang Anda tentukan. Jadi, di halaman Anda, Anda menentukan fungsi panggilan balik:

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

Dan sekarang, ketika skrip dimuat, itu akan dievaluasi, dan fungsi Anda akan dieksekusi. Voila, permintaan lintas domain!

Penting juga mencatat satu masalah utama dengan JSONP: Anda kehilangan banyak kendali atas permintaan. Misalnya, tidak ada cara "baik" untuk mendapatkan kode kegagalan yang benar kembali. Akibatnya, Anda akhirnya menggunakan penghitung waktu untuk memantau permintaan, dll, yang selalu sedikit mencurigakan. Proposisi untuk JSONRequest adalah solusi yang bagus untuk memungkinkan skrip lintas domain, menjaga keamanan, dan memungkinkan kontrol permintaan yang tepat.

Saat ini (2015), CORS adalah pendekatan yang disarankan vs. JSONRequest. JSONP masih berguna untuk dukungan browser yang lebih lama, tetapi mengingat implikasi keamanannya, kecuali Anda tidak punya pilihan, CORS adalah pilihan yang lebih baik.

JSONP benar-benar trik sederhana untuk mengatasi kebijakan domain XMLHttpRequest yang sama. (Seperti yang Anda ketahui, seseorang tidak dapat mengirim permintaan AJAX (XMLHttpRequest) ke domain lain.)

Jadi - alih-alih menggunakan XMLHttpRequest, kita harus menggunakan tag HTML skrip , yang biasanya Anda gunakan untuk memuat file js, agar js mendapatkan data dari domain lain. Kedengarannya aneh?

Masalahnya - ternyata tag skrip dapat digunakan dengan cara yang mirip dengan XMLHttpRequest ! Lihat ini:

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

Anda akan berakhir dengan segmen skrip yang terlihat seperti ini setelah memuat data:

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

Namun ini agak merepotkan, karena kita harus mengambil array ini dari tag skrip . Jadi pembuat JSONP memutuskan bahwa ini akan bekerja lebih baik (dan memang demikian):

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

Perhatikan fungsi my_callback di sana? Jadi - ketika server JSONP menerima permintaan Anda dan menemukan parameter panggilan balik - alih-alih mengembalikan array js biasa, ia akan mengembalikan ini:

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

Lihat di mana keuntungannya: sekarang kita mendapatkan panggilan balik otomatis (my_callback) yang akan dipicu begitu kita mendapatkan data.
Hanya itu yang perlu diketahui tentang JSONP : ini adalah tag panggilan balik dan skrip.

CATATAN: ini adalah contoh sederhana penggunaan JSONP, ini bukan skrip yang siap produksi.

Contoh JavaScript dasar (umpan Twitter sederhana menggunakan 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&callback=myCallback"></script>
    </body>
</html>

Contoh jQuery dasar (umpan Twitter sederhana menggunakan 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 adalah singkatan dari JSON dengan Padding . (teknik yang dinamai sangat buruk karena tidak ada hubungannya dengan apa yang oleh kebanyakan orang akan dianggap sebagai "padding".)

JSONP bekerja dengan membangun elemen "skrip" (baik dalam markup HTML atau dimasukkan ke DOM melalui JavaScript), yang meminta ke lokasi layanan data jarak jauh. Responsnya adalah javascript yang dimuat ke browser Anda dengan nama fungsi yang telah ditentukan bersama dengan parameter yang diteruskan yaitu data JSON yang diminta. Ketika skrip dijalankan, fungsi dipanggil bersama dengan data JSON, memungkinkan halaman yang meminta untuk menerima dan memproses data.

Untuk Bacaan Lebih Lanjut Kunjungi: https://blogs.sap.com/2013/07/15/secret-behind-jsonp/

cuplikan kode sisi klien

    <!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>

Sepotong sisi server dari kode PHP

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

Karena Anda dapat meminta server untuk menambahkan awalan ke objek JSON yang dikembalikan. Misalnya

function_prefix(json_object);

agar browser dapat eval "inline" string JSON sebagai ekspresi. Trik ini memungkinkan server untuk "menyuntikkan" kode javascript langsung di browser Klien dan ini dengan melewati batasan "asal yang sama".

Dengan kata lain, Anda dapat mencapai pertukaran data lintas domain .

Biasanya, XMLHttpRequesttidak mengizinkan pertukaran data lintas domain secara langsung (seseorang harus melalui server di domain yang sama) sedangkan:

<script src="some_other_domain/some_data.js&prefix=function_prefix> `seseorang dapat mengakses data dari domain yang berbeda dari dari asalnya.

Juga patut dicatat: meskipun server harus dianggap sebagai "tepercaya" sebelum mencoba "trik" semacam itu, efek samping dari kemungkinan perubahan dalam format objek dll. Dapat diatasi. Jika a function_prefix(yaitu fungsi js yang tepat) digunakan untuk menerima objek JSON, fungsi tersebut dapat melakukan pemeriksaan sebelum menerima / memproses lebih lanjut data yang dikembalikan.

JSONP adalah cara yang bagus untuk mengatasi kesalahan skrip lintas domain. Anda dapat menggunakan layanan JSONP murni dengan JS tanpa harus menerapkan proxy AJAX di sisi server.

Anda dapat menggunakan layanan b1t.co untuk melihat cara kerjanya. Ini adalah layanan JSONP gratis yang memungkinkan Anda untuk mengecilkan URL Anda. Berikut ini url yang akan digunakan untuk layanan:

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

Misalnya panggilan, http://b1t.co/Site/api/External/MakeUrlWithGet?callback=wh whateverJavascriptName&url=google.com

akan kembali

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

Dan dengan demikian ketika itu dimuat di js Anda sebagai src, itu akan secara otomatis menjalankanJavascriptName apa pun yang harus Anda terapkan sebagai fungsi callback Anda:

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

Untuk benar-benar melakukan panggilan JSONP, Anda dapat melakukannya tentang beberapa cara (termasuk menggunakan jQuery) tetapi di sini adalah contoh JS murni:

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

Contoh langkah demi langkah dan layanan web jsonp untuk berlatih tersedia di: posting ini

Contoh sederhana untuk penggunaan JSONP.

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;

    ?>    

Sebelum memahami JSONP, Anda perlu mengetahui format JSON dan XML. Saat ini format data yang paling sering digunakan di web adalah XML, tetapi XML sangat rumit. Itu membuat pengguna tidak nyaman untuk memproses tertanam di halaman Web.

Untuk membuat JavaScript dapat dengan mudah bertukar data, bahkan sebagai program pemrosesan data, kami menggunakan kata-kata sesuai dengan objek JavaScript dan mengembangkan format pertukaran data sederhana, yaitu JSON. JSON dapat digunakan sebagai data, atau sebagai program JavaScript.

JSON dapat langsung disematkan dalam JavaScript, dengan menggunakannya Anda dapat langsung menjalankan program JSON tertentu, tetapi karena kendala keamanan, mekanisme Sandbox browser menonaktifkan eksekusi kode JSON lintas domain.

Untuk membuat JSON dapat diteruskan setelah eksekusi, kami mengembangkan JSONP. JSONP melewati batas keamanan browser dengan fungsi JavaScript Callback dan tag <script>.

Jadi singkatnya ini menjelaskan apa itu JSONP, masalah apa yang dipecahkannya (kapan menggunakannya).

TL; DR

JSONP adalah trik lama yang diciptakan untuk melewati pembatasan keamanan yang melarang kita untuk mendapatkan data JSON dari server yang berbeda ( asal yang berbeda * ).

Caranya bekerja dengan menggunakan <script>tag yang meminta JSON dari tempat itu, misalnya { "user":"Smith" }:, tetapi dibungkus dengan fungsi, JSONP yang sebenarnya ("JSON with Padding"):

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

Menerima dalam bentuk ini memungkinkan kita untuk menggunakan data dalam peopleDataJSONPfungsi kita . JSONP adalah praktik yang buruk , jangan menggunakannya (baca di bawah)

Masalah

Katakanlah kita sedang menavigasi ourweb.com, dan kami ingin mendapatkan data JSON (atau data mentah apa pun) dari anotherweb.com. Jika kami menggunakan permintaan GET (seperti XMLHttpRequest, fetchpanggilan $.ajax, dll.), Browser kami akan memberi tahu kami bahwa itu tidak diizinkan dengan kesalahan jelek ini:

Bagaimana cara mendapatkan data yang kita inginkan? Yah, <script>tag tidak dikenakan batasan seluruh server (asal *) ini! Itu sebabnya kami dapat memuat pustaka seperti jQuery atau Google Maps dari server apa pun, seperti CDN, tanpa kesalahan.

Poin penting : jika Anda memikirkannya, pustaka tersebut adalah kode JS aktual yang dapat dijalankan (biasanya fungsi besar dengan semua logika di dalamnya). Tapi data mentah? Data JSON bukan kode . Tidak ada yang bisa dijalankan; itu hanya data biasa.

Karenanya, tidak ada cara untuk menangani atau memanipulasi data berharga kami. Browser akan mengunduh data yang ditunjukkan oleh <script>tag kami dan ketika memprosesnya akan mengeluh:

apa {"user":"Smith"}omong kosong ini kita muat? Itu bukan kode. Saya tidak dapat menghitung, kesalahan sintaksis!

Retas JSONP

Cara lama / hacky untuk memanfaatkan data itu? Kami membutuhkan server itu untuk mengirimkannya dengan beberapa logika, jadi ketika itu dimuat, kode Anda di browser akan dapat menggunakan data tersebut. Jadi server asing mengirimi kami data JSON di dalam fungsi JS. Data itu sendiri diatur sebagai input fungsi itu. Ini terlihat seperti ini:

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

yang membuatnya menjadi kode JS browser kita akan diurai tanpa mengeluh! Persis seperti halnya dengan pustaka jQuery. Sekarang, untuk mendapatkannya seperti itu, klien "meminta" server JSONP-friendly untuk itu, biasanya dilakukan seperti ini:

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

Browser kami akan menerima JSONP dengan nama fungsi itu, maka kami membutuhkan fungsi dengan nama yang sama dalam kode kami, seperti ini:

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

Atau seperti ini, hasil yang sama:

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

Browser akan mengunduh JSONP dan menjalankannya, yang memanggil fungsi kami , di mana argumennya dataadalah JSON kami. Kita sekarang dapat melakukan dengan data apa pun yang kita inginkan.

Jangan gunakan JSONP, gunakan CORS

JSONP adalah peretasan lintas situs dengan beberapa kelemahan:

• Kami hanya dapat melakukan permintaan GET
• Karena ini adalah permintaan GET yang dipicu oleh tag skrip sederhana, kami tidak mendapatkan kesalahan bermanfaat atau info kemajuan
• Ada juga beberapa masalah keamanan, seperti menjalankan kode JS klien Anda yang dapat diubah menjadi muatan berbahaya
• Ini hanya menyelesaikan masalah dengan data JSON, tetapi kebijakan keamanan Same-Origin berlaku untuk data lain (WebFonts, gambar / video yang diambil dengan drawImage () ...)
• Itu tidak terlalu elegan atau mudah dibaca.

Yang perlu diperhatikan adalah tidak perlu menggunakannya saat ini .

JSONP adalah trik untuk mendapatkan data JSON dari server lain, tetapi kami akan melanggar prinsip keamanan yang sama (Asal-Sama) jika kita memerlukan jenis lain dari hal-hal lintas situs.

Anda harus membaca tentang CORS di sini , tetapi intinya adalah:

Cross-Origin Resource Sharing (CORS) adalah mekanisme yang menggunakan tajuk HTTP tambahan untuk memberi tahu peramban agar memberikan aplikasi web yang berjalan di satu sumber, akses ke sumber daya yang dipilih dari sumber yang berbeda. Aplikasi web mengeksekusi permintaan HTTP lintas-asal ketika ia meminta sumber daya yang memiliki asal yang berbeda (domain, protokol, atau port) dari miliknya.

* asal didefinisikan oleh 3 hal: protokol , port , dan host . Jadi, misalnya, https://web.comadalah asal yang berbeda dari http://web.com(protokol berbeda) dan https://web.com:8081(port berbeda) dan jelas https://thatotherweb.net(host berbeda)

Jawaban yang bagus telah diberikan, saya hanya perlu memberikan bagian saya dalam bentuk blok kode dalam javascript (saya juga akan memasukkan solusi yang lebih modern dan lebih baik untuk permintaan lintas asal: CORS dengan HTTP Header):

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 adalah singkatan dari JSON dengan Padding .

Berikut adalah situsnya, dengan contoh yang bagus , dengan penjelasan dari penggunaan teknik ini yang paling sederhana hingga yang paling canggih dalam JavaScript pesawat:

w3schools.com / JSONP

Salah satu teknik favorit saya yang dijelaskan di atas adalah Dynamic JSON Result , yang memungkinkan untuk mengirim JSON ke file PHP dalam parameter URL , dan membiarkan file PHP juga mengembalikan objek JSON berdasarkan informasi yang didapatnya .

Alat seperti jQuery juga memiliki fasilitas untuk menggunakan JSONP :

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