JSONP
JSONP adalah metode untuk mengirim data JSON tanpa mengkhawatirkan masalah lintas domain.
JSONP tidak menggunakan XMLHttpRequestobjek.
JSONP menggunakan <script>tag sebagai gantinya.
Pengenalan JSONP
JSONP adalah singkatan dari JSON dengan Padding.
Meminta file dari domain lain dapat menyebabkan masalah, karena kebijakan lintas domain.
Meminta skrip eksternal dari domain lain tidak memiliki masalah ini.
JSONP menggunakan keunggulan ini, dan meminta file menggunakan tag skrip alih-alih XMLHttpRequestobjek.
<script src="demo_jsonp.php">
File Server
File di server membungkus hasilnya di dalam panggilan 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 menangani data JSON:
Contoh
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
Membuat Tag Skrip Dinamis
Contoh di atas akan menjalankan fungsi "myFunc" saat halaman dimuat, berdasarkan tempat Anda meletakkan tag skrip, yang tidak terlalu memuaskan.
Tag skrip hanya boleh dibuat saat diperlukan:
Contoh
Buat dan sisipkan tag <script> saat tombol diklik:
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
Hasil JSONP Dinamis
Contoh-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).")";
?>
File PHP menjelaskan:
- 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 yang dikembalikan.
Contoh JavaScript
Fungsi "myFunc" akan dipanggil dari file php:
const obj = { table: "products", limit: 10 };
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);
function myFunc(myObj) {
let txt = "";
for (let x in myObj)
{
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
Fungsi Panggilan Balik
Ketika Anda tidak memiliki kendali atas file server, bagaimana Anda membuat file server memanggil fungsi yang benar?
Terkadang file server menawarkan fungsi panggilan balik sebagai parameter:
Contoh
File php akan memanggil fungsi yang Anda lewati sebagai parameter panggilan balik:
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);