مثال‌های ASP در AJAX

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
تعریف شیء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
۱مقدمه
۲ AJAX XMLHttp
۳درخواست AJAX
۴پاسخ سرور
۵مثال‌های XML در AJAX
۶مثال‌های PHP در AJAX
۷مثال‌های ASP در AJAX
۸مثال پایگاه داده در AJAX
۹نرم‌افزارهای XML
۱۰مثال‌های AJAX
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مثال‌های جاوا اسکریپت
مرجع جاوا اسکریپت

AJAX برای ساخت نرم‌افزارهایی که نسبت به سایر نرم‌افزارها تعاملی‌تر هستند استفاده می‌شود. [۱]

مثال زیر نشان می‌دهد که چگونه یک صفحه وب می‌تواند در حالی که کاربر کاراکترهایی را در یک فیلد ورودی داده تایپ می‌کند با یک وب سرورارتباط داشته باشد:

مثال

نوشتن یک نام را در فیلد ورودی زیر شروع کنید:


توصیه‌ها:

نام:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


توضیح مثال

در مثال بالا، هنگامی که کاربر یک کاراکتر را در فیلد ورودی تایپ می‌کند، تابعی به نام showHint() اجرا می‌شود.

این تابع توسط رویداد onkeyup اجرا می‌شود.

در زیر کد HTML مثال را می‌بینید:

مثال

 1 <html>
 2 <head>
 3 <script>
 4 function showHint(str) {
 5   if (str.length == 0) {
 6     document.getElementById("txtHint").innerHTML = "";
 7     return;
 8   } else {
 9     var xmlhttp = new XMLHttpRequest();
10     xmlhttp.onreadystatechange = function() {
11       if (this.readyState == 4 && this.status == 200) {
12         document.getElementById("txtHint").innerHTML = this.responseText;
13       }
14     };
15     xmlhttp.open("GET", "gethint.asp?q=" + str, true);
16     xmlhttp.send();
17   }
18 }
19 </script>
20 </head>
21 <body>
22 
23 <p><b>Start typing a name in the input field below:</b></p>
24 <form>
25 First name: <input type="text" onkeyup="showHint(this.value)">
26 </form>
27 <p>Suggestions: <span id="txtHint"></span></p>
28 </body>
29 </html>


مشاهدهٔ نتیجه


ابتدا، بررسی می‌شود که فیلد ورودی خالی است یا نه (str.length == 0). در صورتی که فیلد خالی بود، محتوای placeholder ای به نام txtHint پاک می‌شود و از تابع خارج می گرد.

اما، در صورتی که فیلد ورودی خالی نباشد، کارهای زیر را انجام می‌دهد:

  • یک شیء XMLHttpRequest می‌سازد
  • یک تابع برای زمانی که پاسخ سرور آماده است، می‌سازد
  • درخواست را به یک فایل ASP به نام (gethint.asp) روی سرور می‌فرستد
  • توجه داشته باشید که پارامتر q به وسیله دستور gethint.asp?q="+str اضافه می‌شود
  • متغیر str محتوای فیلد ورودی را نگه می‌دارد

فایل ASP - "gethint.asp"

فایل ASP آرایه ای از نام‌ها را بررسی کرده و نام مربوط را به مرورگر بازمی‌گرداند:

 1 <%
 2 response.expires=-1
 3 dim a(30)
 4 'Fill up array with names
 5 a(1)="Anna"
 6 a(2)="Brittany"
 7 a(3)="Cinderella"
 8 a(4)="Diana"
 9 a(5)="Eva"
10 a(6)="Fiona"
11 a(7)="Gunda"
12 a(8)="Hege"
13 a(9)="Inga"
14 a(10)="Johanna"
15 a(11)="Kitty"
16 a(12)="Linda"
17 a(13)="Nina"
18 a(14)="Ophelia"
19 a(15)="Petunia"
20 a(16)="Amanda"
21 a(17)="Raquel"
22 a(18)="Cindy"
23 a(19)="Doris"
24 a(20)="Eve"
25 a(21)="Evita"
26 a(22)="Sunniva"
27 a(23)="Tove"
28 a(24)="Unni"
29 a(25)="Violet"
30 a(26)="Liza"
31 a(27)="Elizabeth"
32 a(28)="Ellen"
33 a(29)="Wenche"
34 a(30)="Vicky"
35 
36 'get the q parameter from URL
37 q=ucase(request.querystring("q"))
38 
39 'lookup all hints from array if length of q>0
40 if len(q)>0 then
41   hint=""
42   for i=1 to 30
43     if q=ucase(mid(a(i),1,len(q))) then
44       if hint="" then
45         hint=a(i)
46       else
47         hint=hint & " , " & a(i)
48       end if
49     end if
50   next
51 end if
52 
53 'Output "no suggestion" if no hint were found
54 'or output the correct values
55 if hint="" then
56   response.write("no suggestion")
57 else
58   response.write(hint)
59 end if
60 %>


منابع آموزشی