Ajax adalah singkatan dari "Asynchronous JavaScript and XML" dan mengacu pada teknologi pengembangan web untuk membuat aplikasi web interaktif. Teknologi Ajax adalah kumpulan semua teknologi yang saat ini tersedia di browser melalui skrip JavaScript. Ajax menggunakan semua teknologi ini dengan cara baru, merevitalisasi gaya pengembangan Web B/S yang lama.
Di antara teknologi Ajax, teknologi intinya adalah XMLHttpRequest. Nama aslinya adalah XMLHTTP. Ini pertama kali diluncurkan oleh Microsoft di browser IE5.0 pada tahun 1999 untuk memenuhi kebutuhan pengembang. Kemudian teknologi ini diberi nama XMLHttpRequest berdasarkan spesifikasi di atas. Inilah yang menjadikan teknologi Ajax unik. Singkatnya, XMLHttpRequest menyediakan sarana skrip JavaScript yang berjalan di browser untuk berkomunikasi dengan server di dalam halaman. JavaScript di dalam halaman dapat memperoleh data dari server atau mengirimkan data ke server tanpa me-refresh halaman. Kemunculan XMLHttpRequest memberikan kemungkinan baru untuk pengembangan Web, dan bahkan sepenuhnya mengubah pandangan orang tentang apa saja isi aplikasi Web. Hal ini memungkinkan kami melakukan pengembangan web dengan cara yang benar-benar baru dan memberikan pengalaman interaktif yang lebih baik kepada pengguna.
Tidak seperti pengembangan Web tradisional, Ajax tidak melihat aplikasi Web dalam cara berbasis halaman statis. Dari perspektif Ajax, aplikasi Web harus terdiri dari sejumlah kecil halaman, yang masing-masing halaman sebenarnya merupakan aplikasi Ajax yang lebih kecil. Setiap halaman menyertakan beberapa komponen Ajax yang dikembangkan menggunakan JavaScript. Komponen ini menggunakan objek XMLHttpRequest untuk berkomunikasi dengan server secara asinkron. Setelah mendapatkan data yang diperlukan dari server, mereka menggunakan DOM API untuk memperbarui sebagian konten pada halaman. Oleh karena itu, ada tiga perbedaan utama antara aplikasi Ajax dan aplikasi Web tradisional:
1. Berkomunikasi dengan server di dalam halaman tanpa menyegarkan seluruh halaman.
2. Gunakan mode asynchronous untuk berkomunikasi dengan server, tanpa mengganggu operasi pengguna, dan memiliki kemampuan respon yang lebih cepat.
3. Aplikasi hanya terdiri dari beberapa halaman. Sebagian besar interaksi diselesaikan di dalam halaman, dan tidak perlu berpindah seluruh halaman.
Dapat dilihat bahwa Ajax membuat aplikasi Web lebih dinamis, menghadirkan kecerdasan lebih tinggi, dan menyediakan komponen UI Ajax dengan kemampuan ekspresif yang kaya. Jenis aplikasi Web baru ini disebut aplikasi RIA (Rich Internet Application).
Bagian depan adalah beberapa informasi tentang pengenalan AJAX yang saya temukan di Internet untuk membantu pembaca yang belum mengetahui teknologi AJAX memahami teknologi AJAX sesegera mungkin. Selanjutnya, saya akan memperkenalkan kepada Anda beberapa teknologi dan teknik AJAX yang telah saya gunakan proses pembangunan sebenarnya.
Hal terpenting saat menggunakan teknologi AJAX adalah membuat objek XMLHttpRequest. Ada banyak informasi tentang cara membuat objek ini di Internet. Salah satu metode yang paling umum saya gunakan adalah
fungsi buatXMLHttpRequest() {
var xmlhttp;
mencoba {
xmlhttp = ActiveXObject baru('Msxml2.XMLHTTP');
} tangkapan(e) {
mencoba {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} tangkapan(e) {
mencoba {
xmlhttp = XMLHttpRequest baru();
} tangkapan(e) {
alert("Gagal membuat objek XMLHttpRequest!");
}
}
}
kembalikan xmlhttp;
}
Di bawah ini saya akan mencantumkan beberapa contoh dan beberapa hal yang dapat dipelajari melalui contoh-contoh tersebut.
Potongan kode berikut adalah contoh bagaimana saya memverifikasi apakah item tersebut sudah ada di database saat menambahkan item tertentu.
<input type="text" style="width:100%" class="noEmptyInput" name="segment10" value="<%=segment10%>" maxlength="16" onblur="do_verify();">
fungsi lakukan_verifikasi() {
var segment10 = dokumen.mainFrm.segment10.value;
var inventoryItemId = dokumen.mainFrm.inventoryItemId.value;
// peringatan(segmen10)
xmlHttp = buatXMLHttpRequest();
var url = "/servlet/com.sino.ies.inv.maintenance.servlet.ItemMaintainServlet?forward=doVerify&segment10=" + segment10 + "&inventoryItemId=" + inventoryItemId;
xmlHttp.onreadystatechange = handleReadyStateChange;
xmlHttp.open("post", url, true); //Ada juga dua metode transmisi data: GET dan POST, tetapi jika metodenya POST, kalimat berikut harus ditulis
xmlHttp.setRequestHeader('Jenis Konten', 'aplikasi/x-www-form-urlencoded');
xmlHttp.kirim(null);
}
fungsi handleReadyStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
if (xmlHttp.responseText == 'Y') {
document.mainFrm.isExist.value = 'Y';
document.getElementById("bendera").style.display = "blok"
dokumen.mainFrm.segment10.focus();
} kalau tidak {
document.mainFrm.isExist.value = 'N';
document.getElementById("flag").style.display = "tidak ada"
}
} kalau tidak {
peringatan(xmlHttp.status);
}
}
}
Kode latar belakangnya adalah:
boolean sukses = itemDAO.doVerifyItem(); //doVerifyItem adalah metode utama untuk memverifikasi apakah item yang ditentukan ada dalam database. Jika item sudah ada, metode ini akan mengembalikan TRUE
PrintWriter keluar = res.getWriter();
jika (berhasil) {
keluar.cetak("Y");
}
keluar.flush();
keluar.tutup();
}