استخدم AJAX لكتابة أمثلة التطبيق لتسجيل المستخدم

المثال الذي قدمته هو تطبيق عندما يقوم مستخدم الشركة بالتسجيل، عندما يقوم المستخدم بالتسجيل، فإنه يتحقق مما إذا كان اسم المستخدم واسم الشركة متاحين. وكانت الطريقة السابقة هي إضافة زر بجواره، والنقر فوق "تحقق"، وإرسال طلب إلى الخادم، ثم انتظر...يقوم الخادم بإرجاع المعلومات ومتابعة العملية.

إذا استخدمنا تقنية AJAX لتنفيذ العمليات المذكورة أعلاه، فلن نضطر إلى انتظار الخادم لإرجاع المعلومات. عندما يقوم المستخدم بإدخال اسم المستخدم أو اسم الشركة، وعندما يفقد مربع نص الإدخال التركيز، سيتم إرسال الطلب تلقائيًا إلى الخادم، وسيستمر المستخدم في تنفيذ العمليات التالية، ليست هناك حاجة للنقر فوق "تحقق" أو الانتظار حتى يقوم الخادم بإرجاع المعلومات، إن عملية التحقق والمستخدم غير متزامنة ويمكن إجراؤها في نفس الوقت. عند إرجاع معلومات الخادم، سيتم عرض المعلومات التي تم إرجاعها تلقائيًا في الموقع المقابل على الصفحة دون تحديث الصفحة، وهو ما يعادل تأثير التحديث الجزئي. دعونا نلقي نظرة على الكود أدناه.

الكود الكامل لصفحة HTML هو كما يلي:

