JSONP


Udah pernah memakai JSONP ? JSONP adalah kepanjangan dari JSON with Padding. Bisa dikatakan sebagai JSOn jarak jauh begitu. Dimana kita menambah script di header atau di body yang sebelumnya tidak ada source aslinya( semacam injection ). JSONP memiliki callback function yang terletak di klien.
contoh :
misalnya kita punya file aini.html yang mempunya script java script dibagian HEAD tag sbb :

function loadJSON()
{
var url = 'tes.json?format=json&jsoncallback=iin';
var script = document.createElement("script");
script.setAttribute("src", url);
script.setAttribute("type", "text/javascript");
document.body.appendChild(script);
}
function iin(data)
{
alert(data.alamat);
}

kemudian dibagian BODY kita tambahkan parameter onload sbb :

onload="loadJSON();"

sekarang kita buat file tes.json

iin({nama: 'Nur Aini', alamat: 'hazel park,Galway'});

Jika file aini.html dipanggil dari browser, maka akan tampil seperti ini

Jika kita mencoba membuka memakai firebug atau debugger javascript lainnya, maka akan terlihat tambahan kode dibawah ini :


jsonphandler({nama: 'Nur Aini', alamat: 'hazel park,Galway'});

Happy coding all ….

  1. Halo Mbak Aini, saya dari QBHeadlines.com. Saya tertarik untuk menulis mengenai Nusantara View Web 2.5. Bisa saya minta kontak Mbak Aini yang dapat dihubungi (email dan nomor ponsel)?

    Tolong kabari saya lewat restituta.arjanti[a]yahoo.com ya Mbak. Terima kasih banyak🙂

  2. smangat terus Njava-nyaa!!!!😀

  3. salam kenal mbak Ai. saya tahu alamat ini dari Joomla tutorial yang anda buat. thanks for sharing.

  4. Menimba ilmu di blog ini. kunjung balik! 13:36

  5. “Udah pernah memakai JSONP ? JSONP adalah kepanjangan dari JSON with Padding.”

    trus JSON sendiri, kepanjanganan dari apa mba?
    terus knp gak pake js framework aja, spt jQuery misalkan?

    btw, nice artikel..

  6. Fantastic tutorials and posts here. I bookmarked a few of them.

  7. oh ya mbak, kalo file jsonnya di domain yang berbeda apa bisa juga?

  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s