JSONP: Pengertian dan Cara Menggunakannya

JSONP adalah metode untuk mengirim data JSON tanpa mengkhawatirkan masalah lintas domain.

JSONP tidak menggunakan objek XMLHttpRequest.

JSONP menggunakan tag

Section Artikel

1 Pendahuluan JSONP
2 File Server
3 Fungsi JavaScript
4 Membuat Tag Skrip Dinamis
5 Hasil JSONP Dinamis
6 Fungsi Callback

Pendahuluan JSONP

JSONP adalah singkatan dari JSON with Padding.

Meminta file dari domain lain dapat menyebabkan masalah, karena kebijakan lintas domain.

Namun meminta skrip eksternal dari domain lain tidak masalah.

JSONP menggunakan keuntungan ini, dan meminta file menggunakan tag skrip sebagai ganti objek XMLHttpRequest.

<script src="demo_jsonp.php">

File Server

File di server membungkus hasilnya di dalam pemanggilan fungsi.

Contoh:

<?php

$myJSON = '{"name":"John", "age":30, "city":"New York"}';

echo "myFunc(".$myJSON.");";

?>

Hasilnya mengembalikan panggilan ke fungsi bernama “myFunc” dengan data JSON sebagai parameter.

Pastikan bahwa fungsi tersebut ada pada klien.

Fungsi JavaScript

Fungsi bernama “myFunc” terletak di klien, dan siap untuk menangani data JSON.

Contoh:

<!DOCTYPE html>
<html>

<body>

<h2>Meminta JSON menggunakan tag skrip</h2>
<p>File PHP mengembalikan panggilan ke fungsi yang akan menangani data JSON.</p>

<p id="demo"></p>

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

<script src="demo_jsonp.php"></script>

</body>
</html>

Membuat Tag Skrip Dinamis

Contoh di atas akan menjalankan fungsi “myFunc” saat halaman sedang dimuat, berdasarkan tempat kita meletakkan tag skrip, yang tidak terlalu memuaskan.

Tag skrip hanya boleh dibuat saat diperlukan.

Contoh:
Buat dan sisipkan tag

<!DOCTYPE html>
<html>

<body>

<h2>Klik Tombol.</h2>
<p>Sebuah tag script dengan atribut src dibuat dan ditempatkan di dokumen.</p>
<p>File PHP mengembalikan panggilan ke fungsi dengan objek JSON sebagai parameter.</p>
<button onclick="clickButton()">Click me!</button>

<p id="demo"></p>

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

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

</body>
</html>

Hasil JSONP Dinamis

Contoh di atas masih sangat statis.

Jadikan contoh dinamis dengan mengirimkan JSON ke file php, dan biarkan file php mengembalikan objek JSON berdasarkan informasi yang didapatnya.

File 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 File PHP:

Ubah permintaan menjadi objek, menggunakan fungsi PHP json_decode().
Akses database, dan isi array dengan data yang diminta.
Tambahkan array ke objek.
Ubah array menjadi JSON menggunakan fungsi json_encode().
Bungkus “myFunc()” di sekitar objek pengembalian.

Contoh JavaScript
Fungsi “myFunc” akan dipanggil dari file php.

<!DOCTYPE html>
<html>

<body>

<h2> Klik Tombol. </h2>
<p> Sebuah tag script dengan atribut src dibuat dan ditempatkan di dokumen. </p>
<p> File PHP mengembalikan panggilan ke fungsi dengan objek JSON sebagai parameter. </p>

<button onclick="clickButton()">Klik!</button>

<p id="demo"></p>

<p> Coba ubah properti tabel dari "customers" menjadi "products". </p>
<script>
function clickButton() {
  var obj, s
  obj = { table: "customers", 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;
}
</script>

</body>
</html>

Fungsi Callback

Ketika kita tidak memiliki kendali atas file server, bagaimana cara mendapatkan file server untuk memanggil fungsi yang benar?

Terkadang file server menawarkan fungsi callback sebagai parameter.

Contoh:
File php akan memanggil fungsi yang diberikan sebagai parameter callback.

<!DOCTYPE html>
<html>

<body>

<h2>Permintaan Dengan Fungsi Callback</h2>
<p>File PHP mengembalikan panggilan ke fungsi yang Anda kirim sebagai panggilan balik.</p>

<button onclick="clickButton()">Klik!</button>

<p id="demo"></p>

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

function myDisplayFunction(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
</script>

</body>
</html>

javascript JSON