Pertanyaan Apa itu JSONP?


Saya memahami JSON, tetapi tidak JSONP. Dokumen Wikipedia di JSON adalah (adalah) hasil pencarian teratas untuk JSONP. Ia mengatakan ini:

JSONP atau "JSON dengan padding" adalah ekstensi JSON di mana awalan ditetapkan sebagai argumen masukan dari panggilan itu sendiri.

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

Itu Hasil pencarian kedua adalah dari seorang pria bernama Remy, yang menulis ini tentang JSONP:

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

Aku bisa mengerti itu, tapi itu masih tidak masuk akal.


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


Tambahan: Saya baru saja dibuat halaman baru untuk JSONP di Wikipedia; sekarang memiliki deskripsi JSONP yang jelas dan menyeluruh, berdasarkan jvenemajawabannya.


1833
2018-01-14 20:53


asal


Jawaban:


Sebenarnya tidak terlalu rumit ...

Katakanlah Anda berada di domain example.com, dan Anda ingin mengajukan permintaan ke domain example.net. Untuk melakukannya, Anda perlu melintasi batas domain, tidak-tidak di sebagian besar browserland.

Satu item yang melewati batasan ini adalah tag <script>. Ketika Anda menggunakan tag skrip, pembatasan domain diabaikan, tetapi dalam keadaan normal, Anda tidak bisa benar-benar melakukan apapun dengan hasil, skrip hanya dievaluasi.

Masukkan JSONP. Saat Anda membuat permintaan ke server yang diaktifkan JSONP, Anda mengirimkan parameter khusus yang memberi tahu server sedikit tentang laman Anda. Dengan begitu, server dapat menyelesaikan responsnya dengan baik dengan cara yang dapat ditangani laman Anda.

Sebagai contoh, katakanlah server mengharapkan parameter yang disebut "callback" untuk 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", server akan membungkus hasilnya sedikit berbeda, mengembalikan sesuatu seperti ini:

mycallback({ foo: 'bar' });

Seperti yang Anda lihat, 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 dijalankan. Voila, permintaan lintas-domain!

Juga perlu diperhatikan satu masalah besar dengan JSONP: Anda kehilangan banyak kontrol atas permintaan tersebut. Misalnya, tidak ada cara yang "baik" untuk mengembalikan kode kegagalan yang tepat. Akibatnya, Anda akhirnya menggunakan pengatur waktu untuk memantau permintaan, dll, yang selalu sedikit dicurigai. Proposisi untuk JSONRequest adalah solusi hebat untuk mengizinkan scripting lintas domain, menjaga keamanan, dan memungkinkan kontrol yang tepat terhadap permintaan.

Hari-hari ini (2015), CORS adalah pendekatan yang disarankan vs. JSONRequest. JSONP masih berguna untuk dukungan browser yang lebih lama, tetapi mengingat implikasi keamanan, kecuali Anda tidak memiliki pilihan CORS adalah pilihan yang lebih baik.


1795
2018-01-14 21:08



JSONP adalah trik sederhana untuk mengatasi XMLHttpRequest kebijakan domain yang sama. (Seperti yang Anda tahu orang tidak dapat mengirim AJAX (XMLHttpRequest) permintaan ke domain yang berbeda.)

Jadi - daripada menggunakan XMLHttpRequest kita harus menggunakannya naskah Tag HTML, yang biasanya Anda gunakan untuk memuat file js, agar js mendapatkan data dari domain lain. Kedengarannya aneh?

Hal - ternyata naskah tag dapat digunakan dengan cara yang serupa dengan XMLHttpRequest! Lihat ini:

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

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

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

Namun ini agak tidak nyaman, karena kita harus mengambil array ini dari naskah menandai. Begitu JSONP pembuat konten memutuskan bahwa ini akan bekerja lebih baik (dan itu):

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

Perhatikan my_callback berfungsi di sana? Jadi ketika JSONP Server menerima permintaan Anda dan menemukan parameter callback - alih-alih mengembalikan plain js array, ia akan mengembalikan ini:

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

Lihat di mana untungnya: sekarang kami mendapatkan callback otomatis (my_callback) yang akan dipicu setelah kami mendapatkan datanya.
Hanya itu yang perlu diketahui JSONP: ini adalah callback dan tag skrip.

CATATAN: ini adalah contoh sederhana dari penggunaan JSONP, ini bukan skrip 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 berdiri untuk JSON dengan Padding. (Teknik bernama sangat buruk karena tidak ada hubungannya dengan apa yang kebanyakan orang anggap sebagai "padding".)


640
2017-07-29 21:40



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 mengeksekusi, fungsi dipanggil bersama dengan data JSON, memungkinkan halaman yang meminta untuk menerima dan memproses data.

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

snipet kode dari 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>

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

38
2018-03-17 13:32



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

function_prefix(json_object);

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

Dengan kata lain, Anda bisa memilikinya pertukaran data lintas-domain.


Biasanya, XMLHttpRequest tidak 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 asal.


Juga perlu diperhatikan: meskipun server harus dianggap sebagai "tepercaya" sebelum mencoba "trik" semacam itu, efek samping dari kemungkinan perubahan dalam format objek, dll. Dapat dikandung. Jika sebuah 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.


37
2018-01-14 20:58



JSONP sangat jauh untuk mengatasi kesalahan skrip lintas-domain. Anda dapat menggunakan layanan JSONP murni dengan JS tanpa harus mengimplementasikan proxy AJAX di sisi server.

Anda dapat menggunakan b1t.co layanan 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=[resultsCallBack]&url=[escapedUrlToMinify]

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

akan kembali

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

Dan dengan demikian ketika yang dimuat di js Anda sebagai src, ia akan secara otomatis menjalankan apa pun JavascriptName yang harus Anda terapkan sebagai fungsi panggilan balik Anda:

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

Untuk benar-benar membuat panggilan JSONP, Anda dapat melakukannya dengan 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 dipraktekkan tersedia di: posting ini


17
2018-03-28 15:59



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;

    ?>    

10
2018-06-06 06:45



Sebelum memahami JSONP, Anda perlu tahu 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.

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

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


9
2017-12-08 04:02