Contoh yang saya berikan adalah aplikasi ketika pengguna korporat mendaftar. Saat pengguna mendaftar, ia memeriksa apakah nama pengguna dan nama perusahaan tersedia. Cara sebelumnya adalah dengan menambahkan tombol di sebelahnya, klik "Periksa", kirim permintaan ke server, lalu Tunggu...server mengembalikan informasi dan melanjutkan operasi.
Jika kita menggunakan teknologi AJAX untuk mengimplementasikan operasi di atas, kita tidak perlu menunggu server mengembalikan informasi. Ketika pengguna memasukkan nama pengguna atau nama perusahaan, ketika kotak teks input kehilangan fokus, permintaan akan dikirim secara otomatis ke server, dan pengguna akan terus melakukan operasi berikut, tidak perlu mengklik "Periksa" atau menunggu server mengembalikan informasi. Ketika informasi server dikembalikan, informasi yang dikembalikan akan secara otomatis ditampilkan di lokasi yang sesuai pada halaman tanpa menyegarkan halaman, yang setara dengan efek penyegaran sebagian. Mari kita lihat kode di bawah ini.
Kode lengkap halaman HTML-nya adalah sebagai berikut:
Berikut cuplikan kutipannya:
1＜ %@halaman bahasa="java" contentType="teks/html;charset=GBK"%＞
2＜bahasa skrip="javascript" type="teks/javascript">
3＜!--
4/**//**Ajax dimulai oleh Alpha 2005-12-31*/
5
6 var http = getHTTPObject();
7
8 fungsi handleHttpResponse(){
9 jika(http.readyState == 4){
10 jika(http.status == 200){
11 var xmlDocument = http.responseXML;
12 jika(http.responseText!=""){
13 document.getElementById("showStr").style.display = "";
14 document.getElementById("namapengguna").style.background= "#FF0000";
15 document.getElementById("showStr").innerText = http.responseText;
16 }lainnya{
17 document.getElementById("namapengguna").style.background= "#FFFFFF";
18 document.getElementById("showStr").style.display = "tidak ada";
19}
20
dua puluh satu }
22 lainnya{
23 alert("Halaman yang Anda minta tidak normal, yang mungkin mempengaruhi penjelajahan Anda terhadap informasi di halaman ini!");
24 peringatan(http.status);
25}
26}
27}
28
29 fungsi handleHttpResponse1(){
30 jika(http.readyState == 4){
31 jika(http.status == 200){
32 var xmlDocument = http.responseXML;
33 jika(http.responseText!=""){
34 dokumen.getElementById("comNmStr").style.display = "";
35 dokumen.getElementById("comNm").style.background= "#FF0000";
36 document.getElementById("comNmStr").innerText = http.responseText;
37 }lainnya{
38 dokumen.getElementById("comNm").style.background= "#FFFFFF";
39 document.getElementById("comNmStr").style.display = "tidak ada";
40}
41
42 }
43 lainnya{
44 alert("Halaman yang Anda minta tidak normal, yang mungkin mempengaruhi penjelajahan Anda terhadap informasi di halaman ini!");
45 peringatan(http.status);
46 }
47 }
48 }
49
50 fungsi chkUser(){
51 var url = "/chkUserAndCom";
52 var nama = document.getElementById("namapengguna").nilai;
53 url += ("&NamaPengguna="+nama+"&oprate=chkUser");
54 http.open("DAPATKAN",url,benar);
55 http.onreadystatechange = handleHttpResponse;
56 http.kirim(null);
57 kembali;
58 }
59 fungsi chkComNm(){
60 var url = "/chkUserAndCom";
61 var nama = document.getElementById("comNm").value;
62 url += ("&comName="+nama+"&oprate=chkCom");
63 http.open("DAPATKAN",url,benar);
64 http.onreadystatechange = handleHttpResponse1;
65 http.kirim(null);
66 kembali;
67 }
68
69 //Fungsi ini dapat membuat objek XMLHttpRequest yang kita perlukan
70 fungsi getHTTPObject(){
71 var xmlhttp = salah;
72 if(jendela.XMLHttpRequest){
73 xmlhttp = XMLHttpRequest baru();
74 if(xmlhttp.overrideMimeType){
75 xmlhttp.overrideMimeType('teks/xml');
76 }
77 }
78 lainnya{
79 mencoba{
80 xmlhttp = ActiveXObject baru("Msxml2.XMLHTTP");
81 }menangkap(e){
82 mencoba{
83 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
84 }menangkap(E){
85 xmlhttp = salah;
86}
87 }
88}
89 mengembalikan xmlhttp;
90}
91/**//**Ajax berakhir*/
92
93//Formulir deteksi
94fungsi chkpassword()
95{
96 var m=dokumen.form1;
97 if(len(m.password.value) ＞ 20 || len(m.password.value) ＜ 5 || !isStr(m.password.value))
98 {
99 document.getElementById("passwordStr").style.display = "";
100 document.getElementById("kata sandi").style.background= "#FF0000";
101 document.getElementById("passwordStr").innerText = "Maaf, kata sandi harus berupa huruf, angka, atau garis bawah bahasa Inggris, dan panjangnya 5~20!";
102 }
103 lainnya
104 {
105 document.getElementById("kata sandi").style.background= "#FFFFFF";
106 document.getElementById("passwordStr").style.display = "tidak ada";
107 }
108}
109
110fungsi chkconfirmPassword()
111{
112 var m=dokumen.form1;
113 if (m.password.value != m.confirmPassword.value)
114 {
115 document.getElementById("confirmPasswordStr").style.display = "";
116 document.getElementById("confirmPassword").style.background= "#FF0000";
117 document.getElementById("confirmPasswordStr").innerText = "Maaf, kata sandi tidak sesuai dengan kata sandi yang diulang!";
118 }
119 lainnya
120 {
121 document.getElementById("confirmPassword").style.background= "#FFFFFF";
122 document.getElementById("confirmPasswordStr").style.display = "tidak ada";
123 }
124}
125
126bidang centang fungsi()
127{
128 var m=dokumen.form1;
129 if(m.namapengguna.nilai.panjang==0)
130 {
131 alert("Maaf, nama pengguna harus berupa huruf, angka, atau garis bawah bahasa Inggris, dan panjangnya 5~20.");
132 m.namapengguna.fokus();
133 mengembalikan salah;
134}
135 if(m.kata sandi.nilai.panjang==0)
136 {
137 alert("Maaf, kata sandi harus berupa huruf, angka, atau garis bawah bahasa Inggris, dan panjangnya 5~20.");
138 m.kata sandi.fokus();
139 mengembalikan salah;
140 }
141 if (m.password.value != m.confirmPassword.value)
142 {
143 alert("Maaf, kata sandi tidak sesuai dengan kata sandi yang diulang!");
144 m.konfirmasiPassword.fokus();
145 mengembalikan salah;
146 }
147 if(m.comNm.nilai.panjang==0)
148 {
149 alert("Maaf, nama perusahaan tidak boleh kosong!!");
150 m.comNm.fokus();
151 mengembalikan salah;
152 }
153 m.kirim();
154}
155
156//-->
157＜/skrip＞
158＜margin atas tubuh="0">
159＜form name="form1" method="post" action="/Control?act=Daftar"＞
160＜lebar tabel="100%">
161 ＜tr＞＜td align="center"＞ ＜H2＞Program demo Ajax＜/H1＞＜/td＞＜/tr＞
162 ＜tr＞＜td align="center"＞ ------ Pendaftaran Perusahaan Dengan Alpha＜/td＞＜/tr＞
163＜/meja＞
164
165＜SDM＞
166 ＜lebar tabel="400" border="0" cellpadding="1" Cellspacing="1" align="center" ＞
167 ＜tr＞
168 ＜td＞＜font color="merah"＞*＜/font＞＜/td＞
169 ＜td＞Akun pengguna:＜/td＞
170 ＜td＞
171 ＜input type="text" name="userName" maxlength="20" style="background:#FFFFFF" onBlur="chkUser()" value=""/＞
172 ＜div id="showStr" style="background-color:#FF9900;display:none"＞＜/div＞
173 ＜/td＞
174 ＜/tr＞
175 ＜tr＞
176 ＜td＞＜font color="merah"＞*＜/font＞＜/td＞
177 ＜td＞Nama perusahaan:＜/td＞
178＜td＞
179 ＜input type="text" name="comNm" maxlength="100" style="background:#FFFFFF" onBlur="chkComNm()" value=""/＞
180 ＜div id="comNmStr" style="background-color:#FF9900;display:none"＞＜/div＞
181
182 ＜/td＞
183 ＜/tr＞
184 ＜tr＞
185 ＜td＞＜font color="merah"＞*＜/font＞＜/td＞
186 ＜td＞Kata sandi pengguna: ＜/td＞
187 ＜td＞＜input type="password" name="password" maxlength="20" style="background:#FFFFFF" onBlur="chkpassword()"/＞
188 ＜div id="passwordStr" style="background-color:#FF9900;display:none"＞＜/div＞
189 ＜/td＞
190 ＜/tr＞
191 ＜tr＞
192 ＜td＞＜font color="merah"＞*＜/font＞＜/td＞
193 ＜td＞Konfirmasi kata sandi: ＜/td＞
194 ＜td＞＜input type="password" name="confirmPassword" maxlength="20" style="background:#FFFFFF" onBlur="chkconfirmPassword()"/＞
195 ＜div id="confirmPasswordStr" style="background-color:#FF9900;display:none"＞＜/div＞
196 ＜/td＞
197 ＜/tr＞
198 ＜/meja＞
199
200
Gunakan JavaScript untuk membuat kelas XmlHttpRequest Setelah mengirimkan permintaan HTTP ke server, langkah selanjutnya adalah memutuskan apa yang perlu dilakukan setelah menerima respon dari server. Hal ini mengharuskan objek permintaan HTTP memberi tahu fungsi JavaScript mana yang akan digunakan untuk menangani respons.
Anda dapat mengatur atribut onreadystatechange objek dengannama fungsi JavaScript
yang akan digunakan, sebagai berikut:
Dibuat setelah onreadystatechange.Kami menyebutnya request.open() - ini membuka saluran soket dengan server, menggunakan kata kerja HTTP (GET atau POST) sebagai parameter pertama dan URL penyedia data sebagai parameter kedua. Parameter terakhir dari request.open() disetel ke true - ini menunjukkan sifat permintaan yang tidak sinkron. Perhatikan bahwa permintaan tersebut belum diajukan. Dengan panggilan ke request.send(), pengiriman dimulai - ini menyediakan payload yang diperlukan untuk POST. Saat menggunakan permintaan asinkron, kita harus menggunakan properti request.onreadystatechanged untuk menetapkan fungsi panggilan balik permintaan tersebut. (Jika permintaannya sinkron, kami seharusnya dapat memproses hasilnya segera setelah memanggil request.send, namun kami juga dapat memblokir pengguna tersebut hingga permintaan selesai.)
Melihat URL penyedia data, url = "/chkUserAndCom" , servletnya adalah sebagai berikut:
Berikut ini adalah fragmen referensi:
1/**//*
2 * Dibuat pada 31-12-2005
3*
4 * TODO Untuk mengubah template untuk file yang dihasilkan ini, buka
5 * Jendela - Preferensi - Java - Gaya Kode - Templat Kode
6*/
7paket com.event;
8
9impor javax.servlet.ServletException;
10impor javax.servlet.http.HttpServletRequest;
11impor javax.servlet.http.HttpServletResponse;
12
13impor com.beans.EBaseInfo;
14
15/** *//**
16 * @penulis Alfa 31-12-2005
17*
18 * ＜P＞Demonstrasi Ajax---Memeriksa nama pengguna perusahaan dan nama perusahaan selama pendaftaran perusahaan＜/P＞
19*
20 * TODO Untuk mengubah templat untuk jenis komentar yang dihasilkan ini, buka
21 * Jendela - Preferensi - Java - Gaya Kode - Templat Kode
dua puluh dua */
23kelas publik CheckUserAndComNm {
24 String pribadi msgStr = "";
25 void doGet yang dilindungi (permintaan HttpServletRequest, respons HttpServletResponse)
26 melempar ServletException
27 {
28
29 EComBaseInfo info=EComBaseInfo baru();
30 String oprate=request.getParameter("oprate")).trim();
31 String namapengguna=permintaan.getParameter("Namapengguna");
32 String passWord=request.getParameter("kata sandi");
33 String comName=permintaan.getParameter("comName");
34
35 mencoba
36 {
37 if(oprate.equals("chkUser"))
38 {
39 respon.setContentType("teks/html;charset=GB2312");
40 if(Namapengguna.panjang()<5||Namapengguna.panjang()>20)
41 {
42 msgStr = "Maaf, nama pengguna harus berupa huruf, angka, atau garis bawah, dan panjangnya 5-20 karakter!";
43}
44 lainnya
45 {
46 boolean bTmp=info.findUser(userName); //Periksa apakah nama pengguna ada di database
47 jika(bTmp)
48 msgStr = "Maaf, nama pengguna ini sudah ada, silakan ubah nama pengguna untuk mendaftar!";
49 lainnya
50 msgStr="";
51 }
52 respon.getWriter().write(msgStr);
53}
54 else if(oprate.equals("chkCom"))
55 {
56 respon.setContentType("teks/html;charset=GB2312");
57 if(Namacom.panjang()<6||Namacom.panjang()>100)
58 {
59 msgStr = "Maaf, nama perusahaan panjangnya 6-100 karakter (tidak termasuk spasi di dalam karakter)!";
60 }
61 lainnya
62 {
63 boolean bTmp=info.findCom(comName); //Periksa apakah nama perusahaan ada di database
64 jika(bTmp)
65 msgStr = "Maaf, nama perusahaan ini sudah ada, silakan ganti nama perusahaan untuk mendaftar!";
66 lainnya
67 msgStr="";
68 }
69 respon.getWriter().write(msgStr);
70
71 }
72 }
73 tangkapan (Pengecualian ex)
74 {
75 }
76 akhirnya
77 {
78 permintaan.setAttribute("url",url);
79 }
80}
81
82 void doPost yang dilindungi (permintaan HttpServletRequest, respons HttpServletResponse)
83 melempar ServletException
84 {
85 doGet(permintaan,tanggapan);
86}
87}
88
Ringkasan Teknologi AJAX
1. AJAX (Asynchronous JavaScript dan Xml) adalah teknologi pemrograman yang menggabungkan teknologi Java, Xml, dan JavaScript. Hal ini memungkinkan Anda membangun aplikasi Web berdasarkan teknologi Java dan melanggar konvensi penggunaan pemuatan ulang halaman.
2. AJAX, Asynchronous JavaScript dan Xml, adalah metode pengembangan aplikasi Web yang menggunakan skrip sisi klien untuk bertukar data dengan server Web. Dengan cara ini, halaman Web dapat diperbarui secara dinamis tanpa mengganggu proses interaksi dan mengeditnya kembali. Dengan menggunakan AJAX, Anda dapat membuat antarmuka pengguna Web yang langsung, sangat tersedia, lebih kaya, dan lebih dinamis yang mirip dengan aplikasi desktop asli.
3. Untuk Mozilla.Netscape, Safari, Firefox dan browser lainnya, cara membuat XmlHttpRequest adalah sebagai berikut:
Xmlhttp_request=
new XmlHttpRequest();
4. IE dan browser lain untuk membuat XmlHttpRequest sebagai berikut:
ActiveXObject("Microsoft.XmlHTTP") ;5. Xmlhttp_request.open('GET', URL, true); Xmlhttp_request.send(null);
6. Parameter pertama open() adalah metode permintaan HTTP - GET, POST atau metode apa pun yang didukung server Anda. Menurut spesifikasi HTTP, parameter ini menggunakan huruf kapital; jika tidak, beberapa browser (seperti Firefox) mungkin tidak dapat menangani permintaan tersebut. Parameter kedua adalah URL halaman yang diminta. Parameter ketiga menentukan apakah permintaan berada dalam mode asinkron. Jika TRUE, fungsi JavaScript akan melanjutkan eksekusi tanpa menunggu respon dari server. Ini adalah "A" di "AJAX".
Jika teknologi AJAX digunakan dengan baik, ini akan menambah banyak efek ramah pada halaman web kami dan memberikan perasaan lebih baik kepada pengguna. AJAX adalah hal yang baik.