Bisakah saya membuat permintaan JSONP lintas domain di JavaScript tanpa menggunakan jQuery atau pustaka eksternal lainnya? Saya ingin menggunakan JavaScript itu sendiri dan kemudian mengurai data dan menjadikannya objek sehingga saya dapat menggunakannya. Apakah saya harus menggunakan perpustakaan eksternal? Jika tidak, bagaimana saya bisa melakukannya?
javascript
jsonp
Dave
sumber
sumber
Jawaban:
sumber
foo(payload_of_json_data)
:, idenya adalah bahwa ketika dimuat ke tag skrip, itu memanggil fungsi foo dengan muatan sudah sebagai objek javascript dan tidak perlu parsing.Contoh ringan (dengan dukungan untuk onSuccess dan onTimeout). Anda harus memasukkan nama panggilan balik dalam URL jika Anda membutuhkannya.
Penggunaan sampel:
Di GitHub: https://github.com/sobstel/jsonp.js/blob/master/jsonp.js
sumber
Apa itu JSONP?
Hal penting yang harus diingat dengan jsonp adalah bahwa ini sebenarnya bukan protokol atau tipe data. Ini hanya cara memuat skrip dengan cepat dan memproses skrip yang diperkenalkan ke halaman. Dalam semangat JSONP, ini berarti memperkenalkan objek javascript baru dari server ke dalam aplikasi / skrip klien.
Kapan JSONP dibutuhkan?
Ini adalah metode 1 yang memungkinkan satu domain untuk mengakses / memproses data dari yang lain di halaman yang sama secara asinkron. Terutama, ini digunakan untuk mengganti pembatasan CORS (Cross Origin Resource Sharing) yang akan terjadi dengan permintaan XHR (ajax). Pemuatan skrip tidak tunduk pada batasan CORS.
Bagaimana melakukannya
Memperkenalkan objek javascript baru dari server dapat diimplementasikan dengan banyak cara, tetapi praktik yang paling umum adalah server mengimplementasikan eksekusi fungsi 'callback', dengan objek yang diperlukan diteruskan ke dalamnya. Fungsi panggilan balik hanyalah sebuah fungsi yang telah Anda siapkan pada klien di mana skrip yang Anda muat panggilannya pada saat skrip dimuat untuk memproses data yang diteruskan ke dalamnya.
Contoh:
Saya memiliki aplikasi yang mencatat semua item di rumah seseorang. Aplikasi saya sudah diatur dan sekarang saya ingin mengambil semua item di kamar tidur utama.
Aplikasi saya aktif
app.home.com
. Api yang saya perlukan untuk memuat data sedang aktifapi.home.com
.Kecuali jika server secara eksplisit diatur untuk mengizinkannya, saya tidak dapat menggunakan ajax untuk memuat data ini, karena bahkan halaman di subdomain terpisah tunduk pada batasan XHR CORS.
Idealnya, atur semuanya untuk mengizinkan x-domain XHR
Idealnya, karena api dan aplikasi berada di domain yang sama, saya mungkin memiliki akses untuk menyiapkan header
api.home.com
. Jika saya melakukannya, saya dapat menambahkanAccess-Control-Allow-Origin:
item header yang memberikan akses keapp.home.com
. Dengan asumsi tajuk diatur sebagai berikutAccess-Control-Allow-Origin: "http://app.home.com"
:, ini jauh lebih aman daripada menyiapkan JSONP. Ini karenaapp.home.com
bisa mendapatkan semua yang diinginkanapi.home.com
tanpaapi.home.com
memberikan akses CORS ke seluruh internet.Solusi XHR di atas tidak memungkinkan. Siapkan JSONP Pada skrip klien saya: Saya menyiapkan fungsi untuk memproses tanggapan dari server ketika saya melakukan panggilan JSONP. :
Server perlu diatur untuk mengembalikan skrip mini yang tampak seperti
"processJSONPResponse('{"room":"main bedroom","items":["bed","chest of drawers"]}');"
Ini mungkin dirancang untuk mengembalikan string seperti//api.home.com?getdata=room&room=main_bedroom
itu jika sesuatu seperti itu dipanggil.Kemudian klien menyiapkan tag skrip seperti:
Ini memuat skrip dan segera memanggil
window.processJSONPResponse()
sebagai ditulis / echo / dicetak oleh server. Data yang diteruskan sebagai parameter ke fungsi sekarang disimpan didataFromServer
variabel lokal dan Anda dapat melakukannya dengan apa pun yang Anda butuhkan.Membersihkan
Setelah klien memiliki datanya, mis. segera setelah skrip ditambahkan ke DOM, elemen skrip dapat dihapus dari DOM:
sumber
SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
. Setelah menambahkan tanda kutip tunggal ke data, semuanya bekerja dengan baik, jadi:"processJSONPResponse('{"room":"main bedroom","items":["bed","chest of drawers"]}');"
Pemahaman saya adalah bahwa Anda benar-benar menggunakan tag skrip dengan JSONP, sooo ...
Langkah pertama adalah membuat fungsi Anda yang akan menangani JSON:
Pastikan bahwa fungsi ini dapat diakses di tingkat global.
Selanjutnya, tambahkan elemen skrip ke DOM:
Skrip akan memuat JavaScript yang dibuat oleh penyedia API, dan menjalankannya.
sumber
eval
atauparse
atau apapun. Anda harus mendapatkan JavaScript yang dapat dijalankan oleh browser, bukan?cara saya menggunakan jsonp seperti di bawah ini:
kemudian gunakan metode 'jsonp' seperti ini:
referensi:
JavaScript XMLHttpRequest menggunakan JsonP
http://www.w3ctech.com/topic/721 (berbicara tentang cara penggunaan Promise)
sumber
Saya memiliki perpustakaan javascript murni untuk melakukan itu https://github.com/robertodecurnex/J50Npi/blob/master/J50Npi.js
Lihat dan beri tahu saya jika Anda memerlukan bantuan dalam menggunakan atau memahami kode.
Btw, Anda memiliki contoh penggunaan sederhana di sini: http://robertodecurnex.github.com/J50Npi/
sumber
Contoh penggunaan:
sumber
window[callback] = null
mengizinkan fungsinya menjadi sampah dikumpulkan.Saya menulis perpustakaan untuk menangani ini, sesederhana mungkin. Tidak perlu dibuat eksternal, fungsinya hanya satu. Tidak seperti beberapa opsi lain, skrip ini membersihkan dirinya sendiri, dan digeneralisasikan untuk membuat permintaan lebih lanjut pada waktu proses.
https://github.com/Fresheyeball/micro-jsonp
sumber
Temukan
JavaScript
contoh di bawah ini untuk melakukanJSONP
panggilan tanpa JQuery:Juga, Anda dapat merujuk
GitHub
repositori saya untuk referensi.https://github.com/shedagemayur/JavaScriptCode/tree/master/jsonp
sumber
sumber
window.document.getElementsByTagName('script')[0];
tidakdocument.body.appendChild(…)
?logAPI
harus disetel kenull
saat selesai sehingga pengumpulan sampah dapat dilakukan di sana?Jika Anda menggunakan ES6 dengan NPM, Anda dapat mencoba modul node "fetch-jsonp". Fetch API Memberikan dukungan untuk membuat panggilan JsonP sebagai panggilan XHR biasa.
Prasyarat: Anda harus menggunakan
isomorphic-fetch
modul node di tumpukan Anda.sumber
Hanya menempelkan versi ES6 dari jawaban bagus sobstel:
sumber