Penjelasan terperinci tentang penggunaan bersama jQuery, Ajax dan JSONP dalam JavaScript_jquery

Dengan bantuan XMLHttpRequest, penyemak imbas boleh berinteraksi dengan pelayan tanpa menyegarkan keseluruhan halaman Ini adalah apa yang dipanggil Ajax (JavaScript Asynchronous dan XML). Ajax boleh memberikan pengguna pengalaman pengguna yang lebih kaya.

Permintaan Ajax didorong oleh JavaScript Permintaan dihantar ke URL melalui kod JavaScript Apabila pelayan membalas, fungsi panggilan balik akan dicetuskan oleh pelayan boleh diproses dalam fungsi panggil balik. Memandangkan keseluruhan proses penghantaran permintaan dan respons adalah tak segerak, kod Javascript lain dalam halaman akan terus dilaksanakan dalam tempoh ini tanpa gangguan.

jQuery pastinya memberikan sokongan yang baik untuk Ajax, dan ia juga menghilangkan perbezaan yang menyakitkan dalam sokongan Ajax antara pelbagai pelayar. Ia bukan sahaja menyediakan kaedah $.ajax() berciri penuh, tetapi juga lebih banyak fungsi seperti $.get(), $.getScript(), $.getJSON(), $.post() dan $().load (), dsb. Untuk kaedah yang mudah.

Walaupun ia dinamakan Ajax, banyak aplikasi Ajax tidak menggunakan XML, terutamanya aplikasi jQuery Ajax, sebaliknya, ia lebih biasa digunakan: teks biasa, HTML dan JSON (JavaScript) Object Notation. .

Secara amnya, disebabkan oleh sekatan dasar asal yang sama (protokol yang sama, nama domain yang sama, port yang sama), Ajax tidak boleh melaksanakan permintaan merentas domain, melainkan penyelesaian seperti JSONP (JSON dengan Padding) digunakan untuk mencapai beberapa permintaan yang terjejas. Fungsi merentas domain terhad.
Beberapa konsep penting tentang Ajax

GET vs POST, ini adalah dua kaedah yang paling biasa digunakan untuk menghantar permintaan ke pelayan Pemahaman yang betul tentang perbezaan antara kedua-dua kaedah ini adalah sangat penting untuk pembangunan Ajax.

Kaedah GET biasanya digunakan untuk melakukan beberapa operasi yang tidak merosakkan (iaitu, hanya mendapatkan maklumat daripada pelayan tanpa mengubah suai maklumat pada pelayan). Sebagai contoh, perkhidmatan pertanyaan carian biasanya menggunakan permintaan GET. Selain itu, permintaan GET juga mungkin dicache oleh penyemak imbas, yang mungkin menyebabkan beberapa masalah yang tidak dapat diramalkan. Secara amnya, permintaan GET hanya boleh menghantar data ke pelayan melalui rentetan pertanyaan.

Kaedah POST biasanya digunakan untuk melakukan beberapa operasi yang merosakkan pada pelayan (iaitu, mengubah suai data pada pelayan). Sebagai contoh, apabila anda menerbitkan catatan blog, anda harus menggunakan permintaan POST. Tidak seperti permintaan GET, permintaan POST tidak mempunyai masalah caching. Dalam permintaan POST, rentetan pertanyaan sebagai sebahagian daripada URL juga boleh menyerahkan data kepada pelayan, tetapi kaedah ini tidak disyorkan Semua data harus dihantar secara berasingan daripada URL.

Jenis data, jQuery biasanya memerlukan penentuan jenis data yang dikembalikan oleh pelayan Dalam sesetengah kes, jenis data mungkin sudah disertakan dalam nama kaedah, seperti $.getJSON(). tersedia Sebahagian daripada objek yang dikonfigurasikan yang akhirnya akan digunakan sebagai parameter kaedah $.ajax(). Jenis data biasanya termasuk yang berikut:

• teks: teks biasa, digunakan untuk menghantar rentetan ringkas.
• html: digunakan untuk menghantar sekeping HTML.
• skrip: Tambahkan skrip pada halaman.
• json: Hantar objek JSON berformat, yang boleh mengandungi rentetan, tatasusunan atau objek.
• jsonp: digunakan untuk menghantar data JSON yang dikembalikan daripada domain lain.
• xml: digunakan untuk menghantar data format XML tersuai.

Pelaksanaan tak segerak, A dalam Ajax merujuk kepada tak segerak. Pada ketika ini, mungkin sukar bagi ramai pemula jQuery untuk memahami apa itu tak segerak, kerana permintaan Ajax adalah tak segerak secara lalai, dan maklumat yang dikembalikan oleh pelayan tidak tersedia dengan serta-merta. Semua maklumat yang dikembalikan oleh pelayan hanya boleh diproses dalam fungsi panggil balik. Contohnya, kod berikut adalah salah:

var response;
$.get('foo.php', function(r) { response = r; });
console.log(response); // undefined!

Pendekatan yang betul adalah untuk memproses data yang dikembalikan oleh pelayan dalam fungsi panggil balik hanya dilaksanakan apabila permintaan Ajax berjaya diselesaikan Hanya pada masa ini data daripada pelayan boleh diperolehi:

$.get('foo.php', function(response) { console.log(response); });

同源策略及 JSONP，前面已经说过，一般情况下 Ajax 的请求会被限制在相同协议（http 或 https）、相同端口、相同域名下才能正确执行，但是 HTML 的