Bincangkan kaedah biasa dan kaedah penulisan menggunakan Ajax dalam JavaScript

JavaScript digabungkan dengan Ajax adalah salah satu kunci untuk membina aplikasi web moden. Ajax (JavaScript Asynchronous dan XML) ialah teknologi untuk menghantar dan menerima data ke pelayan tanpa memuatkan semula keseluruhan halaman. Dalam artikel berikut, kami akan meneroka kaedah biasa dan kaedah penulisan menggunakan Ajax dalam JavaScript.

Empat langkah Ajax

Sebelum anda mendalami cara menggunakan Ajax dalam JavaScript, anda perlu memahami empat langkah Ajax:

1 Cipta objek XMLHttpRequest

Pertama, anda perlu mencipta objek XMLHttpRequest menggunakan JavaScript. Ini akan membolehkan anda meminta data daripada pelayan secara tidak segerak.

2. Hantar permintaan

Setelah objek XMLHttpRequest dibuat, anda perlu menggunakannya untuk menghantar permintaan HTTP. Jenis permintaan bergantung pada keperluan anda. Biasanya, permintaan GET digunakan untuk mendapatkan data daripada pelayan, manakala permintaan POST digunakan untuk menghantar data ke pelayan.

3. Proses respons

Pelayan akan mengembalikan respons melalui objek XMLHttpRequest. Hasilnya boleh dalam teks biasa, dokumen XML atau format JSON.

4. Kemas kini halaman

Sebaik sahaja anda menerima respons daripada pelayan, anda boleh mengemas kini halaman web anda menggunakan JavaScript. Anda boleh mengemas kini halaman melalui operasi DOM HTML, seperti menambah, memadam, menukar elemen, dsb.

Berikut ialah beberapa cara biasa untuk menulis Ajax:

Menggunakan objek XMLHttpRequest

Kaedah yang paling biasa ialah menggunakan objek XMLHttpRequest untuk menghantar dan menerima data. Di bawah ialah contoh asas menghantar permintaan ke pelayan dan mengemas kini halaman apabila respons diterima.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            document.getElementById("result").innerHTML = xhr.responseText;
        } else {
            alert('Error: ' + xhr.status);
        }
    }
};
xhr.open('GET', 'example.php', true);
xhr.send(null);

Dalam contoh ini, kami mencipta objek XMLHttpRequest dan menetapkan fungsi onreadystatechange. Fungsi ini akan dipanggil apabila respons diterima. Dalam fungsi ini, kami menyemak atribut readyState dan atribut status untuk menentukan sama ada respons itu berjaya. Jika berjaya, kami menggunakan API DOM untuk mengemas kini halaman.

Menggunakan perpustakaan jQuery

jQuery ialah perpustakaan JavaScript yang sangat popular yang memudahkan penggunaan Ajax. Di bawah ialah contoh penggunaan jQuery untuk membuat permintaan pada pelayan dan mengemas kini halaman.

$.ajax({
    url: 'example.php',
    method: 'GET',
    success: function(result) {
        $('#result').html(result);
    },
    error: function(xhr, status, error) {
        console.log('Error: ' + error);
    }
});

Dalam contoh ini, kami menggunakan fungsi $.ajax() untuk membuat permintaan kepada pelayan. Kami menetapkan atribut url untuk menentukan URL permintaan, atribut kaedah untuk menentukan jenis permintaan, fungsi kejayaan untuk mengendalikan respons yang berjaya dan fungsi ralat untuk mengendalikan respons ralat.

Menggunakan API Ambil

API Ambil ialah API JavaScript baharu untuk membuat permintaan rangkaian kepada pelayan. Tidak seperti objek XMLHttpRequest, ia berdasarkan Janji dan menyediakan cara yang lebih diperkemas untuk menghantar dan menerima permintaan rangkaian. Di bawah ialah contoh menggunakan API Ambil untuk menghantar permintaan dan mengemas kini halaman.

fetch('example.php')
    .then(response => response.text())
    .then(result => {
        document.getElementById("result").innerHTML = result;
    })
    .catch(error => {
        console.log('Error: ' + error);
    });

Dalam contoh ini, kami menggunakan fungsi fetch() untuk menghantar permintaan kepada pelayan. Kami menggunakan fungsi then() untuk mengendalikan respons yang berjaya dan fungsi catch() untuk mengendalikan respons ralat. Selepas berjaya memproses respons, kami mengemas kini halaman menggunakan API DOM.

Ringkasan

Dalam aplikasi web moden, JavaScript dan Ajax adalah penting. Menggunakan objek XMLHttpRequest JavaScript, pustaka jQuery atau API Ambil, anda boleh membuat permintaan ke pelayan dengan mudah dan menerima respons serta mengemas kini halaman menggunakan API DOM. Mana-mana kaedah yang anda pilih, ingat untuk menggunakan blok cuba-tangkap untuk menangkap sebarang kemungkinan pengecualian.

Atas ialah kandungan terperinci Bincangkan kaedah biasa dan kaedah penulisan menggunakan Ajax dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!