Shape Shape

JSON JSONP #12

Shape
Shape
Shape Shape
01 Dec, 2023 36 JSON

JSON JSONP #12

img-data

JSONP

JSONP adalah metode pengiriman data JSON tanpa mengkhawatirkan masalah lintas domain.

JSONP tidak menggunakan XMLHttpRequest objek tersebut.

JSONP menggunakan <script> tag sebagai gantinya. 

Pengantar JSONP

JSONP adalah singkatan dari JSON dengan Padding.

Meminta file dari domain lain dapat menimbulkan masalah karena kebijakan lintas domain.

Meminta skrip eksternal dari domain lain tidak menimbulkan masalah ini.

JSONP menggunakan keunggulan ini, dan meminta file menggunakan tag skrip, bukan objek XMLHttpRequest.


Berkas Server

File di server membungkus hasilnya di dalam pemanggilan fungsi:


Hasilnya mengembalikan panggilan ke fungsi bernama "myFunc" dengan data JSON sebagai parameternya.

Pastikan fungsi tersebut ada di klien.

Fungsi JavaScript

Fungsi bernama "myFunc" terletak di klien, dan siap menangani data JSON:


Membuat Tag Skrip Dinamis

Contoh di atas akan menjalankan fungsi "myFunc" saat halaman dimuat, berdasarkan di mana Anda meletakkan tag skrip, yang sangat tidak memuaskan.

Tag skrip hanya boleh dibuat bila diperlukan:


Hasil JSONP Dinamis

Contoh di atas masih sangat statis.

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


File PHP menjelaskan:

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

 

Fungsi Panggilan Balik

Jika 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:


Shape Shape

Tutorial Selengkapnya

Ready to start?

Download our mobile app. for easy to start your course.

Shape
  • Google Play
  • App Store