Rumah >hujung hadapan web >tutorial js >Panduan Komprehensif untuk Acara Ajax: A Deep Dive
Selam mendalam: Panduan lengkap untuk acara Ajax, contoh kod khusus diperlukan
Pengenalan:
Dengan perkembangan pesat Internet, interaktiviti dan responsif halaman web menjadi semakin penting. Kemunculan teknologi Ajax (Asynchronous JavaScript dan XML) memberikan sokongan yang kuat untuk halaman web untuk mencapai interaksi data tanpa menyegarkan. Artikel ini akan memberi anda pemahaman yang mendalam tentang acara Ajax, membincangkan prinsip dan penggunaannya serta memberikan contoh kod khusus.
1. Prinsip dan konsep acara Ajax:
Ajax ialah teknologi yang menggunakan JavaScript dan XML (JSON juga boleh digunakan) untuk interaksi data tak segerak. Interaksi halaman web tradisional mengemas kini data dengan menyegarkan keseluruhan halaman, manakala Ajax boleh mendapatkan data terkini melalui permintaan tak segerak dan mengemas kini kandungan halaman web secara dinamik tanpa memuat semula halaman.
Prinsip teras Ajax ialah menghantar permintaan HTTP tak segerak melalui objek XMLHttpRequest untuk berinteraksi dengan pelayan. Secara amnya, permintaan Ajax termasuk langkah berikut:
Sampel kod :
var xhr = new XMLHttpRequest(); xhr.open("GET", "data.php", true); xhr.send(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var response = xhr.responseText; // 对返回的数据进行处理 console.log(response); } };
Kod contoh:
var xhr = new XMLHttpRequest(); xhr.open("POST", "data.php", true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send("name=John&age=20"); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var response = xhr.responseText; // 对返回的数据进行处理 console.log(response); } };
Contoh kod:
var xhr = new XMLHttpRequest(); xhr.open("GET", "data.php", true); xhr.onload = function() { if (xhr.status === 200) { var response = xhr.responseText; // 对返回的数据进行处理 console.log(response); } }; xhr.send();
Atas ialah kandungan terperinci Panduan Komprehensif untuk Acara Ajax: A Deep Dive. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!