فيما يلي جزء مقتبس:
1＜ %@page language="java" contentType="text/html;charset=GBK"%＞
2＜لغة نصية = "javascript" type = "text/javascript">
3＜!--
4/**//**بدأ أياكس بواسطة Alpha 2005-12-31*/
5
6 var http = getHTTPObject();
7
8 وظيفة HandleHttpResponse(){
9 إذا(http.readyState == 4){
10 إذا(http.status == 200){
11 فار xmlDocument = http.responseXML;
12 إذا(http.responseText!=""){
13 document.getElementById("showStr").style.display = "";
14 document.getElementById("userName").style.background= "#FF0000";
15 document.getElementById("showStr").innerText = http.responseText;
16 }آخر{
17 document.getElementById("userName").style.background= "#FFFFFF";
18 document.getElementById("showStr").style.display = "none";
19}
20
واحد وعشرون }
22 آخر{
23 تنبيه("الصفحة التي طلبتها غير طبيعية، مما قد يؤثر على تصفحك للمعلومات الموجودة في هذه الصفحة!");
24 تنبيه (http.status)؛
25}
26}
27}
28
29 وظيفة HandleHttpResponse1(){
30 إذا(http.readyState == 4){
31 إذا(http.status == 200){
32 var xmlDocument = http.responseXML;
33 إذا(http.responseText!=""){
34 document.getElementById("comNmStr").style.display = "";
35 document.getElementById("comNm").style.background= "#FF0000";
36 document.getElementById("comNmStr").innerText = http.responseText;
37 }آخر{
38 document.getElementById("comNm").style.background= "#FFFFFF";
39 document.getElementById("comNmStr").style.display = "none";
40}
41
42 }
43 آخر{
44 تنبيه("الصفحة التي طلبتها غير طبيعية، مما قد يؤثر على تصفحك للمعلومات الموجودة في هذه الصفحة!");
45 تنبيه (http.status)؛
46 }
47 }
48 }
49
50 وظيفة chkUser(){
51 var url = "/chkUserAndCom";
52 var name = document.getElementById("userName").value;
53 url += ("&userName="+name+"&oprate=chkUser");
54 http.open("GET",url,true);
55 http.onreadystatechange = HandleHttpResponse;
56 http.send(null);
57 عودة؛
58 }
59 وظيفة chkComNm(){
60 var url = "/chkUserAndCom";
61 var name = document.getElementById("comNm").value;
62 url += ("&comName="+name+"&oprate=chkCom");
63 http.open("GET",url,true);
64 http.onreadystatechange = HandleHttpResponse1;
65 http.send(null);
66 عودة؛
67 }
68
69 //يمكن لهذه الوظيفة إنشاء كائن XMLHttpRequest الذي نحتاجه
70 دالة getHTTPObject(){
71 var xmlhttp = false;
72 إذا(window.XMLHttpRequest){
73 xmlhttp = new XMLHttpRequest();
74 إذا(xmlhttp.overrideMimeType){
75 xmlhttp.overrideMimeType('text/xml');
76 }
77 }
78 آخر{
79 حاول{
80 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
81 }الصيد(ه){
82 محاولة{
83 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
84 }الصيد(ه){
85xmlhttp = false;
86}
87 }
88}
89 إرجاع xmlhttp;
90}
91/**//**نهاية أياكس*/
92
93//نموذج الكشف
94 وظيفة كلمة المرور ()
95 {
96 فار م=document.form1;
97 إذا(len(m.password.value) ＞ 20 || len(m.password.value) ＜ 5 || !isStr(m.password.value))
98 {
99 document.getElementById("passwordStr").style.display = "";
100 document.getElementById("password").style.background= "#FF0000";
101 document.getElementById("passwordStr").innerText = "عذرًا، يجب أن تكون كلمة المرور عبارة عن أحرف إنجليزية أو أرقام أو شرطات سفلية، وأن يكون الطول من 5 إلى 20!";
102 }
103 آخر
104 {
105 document.getElementById("password").style.background= "#FFFFFF";
106 document.getElementById("passwordStr").style.display = "none";
107 }
108}
109
110 وظيفة chkconfirmPassword()
111{
112 فار م=document.form1;
113 إذا (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 = "عذرًا، كلمة المرور غير متوافقة مع كلمة المرور المتكررة!";
118 }
119 آخر
120 {
121 document.getElementById("confirmPassword").style.background= "#FFFFFF";
122 document.getElementById("confirmPasswordStr").style.display = "none";
123 }
124}
125
126 وظيفة حقل الاختيار ()
127{
128 فار م=document.form1;
129 إذا(m.userName.value.length==0)
130 {
131 تنبيه("عذرًا، يجب أن يكون اسم المستخدم عبارة عن أحرف أو أرقام أو شرطات سفلية باللغة الإنجليزية، وأن يكون الطول من 5 إلى 20.");
132 m.userName.focus();
133 إرجاع كاذب؛
134}
135 إذا(m.password.value.length==0)
136 {
137 تنبيه("عذرًا، يجب أن تكون كلمة المرور عبارة عن أحرف أو أرقام أو شرطات سفلية باللغة الإنجليزية، وطولها من 5 إلى 20.");
138 m.password.focus();
139 إرجاع كاذب؛
140 }
141 إذا (m.password.value != m.confirmPassword.value)
142 {
143 تنبيه("عذرًا، كلمة المرور غير متوافقة مع كلمة المرور المتكررة!");
144 m.confirmPassword.focus();
145 إرجاع كاذب؛
146 }
147 إذا(m.comNm.value.length==0)
148 {
149 تنبيه("عذرًا، لا يمكن أن يكون اسم الشركة فارغًا!!");
150 m.comNm.focus();
151 إرجاع كاذب؛
152 }
153 م.إرسال();
154}
155
156//-->
157＜/نصي＞
158＜الهامش العلوي للنص = "0">
159＜اسم النموذج = "form1" طريقة = "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＜HR＞
166 ＜ عرض الجدول = "400" الحدود = "0" خلية الحشو = "1" تباعد الخلايا = "1" محاذاة = "المركز" ＞
167＜tr＞
168 ＜td＞＜font color="red"＞*＜/font＞＜/td＞
169 ＜td＞حساب المستخدم:＜/td＞
170＜TD＞
171 ＜نوع الإدخال = "نص" اسم = "اسم المستخدم" maxlength = "20" نمط = "خلفية: #FFFFFF" onBlur = "chkUser ()" قيمة = ""/＞
172 ＜div id="showStr" style="background-color:#FF9900;display:none"＞＜/div＞
173＜/تد＞
174＜/tr＞
175＜tr＞
176 ＜td＞＜font color="red"＞*＜/font＞＜/td＞
177 ＜td＞اسم الشركة:＜/td＞
178＜TD＞
179 ＜نوع الإدخال = "نص" اسم = "comNm" maxlength = "100" نمط = "خلفية: #FFFFFF" onBlur = "chkComNm ()" قيمة = ""/＞
180 ＜div id="comNmStr" style="background-color:#FF9900;display:none"＞＜/div＞
181
182＜/تد＞
183＜/tr＞
184＜tr＞
185 ＜td＞＜font color="red"＞*＜/font＞＜/td＞
186 ＜td＞كلمة مرور المستخدم: ＜/td＞
187 ＜td＞＜نوع الإدخال = "كلمة المرور" الاسم = "كلمة المرور" maxlength = "20" نمط = "الخلفية: #FFFFFF" onBlur = "chkpassword ()"/＞
188 ＜div id="passwordStr" style="background-color:#FF9900;display:none"＞＜/div＞
189＜/TD＞
190＜/tr＞
191＜tr＞
192 ＜td＞＜font color="red"＞*＜/font＞＜/td＞
193 ＜td＞تأكيد كلمة المرور: ＜/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＜/جدول＞
199
200 <div align="center">
201 <input type = "button" name = "ok" value = "OK" onclick = "checkfield ()">
202&nbsp;
203 ＜ نوع الإدخال = "إعادة تعيين" الاسم = "إعادة تعيين" القيمة = "إلغاء"＞
204＜/شعبة＞
205
206＜/نموذج＞
207＜/جسم＞
208＜/html＞

