ตัวอย่างที่ฉันยกมาคือแอปพลิเคชันเมื่อผู้ใช้ในองค์กรลงทะเบียน เมื่อผู้ใช้ลงทะเบียน จะตรวจสอบว่าชื่อผู้ใช้และชื่อองค์กรมีอยู่หรือไม่ วิธีก่อนหน้านี้คือเพิ่มปุ่มถัดจากนั้น คลิก "ตรวจสอบ" ส่งคำขอ ไปยังเซิร์ฟเวอร์ จากนั้นรอ...เซิร์ฟเวอร์ส่งคืนข้อมูลและดำเนินการต่อไป
หากเราใช้เทคโนโลยี AJAX เพื่อดำเนินการข้างต้น เราไม่ต้องรอเซิร์ฟเวอร์ส่งคืนข้อมูล เมื่อผู้ใช้ป้อนชื่อผู้ใช้หรือชื่อบริษัท เมื่อกล่องข้อความอินพุตสูญเสียโฟกัส คำขอจะถูกส่งไปโดยอัตโนมัติ เซิร์ฟเวอร์และผู้ใช้จะดำเนินการต่อไป ไม่จำเป็นต้องคลิก "ตรวจสอบ" หรือรอให้เซิร์ฟเวอร์ส่งคืนข้อมูล การตรวจสอบและการดำเนินการของผู้ใช้เป็นแบบอะซิงโครนัสและสามารถทำได้ในเวลาเดียวกัน เมื่อข้อมูลเซิร์ฟเวอร์ถูกส่งคืน ข้อมูลที่ส่งคืนจะแสดงโดยอัตโนมัติในตำแหน่งที่เกี่ยวข้องบนเพจ โดยไม่ต้องรีเฟรชเพจ ซึ่งเทียบเท่ากับเอฟเฟกต์การรีเฟรชบางส่วน ลองดูโค้ดด้านล่าง
รหัสที่สมบูรณ์ของหน้า HTML เป็นดังนี้:
ต่อไปนี้เป็นส่วนที่ยกมา:
1＜ %@page language="java" contentType="text/html;charset=GBK"%>
2＜ภาษาสคริปต์="javascript" type="text/javascript">
3＜!--
4/**//**อาแจ็กซ์ ออกสตาร์ทโดย อัลฟ่า 2005-12-31*/
5
6 คือ http = getHTTPObject();
7
8 ฟังก์ชั่น handleHttpResponse(){
9 ถ้า(http.readyState == 4){
10 ถ้า (http.status == 200){
11 คือ xmlDocument = http.responseXML;
12 if(http.responseText!=""){
13 document.getElementById("showStr").style.display = "";
14 document.getElementById("ชื่อผู้ใช้").style.พื้นหลัง= "#FF0000";
15 document.getElementById("showStr").innerText = http.responseText;
16 }อื่น ๆ{
17 document.getElementById("ชื่อผู้ใช้").style.พื้นหลัง= "#FFFFFF";
18 document.getElementById("showStr").style.display = "ไม่มี";
19}
20
ยี่สิบเอ็ด }
22 อื่น ๆ{
23 alert("หน้าเว็บที่คุณร้องขอมีความผิดปกติ ซึ่งอาจส่งผลต่อการเรียกดูข้อมูลในหน้านี้!");
24 การแจ้งเตือน (http.status);
25}
26}
27}
28
29 ฟังก์ชั่น handleHttpResponse1(){
30 ถ้า(http.readyState == 4){
31 ถ้า (http.status == 200){
32 คือ xmlDocument = http.responseXML;
33 if(http.responseText!=""){
34 document.getElementById("comNmStr").style.display = "";
35 document.getElementById("comNm").style.พื้นหลัง= "#FF0000";
36 document.getElementById("comNmStr").innerText = http.responseText;
37 }อื่น ๆ{
38 document.getElementById("comNm").style.พื้นหลัง= "#FFFFFF";
39 document.getElementById("comNmStr").style.display = "ไม่มี";
40}
41
42 }
43 อื่น ๆ{
44 alert("หน้าเว็บที่คุณร้องขอมีความผิดปกติ ซึ่งอาจส่งผลต่อการเรียกดูข้อมูลในหน้านี้!");
45 การแจ้งเตือน (http.status);
46 }
47 }
48 }
49
50 ฟังก์ชัน chkUser(){
51 var url = "/chkUserAndCom";
52 ชื่อ var = document.getElementById("ชื่อผู้ใช้").value;
53 url += ("&userName="+name+"&oprate=chkUser");
54 http.open("GET",url,true);
55 http.onreadystatechange = handleHttpResponse;
56 http.ส่ง(null);
57 กลับ;
58 }
59 ฟังก์ชัน chkComNm(){
60 var url = "/chkUserAndCom";
61 ชื่อ var = document.getElementById("comNm").value;
62 url += ("&comName="+name+"&oprate=chkCom");
63 http.open("GET",url,true);
64 http.onreadystatechange = handleHttpResponse1;
65 http.ส่ง(null);
66 กลับ;
67 }
68
69 //ฟังก์ชันนี้สามารถสร้างออบเจ็กต์ XMLHttpRequest ที่เราต้องการได้
70 ฟังก์ชัน getHTTPObject(){
71 var xmlhttp = เท็จ;
72 ถ้า (window.XMLHttpRequest){
73 xmlhttp = XMLHttpRequest ใหม่();
74 ถ้า (xmlhttp.overrideMimeType){
75 xmlhttp.overrideMimeType('ข้อความ/xml');
76 }
77 }
78 อื่น ๆ{
79 ลอง{
80 xmlhttp = ใหม่ ActiveXObject("Msxml2.XMLHTTP");
81 }จับ(จ){
82 ลอง{
83 xmlhttp = ใหม่ ActiveXObject("Microsoft.XMLHTTP");
84 }จับ(E){
85 xmlhttp = เท็จ;
86}
87 }
88}
89 ส่งคืน xmlhttp;
90}
91/**//**อาแจ็กซ์จบ*/
92
93//แบบฟอร์มการตรวจจับ
94ฟังก์ชั่น chkpassword()
95{
96 คือ m=document.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("รหัสผ่าน").style.พื้นหลัง= "#FF0000";
101 document.getElementById("passwordStr").innerText = "ขออภัย รหัสผ่านต้องเป็นตัวอักษรภาษาอังกฤษ ตัวเลข หรือขีดล่าง และมีความยาว 5~20!";
102 }
103 อื่น ๆ
104 {
105 document.getElementById("รหัสผ่าน").style.พื้นหลัง= "#FFFFFF";
106 document.getElementById("passwordStr").style.display = "ไม่มี";
107 }
108}
109
110ฟังก์ชั่น chkconfirmPassword()
111{
112 var m=document.form1;
113 ถ้า (m.password.value != m.confirmPassword.value)
114 {
115 document.getElementById("confirmPasswordStr").style.display = "";
116 document.getElementById("confirmPassword").style.พื้นหลัง= "#FF0000";
117 document.getElementById("confirmPasswordStr").innerText = "ขออภัย รหัสผ่านไม่สอดคล้องกับรหัสผ่านซ้ำ!";
118 }
119 อื่นๆ
120 {
121 document.getElementById("confirmPassword").style.พื้นหลัง= "#FFFFFF";
122 document.getElementById("confirmPasswordStr").style.display = "none";
123 }
124}
125
ช่องตรวจสอบ 126 ฟังก์ชั่น ()
127{
128 var m=document.form1;
129 ถ้า (m.userName.value.length==0)
130 {
131 alert("ขออภัย ชื่อผู้ใช้ต้องเป็นตัวอักษรภาษาอังกฤษ ตัวเลข หรือขีดล่าง และมีความยาว 5~20");
132 m.ชื่อผู้ใช้.โฟกัส();
133 กลับเท็จ;
134}
135 ถ้า (m.password.value.length==0)
136 {
137 alert("ขออภัย รหัสผ่านต้องเป็นตัวอักษรภาษาอังกฤษ ตัวเลข หรือขีดล่าง และมีความยาว 5~20");
138 m.password.focus();
139 กลับเท็จ;
140 }
141 ถ้า (m.password.value != m.confirmPassword.value)
142 {
143 alert("ขออภัย รหัสผ่านไม่สอดคล้องกับรหัสผ่านซ้ำ!");
144 m.confirmPassword.focus();
145 กลับเท็จ;
146 }
147 ถ้า(m.comNm.value.length==0)
148 {
149 alert("ขออภัย ชื่อบริษัทไม่สามารถเว้นว่างได้!!");
150 m.comNm.โฟกัส();
151 กลับเท็จ;
152 }
153 m.ส่ง();
154}
155
156//-->
157＜/สคริปต์><
158＜ส่วนขอบด้านบนของร่างกาย="0">
159＜ชื่อแบบฟอร์ม="form1" method="post" action="/Control?act=Register">
160＜ความกว้างของตาราง="100%">
161 ＜tr><＜td align="center">< <H2>โปรแกรมสาธิต Ajax＜/H1><＜/td><＜/tr>
162 ＜tr><＜td align="center""> ------ การลงทะเบียนองค์กรโดย Alpha＜/td><＜/tr>
163＜/โต๊ะ＞
164
165＜ชม.＞
166 ＜ความกว้างของตาราง="400" border="0" cellpadding="1" cellspacing="1" align="center" >
167 <tr>
168 ＜td></font color="red">*＜/font><＜/td>
169 ＜td><บัญชีผู้ใช้:</td>
170 <td>
171 ＜input type="text" name="userName" maxlength="20" style="พื้นหลัง:#FFFFFF" onBlur="chkUser()" value=""/>
172 ＜div id="showStr" style="พื้นหลัง-สี:#FF9900;display:none"></div>
173 ＜/td><
174 ＜/tr><
175 <tr>
176 ＜td＞＜font color="red"><*＜/font>＜/td>
177 ＜td><ชื่อบริษัท:</td>
178＜td><
179 ＜input type="text" name="comNm" maxlength="100" style="พื้นหลัง:#FFFFFF" onBlur="chkComNm()" value=""/>
180 ＜div id="comNmStr" style="พื้นหลัง-สี:#FF9900;display:none">＜/div>
181
182 ＜/td><
183 ＜/tr><
184 <tr>
185 ＜td＞＜font color="red"><*＜/font>＜/td>
186 ＜td><รหัสผ่านผู้ใช้: ＜/td>
187 ＜td＞＜input type="password" name="password" maxlength="20" style="พื้นหลัง:#FFFFFF" onBlur="chkpassword()"/>
188 ＜div id="passwordStr" style="พื้นหลัง-สี:#FF9900;display:none" ></div>
189 ＜/td><
190 ＜/ตร.ท.>
191 <tr>
192 ＜td＞＜font color="red"><*＜/font>＜/td>
193 ＜td><ยืนยันรหัสผ่าน: ＜/td>
194 ＜td><＜input type="password" name="confirmPassword" maxlength="20" style="พื้นหลัง:#FFFFFF" onBlur="chkconfirmPassword()"/>
195 ＜div id="confirmPasswordStr" style="พื้นหลัง-สี:#FF9900;display:none">＜/div>
196 ＜/td>
197 ＜/tr><
198 ＜/โต๊ะ><
199
200 <div align="center">
201 <input type="button" name="ok" value=" OK" onclick="checkfield()">
202
203 ＜ประเภทอินพุต = "รีเซ็ต" name = "รีเซ็ต" ค่า = "ยกเลิก" >
204 ＜/div>
205
206＜/แบบฟอร์ม><
207＜/ตัว><
208＜/html>
ใช้ JavaScript เพื่อสร้างคลาส XmlHttpRequest หลังจากส่งคำขอ HTTP ไปยังเซิร์ฟเวอร์ ขั้นตอนต่อไปคือการตัดสินใจว่าจะต้องทำอะไรหลังจากได้รับการตอบสนองจากเซิร์ฟเวอร์ สิ่งนี้จำเป็นต้องบอกวัตถุคำขอ HTTP ว่าฟังก์ชัน JavaScript ใดที่จะใช้ในการจัดการการตอบสนอง
คุณสามารถตั้งค่าแอตทริบิวต์onreadystatechangeของออบเจ็กต์ให้เป็นชื่อของฟังก์ชัน JavaScript
ที่จะใช้ได้ดังนี้
สร้างหลังจาก onreadystatechangeเราเรียก request.open() - โดยจะเปิดช่องทางซ็อกเก็ตด้วยเซิร์ฟเวอร์ โดยใช้กริยา HTTP (GET หรือ POST) เป็นพารามิเตอร์แรก และ URL ของผู้ให้บริการข้อมูลเป็นพารามิเตอร์ตัวที่สอง พารามิเตอร์สุดท้ายของ request.open() ถูกตั้งค่าเป็นจริง - บ่งชี้ถึงลักษณะอะซิงโครนัสของคำขอ โปรดทราบว่ายังไม่ได้ส่งคำขอ ด้วยการเรียก request.send() การส่งจะเริ่มต้นขึ้น - นี่เป็นเพย์โหลดที่จำเป็นสำหรับ POST เมื่อใช้คำขอแบบอะซิงโครนัส เราต้องใช้คุณสมบัติ request.onreadystatechanged เพื่อกำหนดฟังก์ชันโทรกลับของคำขอ (หากคำขอเป็นแบบซิงโครนัส เราควรจะสามารถประมวลผลผลลัพธ์ได้ทันทีหลังจากการเรียก request.send แต่เราอาจบล็อกผู้ใช้จนกว่าคำขอจะเสร็จสมบูรณ์)
เมื่อดูที่ URL ของผู้ให้บริการข้อมูล url = "/chkUserAndCom" เซิร์ฟเล็ตเป็นดังนี้:
ต่อไปนี้เป็นส่วนอ้างอิง:
1/**//*
2 * สร้างเมื่อ 31-12-2548
3*
4 * TODO หากต้องการเปลี่ยนเทมเพลตสำหรับไฟล์ที่สร้างขึ้นนี้ ให้ไปที่
5 * หน้าต่าง - การตั้งค่า - Java - สไตล์โค้ด - เทมเพลตโค้ด
6*/
7package com.event;
8
9นำเข้า javax.servlet.ServletException;
10นำเข้า javax.servlet.http.HttpServletRequest;
11นำเข้า javax.servlet.http.HttpServletResponse;
12
13นำเข้า com.beans.EBaseInfo;
14
15/** *//**
16 * @ผู้เขียน อัลฟ่า 31-12-2548
17*
18 * ＜P><Ajax Demonstration---การตรวจสอบชื่อผู้ใช้ขององค์กรและชื่อองค์กรระหว่างการลงทะเบียนองค์กร</P>
19*
20 * TODO หากต้องการเปลี่ยนเทมเพลตสำหรับความคิดเห็นประเภทที่สร้างขึ้นนี้ ให้ไปที่
21 * หน้าต่าง - การตั้งค่า - Java - สไตล์โค้ด - เทมเพลตโค้ด
ยี่สิบสอง */
23CheckUserAndComNm ระดับสาธารณะ {
24 สตริงส่วนตัว msgStr = "";
25 โมฆะที่ได้รับการป้องกัน doGet (คำขอ HttpServletRequest, การตอบสนอง HttpServletResponse)
26 พ่น ServletException
27 {
28
29 ข้อมูล EComBaseInfo=ใหม่ EComBaseInfo();
30 สตริง oprate=request.getParameter("oprate")).trim();
31 สตริงชื่อผู้ใช้=request.getParameter("ชื่อผู้ใช้");
32 สตริง passWord=request.getParameter("รหัสผ่าน");
33 สตริง comName=request.getParameter("comName");
34
35 ลอง
36 {
37 ถ้า(oprate.equals("chkUser"))
38 {
39 response.setContentType("text/html;charset=GB2312");
40 if(userName.length()<5||userName.length()>20)
41 {
42 msgStr = "ขออภัย ชื่อผู้ใช้ต้องเป็นตัวอักษร ตัวเลข หรือขีดล่าง และมีความยาว 5-20 ตัวอักษร!";
43}
44 อื่น ๆ
45 {
46 boolean bTmp=info.findUser(userName); //ตรวจสอบว่ามีชื่อผู้ใช้อยู่ในฐานข้อมูลหรือไม่
47 ถ้า(bTmp)
48 msgStr = "ขออภัย มีชื่อผู้ใช้นี้อยู่แล้ว โปรดเปลี่ยนชื่อผู้ใช้เพื่อลงทะเบียน!";
49 อื่น ๆ
50 msgStr ="";
51 }
52 response.getWriter().write(msgStr);
53}
54 อื่น if(oprate.equals("chkCom"))
55 {
56 response.setContentType("text/html;charset=GB2312");
57 if(comName.length()<6||comName.length()>100)
58 {
59 msgStr = "ขออภัย ชื่อบริษัทมีความยาว 6-100 ตัวอักษร (ไม่รวมช่องว่างภายในตัวอักษร)!";
60 }
61 อื่น ๆ
62 {
63 boolean bTmp=info.findCom(comName); //ตรวจสอบว่ามีชื่อบริษัทอยู่ในฐานข้อมูลหรือไม่
64 ถ้า(bTmp)
65 msgStr = "ขออภัย มีชื่อบริษัทนี้อยู่แล้ว โปรดเปลี่ยนชื่อบริษัทเพื่อลงทะเบียน!";
66 อื่น ๆ
67 msgStr ="";
68 }
69 response.getWriter().write(msgStr);
70
71 }
72 }
73 จับ (ข้อยกเว้นเช่น)
74 {
75 }
76 ในที่สุด
77 {
78 request.setAttribute("url",url);
79 }
80}
81
82 doPost โมฆะที่ได้รับการป้องกัน (คำขอ HttpServletRequest, การตอบสนอง HttpServletResponse)
83 พ่น ServletException
84 {
85 doGet (ร้องขอ, ตอบกลับ);
86}
87}
88
สรุปเทคโนโลยี AJAX
1. AJAX (Asynchronous JavaScript และ Xml) เป็นเทคโนโลยีการเขียนโปรแกรมที่รวมเทคโนโลยี Java, Xml และ JavaScript เข้าด้วยกัน ซึ่งช่วยให้คุณสร้างแอปพลิเคชันเว็บโดยใช้เทคโนโลยี Java และฉีกกฎการใช้การโหลดหน้าใหม่
2. AJAX, Asynchronous JavaScript และ Xml เป็นวิธีการพัฒนาเว็บแอปพลิเคชันที่ใช้สคริปต์ฝั่งไคลเอ็นต์เพื่อแลกเปลี่ยนข้อมูลกับเว็บเซิร์ฟเวอร์ ด้วยวิธีนี้ เว็บเพจจึงสามารถอัปเดตแบบไดนามิกได้โดยไม่ขัดจังหวะกระบวนการโต้ตอบและแก้ไขใหม่อีกครั้ง การใช้ AJAX คุณสามารถสร้างอินเทอร์เฟซผู้ใช้เว็บโดยตรง พร้อมใช้งานสูง สมบูรณ์ยิ่งขึ้น และไดนามิกมากขึ้น ซึ่งใกล้เคียงกับแอปพลิเคชันเดสก์ท็อปดั้งเดิม
3. สำหรับ Mozilla.Netscape, Safari, Firefox และเบราว์เซอร์อื่น ๆ วิธีการสร้าง XmlHttpRequest เป็นดังนี้:
Xmlhttp_request=
new XmlHttpRequest();
4. IE และเบราว์เซอร์อื่น ๆ เพื่อสร้าง XmlHttpRequest ดังนี้:
ActiveXObject("Microsoft.XmlHTTP") ;5. Xmlhttp_request.open('GET', URL, true); Xmlhttp_request.send(null);
6. พารามิเตอร์แรกของ open() คือวิธีการร้องขอ HTTP - GET, POST หรือวิธีใดก็ตามที่เซิร์ฟเวอร์ของคุณรองรับ ตามข้อกำหนด HTTP พารามิเตอร์นี้จะเป็นตัวพิมพ์ใหญ่ มิฉะนั้น เบราว์เซอร์บางตัว (เช่น Firefox) อาจไม่สามารถจัดการคำขอได้ พารามิเตอร์ตัวที่สองคือ URL ของหน้าที่ร้องขอ พารามิเตอร์ที่สามกำหนดว่าคำขออยู่ในโหมดอะซิงโครนัสหรือไม่ หากเป็น TRUE ฟังก์ชัน JavaScript จะดำเนินการต่อไปโดยไม่ต้องรอการตอบกลับจากเซิร์ฟเวอร์ นี่คือ "A" ใน "AJAX"
หากใช้เทคโนโลยี AJAX อย่างดี มันจะเพิ่มเอฟเฟกต์ที่เป็นมิตรมากมายให้กับหน้าเว็บของเรา และช่วยให้ผู้ใช้รู้สึกดีขึ้น อาแจ็กซ์เป็นสิ่งที่ดี