Tolong bisakah seseorang membantu saya mencari tahu cara memulai JSONP?
Kode:
$('document').ready(function() {
var pm_url = 'http://twitter.com/status';
pm_url += '/user_timeline/stephenfry.json';
pm_url += '?count=10&callback=photos';
var photos = function (data) {
alert(data);
};
$.ajax({
url: pm_url,
dataType: 'jsonp',
jsonpCallback: 'photos',
jsonp: false,
});
});
Fiddle: http://jsfiddle.net/R7EPt/6/
Seharusnya menghasilkan peringatan, sejauh yang saya bisa dari dokumentasi: tidak (tapi juga tidak menghasilkan kesalahan).
Terima kasih.
Jawaban:
JSONP benar-benar hanya sebuah trik untuk mengatasi XMLHttpRequest kebijakan domain yang sama. (Seperti yang Anda ketahui, seseorang tidak dapat mengirim permintaan AJAX (XMLHttpRequest) ke domain lain.)
Jadi - alih-alih menggunakan XMLHttpRequest, kita harus menggunakan tag skrip HTMLl, yang biasanya Anda gunakan untuk memuat file JS, agar JS mendapatkan data dari domain lain. Kedengarannya aneh?
Masalahnya - ternyata tag skrip dapat digunakan dengan cara yang mirip dengan XMLHttpRequest ! Lihat ini:
Anda akan berakhir dengan segmen skrip yang terlihat seperti ini setelah memuat data:
Namun ini agak merepotkan, karena kita harus mengambil array ini dari tag skrip . Jadi pembuat JSONP memutuskan bahwa ini akan bekerja lebih baik (dan memang demikian):
Perhatikan fungsi my_callback di sana? Jadi - ketika server JSONP menerima permintaan Anda dan menemukan parameter panggilan balik - alih-alih mengembalikan array JS biasa, ia akan mengembalikan ini:
Lihat di mana keuntungannya: sekarang kita mendapatkan panggilan balik otomatis ( my_callback ) yang akan dipicu begitu kita mendapatkan data. Hanya itu yang perlu diketahui tentang JSONP : ini adalah tag panggilan balik dan skrip.
CATATAN:
Ini adalah contoh sederhana penggunaan JSONP, ini bukan skrip siap produksi.
Demonstrasi RAW JavaScript (umpan Twitter sederhana menggunakan JSONP):
Contoh jQuery dasar (umpan Twitter sederhana menggunakan JSONP):
JSONP adalah singkatan dari JSON dengan Padding . (teknik yang dinamai sangat buruk karena tidak ada hubungannya dengan apa yang oleh kebanyakan orang dianggap sebagai "bantalan".)
sumber
Access-Control-Allow-Origin
header yang memungkinkan panggilan Ajax biasa dilakukan ke beberapa domain lintas-asal.Bahkan ada cara yang lebih mudah untuk bekerja dengan JSONP menggunakan jQuery
Di
?
akhir URL memberitahu jQuery bahwa itu adalah permintaan JSONP, bukan JSON. jQuery mendaftar dan memanggil fungsi panggilan balik secara otomatis.Untuk detail lebih lanjut, lihat dokumentasi jQuery.getJSON .
sumber
&callback=?
karena ini bukan parameter pertama dalam kasus Anda.Menanggapi OP, ada dua masalah dengan kode Anda: Anda perlu mengatur jsonp = 'callback', dan menambahkan fungsi callback dalam variabel seperti Anda sepertinya tidak berfungsi.
Pembaruan: ketika saya menulis ini, Twitter API baru saja dibuka, tetapi mereka mengubahnya dan sekarang membutuhkan otentikasi. Saya mengubah contoh kedua menjadi contoh kerja (2014Q1), tetapi sekarang menggunakan github.
Ini tidak berfungsi lagi - sebagai latihan, lihat apakah Anda dapat menggantinya dengan API Github:
meskipun lansiran () ing array seperti itu tidak benar-benar berfungsi dengan baik ... Tab "Net" di Firebug akan menunjukkan kepada Anda JSON dengan benar. Trik berguna lainnya adalah melakukan
Anda juga dapat menggunakan metode jQuery.getJSON . Inilah contoh html lengkap yang mendapat daftar "inti" dari github. Dengan cara ini ia membuat fungsi callback yang dinamai secara acak untuk Anda, itulah yang terakhir "callback =?" di url.
sumber
Kode di atas membantu dalam mendapatkan gambar dari Flicker API. Ini menggunakan metode GET untuk mendapatkan gambar menggunakan JSONP. Ini dapat ditemukan secara detail di sini
sumber