استخدم JavaScript لإنشاء فئة XmlHttpRequest بعد إرسال طلب HTTP إلى الخادم، فإن الخطوة التالية هي تحديد ما يجب القيام به بعد تلقي الاستجابة من الخادم. يتطلب ذلك إخبار كائن طلب HTTP بوظيفة JavaScript التي يجب استخدامها للتعامل مع الاستجابة.

اسم وظيفة JavaScript

المراد استخدامها، كما يلي:

نطلق على request.open() - فهو يفتح قناة المقبس مع الخادم، باستخدام فعل HTTP (GET أو POST) كمعلمة أولى وعنوان URL لموفر البيانات كمعلمة ثانية. تم تعيين المعلمة الأخيرة لـ request.open() على true - فهي تشير إلى الطبيعة غير المتزامنة للطلب. علماً بأن الطلب لم يتم تقديمه بعد. مع استدعاء request.send()، يبدأ التقديم - وهذا يوفر أي حمولة ضرورية لـ POST. عند استخدام الطلبات غير المتزامنة، يجب علينا استخدام خاصية request.onreadystatechanged لتعيين وظيفة رد الاتصال للطلب. (إذا كان الطلب متزامنًا، فيجب أن نكون قادرين على معالجة النتائج فورًا بعد استدعاء request.send، ولكن قد نقوم أيضًا بحظر المستخدم حتى يكتمل الطلب.)

بالنظر إلى عنوان URL لموفر البيانات، url = "/chkUserAndCom" ، servlet كما يلي:

