Bagaimana Membuat Permintaan Ajax dengan JavaScript di HTML5?

Bagaimana membuat permintaan Ajax dengan JavaScript dalam html5?

Membuat permintaan Ajax dalam HTML5 menggunakan JavaScript melibatkan memanfaatkan objek xmlhtprequest Inilah cara untuk melakukannya menggunakan kedua -dua kaedah:

menggunakan xmlhttprequest :

 <code class="javascript"> function makeAJaxRequest (url, callback) xhr.open (kaedah, url); xhr.onload = function () {if (xhr.status & gt; = 200 & amp; & amp; xhr.status & lt; 300) {callback (null, xhr.response); // kejayaan, lulus respons kepada panggilan balik} else {callback (xhr.status, null); // ralat, lulus kod status ke panggil balik}}; xhr.onerror = function () {callback (xhr.status, null); // Mengendalikan ralat rangkaian}; xhr.send (); } // Contoh penggunaan: makeAjaxRequest ('data.json', 'get', function (ralat, response) {if (error) {console.error ('error:', error);} else {console.log ('response:', json.parse); Itu mengambil URL, kaedah HTTP (mendapatkan, pos, dll), dan fungsi panggil balik sebagai argumen. Ia mencipta objek <code> xmlhttprequest </code>, menetapkan pendengar acara untuk <code> onload </code> (permintaan yang berjaya) dan <code> onError </code> (ralat rangkaian), dan menghantar permintaan. Fungsi panggil balik mengendalikan tindak balas atau ralat.  <strong> Menggunakan <code> mengambil </code> api: </strong>  <pre class="brush:php;toolbar:false"> <code class="javascript"> function makeFetchRequest (url, method, body) {const option Json.stringify (body) // untuk permintaan pos dengan data json}; ambil (url, option) .then (response = & gt; {if (! response.ok) {membuang ralat baru (`http ralat! status: $ {response.status}}`); console.error ('ralat:', ralat); } // Contoh penggunaan: makeFetchRequest ('data.json', 'get') makeFetchRequest ('hantar_data.php', 'pos', {name: & quot; John doe & quot; Ia menggunakan janji, menjadikan operasi tidak segerak lebih mudah untuk dikendalikan. Contohnya menunjukkan cara mengendalikan kedua -dua permintaan GET dan pos, termasuk menghantar data JSON dalam badan permintaan. Ingat untuk menyesuaikan header </code> kandungan 

kandungan yang diperlukan untuk jenis data yang berbeza.

Apakah faedah utama menggunakan AJAX untuk pembangunan web?

kemas kini tanpa memerlukan tambah nilai halaman penuh. Ini menghasilkan pengalaman pengguna yang lebih cepat dan lebih responsif, kerana pengguna tidak perlu menunggu seluruh halaman untuk menyegarkan semula selepas setiap interaksi. Membolehkan laman web untuk mengemas kini kandungan secara dinamik tanpa mengganggu aliran kerja pengguna. Ini penting untuk ciri-ciri seperti sembang langsung, kemas kini masa nyata, dan bentuk interaktif.

Interaktiviti yang meningkat: Ajax memudahkan penciptaan aplikasi web yang sangat interaktif. Pengguna boleh berinteraksi dengan unsur-unsur dan menerima maklum balas segera tanpa memuatkan semula halaman.

adalah penting untuk membuat aplikasi web yang mantap dan mesra pengguna. Berikut adalah strategi utama:

• Semak kod status http: Sentiasa periksa status harta xmlhttprequest objek (atau response.ok harta di Kod status di luar julat 200-299 menunjukkan ralat (contohnya, 404 tidak dijumpai, 500 ralat pelayan dalaman).
• Mengendalikan ralat rangkaian: Melaksanakan pengendalian ralat untuk isu rangkaian (misalnya, pelayan tidak dapat dicapai). Dengarkan onError dalam xmlhttprequest atau gunakan .catch () blok dalam Fetch . Ini membantu pengguna memahami masalah dan mengambil tindakan yang sesuai. Pertimbangkan dengan menggunakan mekanisme pengendalian kesilapan terpusat untuk log kesilapan untuk tujuan debugging. Mereka boleh mengambil untuk menyelesaikan masalah ini. Ini meningkatkan pengalaman pengguna secara keseluruhan.

(Response.Status === 500) {membuang ralat baru ('Ralat pelayan. Console.error ('ralat:', ralat); Pengendalian ralat: Gagal melaksanakan pengendalian ralat yang betul boleh membawa kepada tingkah laku yang tidak dijangka dan pengalaman pengguna yang lemah. Sentiasa menjangkakan kesilapan yang berpotensi dan mengendalikan mereka dengan anggun. Menggunakan Ajax untuk setiap tugas kecil boleh membawa kepada overhead dan kerumitan yang tidak perlu. Pertimbangkan sama ada penyegaran halaman penuh akan lebih mudah dan lebih cekap.

berhati -hati. Gunakan langkah-langkah keselamatan yang sesuai, seperti pengesahan input dan pemprosesan sisi pelayan yang selamat. Gunakan tajuk HTTP yang sesuai (misalnya, Cache-Control ) untuk menguruskan caching dengan berkesan. Pastikan pelayan dikonfigurasikan untuk membolehkan permintaan dari domain anda.

Menyekat benang utama: Operasi AJAX yang lama dapat menyekat benang utama, menyebabkan UI menjadi tidak responsif. Sentiasa melaksanakan operasi sedemikian secara tidak segerak untuk mengelakkan isu ini. Gunakan async/menunggu atau berjanji untuk menguruskan operasi asynchronous dengan cekap.

Atas ialah kandungan terperinci Bagaimana Membuat Permintaan Ajax dengan JavaScript di HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!