หน้าแรก>บทช่วยสอนการเขียนโปรแกรมเครือข่าย>บทช่วยสอนของอาแจ็กซ์

ใช้ AJAX เพื่อเขียนตัวอย่างแอปพลิเคชันสำหรับการลงทะเบียนผู้ใช้

ผู้เขียน:Eve Cole เวลาอัปเดต:2009-07-06 16:38:42

173 </td><
174 </tr><
175
176 <td><font color="red"><*</font></td>
177 <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
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" >

189 </td><
190 </ตร.ท.>
191
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

201
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>
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 อย่างดี มันจะเพิ่มเอฟเฟกต์ที่เป็นมิตรมากมายให้กับหน้าเว็บของเรา และช่วยให้ผู้ใช้รู้สึกดีขึ้น อาแจ็กซ์เป็นสิ่งที่ดี