ما يلي هو جزء مرجعي:
1/**//*
2 * تم إنشاؤه بتاريخ 2005-12-31
3*
4 * TODO لتغيير القالب لهذا الملف الذي تم إنشاؤه، انتقل إلى
5 * نافذة - التفضيلات - جافا - نمط الكود - قوالب الكود
6*/
7package com.event;
8
9import javax.servlet.ServletException;
10import javax.servlet.http.HttpServletRequest;
11import javax.servlet.http.HttpServletResponse;
12
13import com.beans.EbaseInfo;
14
15/** *//**
16* @المؤلف ألفا 31-12-2005
17*
18 * ＜P＞Ajax Demonstration---التحقق من اسم مستخدم المؤسسة واسم المؤسسة أثناء تسجيل المؤسسة＜/P＞
19*
20 * المهام لتغيير القالب لهذا النوع الذي تم إنشاؤه، قم بالتعليق على الذهاب إلى
21 * النافذة - التفضيلات - جافا - نمط الكود - قوالب الكود
إثنان وعشرون */
23فئة عامة CheckUserAndComNm {
24 سلسلة خاصة msgStr = "";
25 doGet باطلة محمية (طلب HttpServletRequest، استجابة HttpServletResponse)
26 رمية ServletException
27 {
28
29 EComBaseInfo info=new EComBaseInfo();
30 String oprate=request.getParameter("oprate")).trim();
31 String userName=request.getParameter("userName");
32 String passWord=request.getParameter("password");
33 String comName=request.getParameter("comName");
34
35 محاولة
36 {
37 إذا (oprate.equals("chkUser"))
38 {
39 Response.setContentType("text/html;charset=GB2312");
40 إذا(userName.length()<5||userName.length()>20)
41 {
42 msgStr = "عذرًا، يجب أن يكون اسم المستخدم عبارة عن أحرف أو أرقام أو شرطات سفلية، وأن يكون الطول من 5 إلى 20 حرفًا!";
43}
44 آخر
45 {
46 boolean bTmp=info.findUser(userName); //تحقق من وجود اسم المستخدم في قاعدة البيانات
47 إذا (بتمب)
48 msgStr = "عذرًا، اسم المستخدم هذا موجود بالفعل، يرجى تغيير اسم المستخدم للتسجيل!";
49 آخر
50 msgStr ="";
51 }
52 استجابة.getWriter().write(msgStr);
53}
54 آخر إذا (oprate.equals("chkCom"))
55 {
56 Response.setContentType("text/html;charset=GB2312");
57 إذا(comName.length()<6||comName.length()>100)
58 {
59 msgStr = "عذرًا، اسم الشركة يتكون من 6 إلى 100 حرف (باستثناء المسافات بين الأحرف)!";
60 }
61 آخر
62 {
63 boolean bTmp=info.findCom(comName); //تحقق من وجود اسم الشركة في قاعدة البيانات
64 إذا (بتمب)
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(request,response);
86}
87}
88

ملخص تقنية AJAX

1. AJAX (جافا سكريبت غير المتزامن وXml) هي تقنية برمجة تجمع بين تقنية Java وXml وJavaScript، وهي تتيح لك إنشاء تطبيقات ويب تعتمد على تقنية Java وتكسر تقليد استخدام إعادة تحميل الصفحة.

2. AJAX وJavaScript غير المتزامن وXml، هي طريقة لتطوير تطبيقات الويب تستخدم البرامج النصية من جانب العميل لتبادل البيانات مع خادم الويب. وبهذه الطريقة، يمكن تحديث صفحة الويب ديناميكيًا دون مقاطعة عملية التفاعل وإعادة تحريرها. باستخدام AJAX، يمكنك إنشاء واجهة مستخدم ويب مباشرة ومتاحة للغاية وأكثر ثراءً وأكثر ديناميكية وتكون قريبة من تطبيقات سطح المكتب الأصلية.

3. بالنسبة إلى Mozilla.Netscape وSafari وFirefox والمتصفحات الأخرى، تكون طريقة إنشاء XmlHttpRequest كما يلي:

=

new XmlHttpRequest();

4. يقوم IE والمتصفحات الأخرى بإنشاء XmlHttpRequest كما يلي:

Xmlhttp_request.open('GET', URL, true); Xmlhttp_request.send(null);

6. المعلمة الأولى لـ open() هي طريقة طلب HTTP - GET أو POST أو أي طريقة يدعمها خادمك. وفقًا لمواصفات HTTP، يتم كتابة هذه المعلمة بالأحرف الكبيرة، وإلا فإن بعض المتصفحات (مثل Firefox) قد لا تتمكن من التعامل مع الطلب. المعلمة الثانية هي عنوان URL للصفحة المطلوبة. تحدد المعلمة الثالثة ما إذا كان الطلب في الوضع غير المتزامن. إذا كانت القيمة TRUE، فستستمر وظيفة JavaScript في التنفيذ دون انتظار استجابة من الخادم. هذا هو "A" في "AJAX".

إذا تم استخدام تقنية AJAX بشكل جيد، فستضيف العديد من التأثيرات الودية إلى صفحات الويب الخاصة بنا وتمنح المستخدمين شعورًا أفضل. أجاكس شيء جيد.