JSONP

JSONP adalah metode untuk mengirimkan data JSON tanpa memikirkan masalah cross-domain.

JSONP tidak menggunakan objek XMLHttpRequest.

Penggunaan JSONP <script> Tag digantikan.

Pengenalan JSONP

JSONP berarti JSON with Padding.

Permintaan berkas dari domain lain akan mengakibatkan masalah, karena kebijakan cross-domain.

Permintaan skrip eksternal dari domain lain tidak ada masalah.

JSONP mengeksploitasi keunggulan ini, dan menggunakan tag script untuk menggantikan objek XMLHttpRequest.

<script src="demo_jsonp.php">

Berkas Server

Berkas di server diwakili dalam pemanggilan fungsi:

Contoh

<?php
$myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }';
echo "myFunc(".$myJSON.");";
?>

Tampilkan berkas PHP

Hasil kembalian adalah pemanggilan fungsi yang bernama "myFunc", dengan data JSON sebagai parameter.

Pastikan fungsi ini ada di klien.

Fungsi JavaScript

Fungsi "myFunc" berada di sisi klien, digunakan untuk mengelola data JSON:

Contoh

function myFunc(myObj)  {
    document.getElementById("demo").innerHTML =  myObj.name;
}

Coba Sendiri

Buat tag skrip dinamis

Contoh di atas akan menjalankan fungsi "myFunc" saat halaman dimuat, yang tidak terlalu memuaskan jika menempatkan tag skrip Anda di tempat yang benar.

Script hanya harus dibuat saat diperlukan:

Contoh

Buat dan sisipkan tag <script> saat tombol di klik:

function clickButton() {
    var s = document.createElement("script");
    s.src = "demo_jsonp.php";
    document.body.appendChild(s);
}

Coba Sendiri

Hasil JSONP dinamis

Contoh di atas masih statis.

Bisa membuat contoh dinamis dengan mengirim JSON ke berkas PHP, lalu mengembalikan objek JSON berdasarkan informasi yang didapatkan dari berkas PHP.

Berkas PHP

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj =  json_decode($_GET["x"], false);
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);
echo "myFunc(".json_encode($outp).")";
?>

Penjelasan berkas PHP:

  • Konversi permintaan ke objek, menggunakan fungsi PHP json_decode().
  • Akses database, dan mengisi array dengan data yang diminta.
  • Menambahkan array ke objek.
  • Penggunaan json_decode() Fungsi mengkonversi array ke JSON.
  • Encapsulasi objek kembalian dengan "myFunc()".

Contoh JavaScript

Dari berkas PHP akan dipanggil fungsi "myFunc":

function clickButton() {
    var obj, s
    obj = { "table":"products", "limit":10 };
    s =  document.createElement("script");
    s.src = "jsonp_demo_db.php?x="  + JSON.stringify(obj);
    document.body.appendChild(s);
 }
function myFunc(myObj)  {
    var x, txt = "";
    for (x in myObj)  {
        txt += myObj[x].name + "<br>";
     }
    document.getElementById("demo").innerHTML = txt;
}

Coba Sendiri

Fungsi Balik

Jika Anda tidak dapat mengawasi file server, bagaimana cara agar file server memanggil fungsi yang benar?

Kadang-kadang file server menyediakan fungsi balik sebagai parameter:

Contoh

File PHP akan memanggil fungsi yang Anda kirim sebagai parameter balik:

function clickButton() {
    var s = document.createElement("script");
    s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
    document.body.appendChild(s);
}

Coba Sendiri