Mari kita tunjukkan dengan contoh verifikasi login biasa.
Secara umum, menggunakan objek XMLHttpRequest untuk verifikasi login memerlukan langkah-langkah berikut:
1. Gunakan metode DOM untuk mendapatkan nilai di kotak input
Copy kode kodenya sebagai berikut:
var namapengguna = document.getElementById("Namapengguna").nilai;
2. Membuat objek XMLHttpRequest. Langkah ini lebih rumit. Alasan utamanya adalah untuk mempertimbangkan masalah kompatibilitas browser.
Copy kode kodenya sebagai berikut:
if (jendela.XMLHttpRequest) {
//Untuk FireFox, Mozillar, Opera, Safari, IE7, IE8
xmlhttp = XMLHttpRequest baru();
//Koreksi bug di beberapa versi browser mozillar tertentu
jika (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("teks/xml");
}
} else if (jendela.ActiveXObject) {
//Untuk IE6, IE5.5, IE5
//Dua nama kontrol yang dapat digunakan untuk membuat objek XMLHTTPRequest, disimpan dalam array js
//Versi yang menduduki peringkat pertama lebih baru
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
mencoba{
//Keluarkan nama kontrol dan buatlah. Jika pembuatan berhasil, akhiri perulangan.
//Jika pembuatan gagal, pengecualian akan dilempar, dan kemudian loop dapat terus mencoba membuat
xmlhttp = ActiveXObject baru(activexName[i]);
merusak;
} tangkapan(e){
}
}
}
3. Daftarkan fungsi panggilan balik dari objek XMLHttpRequest. Saat mendaftarkan fungsi panggilan balik, Anda memerlukan nama fungsi dan tidak menambahkan tanda kurung.
Copy kode kodenya sebagai berikut:
//Saat mendaftarkan fungsi panggilan balik, nama fungsi diperlukan, jangan tambahkan tanda kurung
//Kita perlu mendaftarkan nama fungsi. Jika kita menambahkan tanda kurung, nilai kembalian dari fungsi tersebut akan didaftarkan.
xmlhttp.onreadystatechange = panggilan balik;
4. Atur (GET) informasi koneksi
Copy kode kodenya sebagai berikut:
//Parameter pertama menunjukkan metode permintaan http, mendukung semua metode permintaan http, terutama menggunakan get dan post
//Parameter kedua mewakili alamat URL permintaan, dan parameter yang diminta oleh metode get juga ada di URL.
//Parameter ketiga menunjukkan apakah akan menggunakan interaksi asinkron atau sinkron, true menunjukkan asinkron
xmlhttp.open("GET","AJAXServer?name="+namapengguna,true);
5.Kirim permintaan
Copy kode kodenya sebagai berikut:
xmlhttp.kirim(null);
6. Metode (POST), Anda perlu mengatur sendiri header permintaan http, dan karena perlu dikodekan, Anda tidak dapat langsung mengirim data di parameter kedua XHR.open untuk mengirim datanya.
Copy kode kodenya sebagai berikut:
//Kode untuk permintaan POST
//xmlhttp.open("POST","AJAXServer",benar);
//Metode POST mengharuskan Anda mengatur sendiri header permintaan http
xmlhttp.setRequestHeader("Tipe Konten","application/x-www-form-urlencoded");
//Kirim data dalam mode POST
xmlhttp.send("nama=" + Namapengguna);
Fungsi panggilan balik:
Copy kode kodenya sebagai berikut:
//fungsi panggilan balik
fungsi panggilan balik() {
//peringatan(xmlhttp.readyState);
//5. Menerima data respons
//Tentukan apakah status objek adalah penyelesaian interaktif
if (xmlhttp.readyState == 4) {
//Tentukan apakah interaksi http berhasil
if (xmlhttp.status == 200) {
//Dapatkan data yang dikembalikan oleh server pernis
//Dapatkan output data teks biasa berdasarkan segmen server
var responText = xmlhttp.responseText;
//Menampilkan data pada halaman
//Temukan node elemen yang sesuai dengan tag div melalui dom
var divNode = document.getElementById("hasil");
//Atur konten html di node elemen
divNode.innerHTML = responTeks;
} kalau tidak {
alert("Terjadi kesalahan!!!");
}
}
}