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

از موتو کد، دانشنامهٔ برنامه‌نویسی

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

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

مثال

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


توصیه‌ها:

نام:

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


توضیح مثال

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

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

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

مثال

<html>
<head>
<script>
function showHint(str) {
  if (str.length == 0) {
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("txtHint").innerHTML = this.responseText;
      }
    };
    xmlhttp.open("GET", "gethint.asp?q=" + str, true);
    xmlhttp.send();
  }
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>


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


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

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

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

فایل ASP - "gethint.asp"

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

<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"

'get the q parameter from URL
q=ucase(request.querystring("q"))

'lookup all hints from array if length of q>0
if len(q)>0 then
  hint=""
  for i=1 to 30
    if q=ucase(mid(a(i),1,len(q))) then
      if hint="" then
        hint=a(i)
      else
        hint=hint & " , " & a(i)
      end if
    end if
  next
end if

'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
  response.write("no suggestion")
else
  response.write(hint)
end if
%>

منابع آموزشی