Bagaimana untuk Membuat Permintaan JSONP Cross-Domain dalam JavaScript Tanpa Perpustakaan Luaran?

Membuat Permintaan JSONP daripada JavaScript Tanpa Pustaka Luaran

Untuk permintaan JSONP merentas domain dalam JavaScript, perpustakaan luaran seperti jQuery tidak selalu diperlukan. Berikut ialah panduan untuk mencapai ini menggunakan JavaScript tulen:

Langkah 1: Buat Fungsi Panggilan Balik

Mulakan dengan mentakrifkan fungsi panggil balik untuk menerima dan memproses respons JSONP. Dalam contoh yang diberikan, fungsi foo melaksanakan tugas ini:

<code class="javascript">function foo(data) {
  // Do something with the JSON response here
}</code>

Langkah 2: Buat Elemen Skrip Secara Dinamik

Seterusnya, buat elemen dan tetapkan atribut srcnya kepada titik akhir JSONP. Pastikan anda memasukkan nama fungsi panggil balik sebagai parameter pertanyaan:

<code class="javascript">var script = document.createElement('script');
script.src = '//example.com/path/to/jsonp?callback=foo';</code>

Langkah 3: Tambahkan Elemen Skrip pada DOM

Setelah elemen dicipta, tambahkannya pada daripada dokumen tersebut. Ini memulakan permintaan JSONP:

<code class="javascript">document.getElementsByTagName('head')[0].appendChild(script);</code>

Untuk penyemak imbas moden, anda boleh memudahkan baris ini kepada:

<code class="javascript">document.head.appendChild(script);</code>

Contoh

Menyatukan langkah ini, berikut adalah lengkapnya contoh membuat permintaan JSONP dalam JavaScript tanpa pustaka luaran:

<code class="javascript">function foo(data) {
  // Do stuff with JSON
}

var script = document.createElement('script');
script.src = '//example.com/path/to/jsonp?callback=foo'

document.head.appendChild(script);</code>

Atas ialah kandungan terperinci Bagaimana untuk Membuat Permintaan JSONP Cross-Domain dalam JavaScript Tanpa Perpustakaan Luaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!