ASP - AJAX و ASP

AJAX برای ایجاد برنامه‌های پویاتر استفاده می‌شود.

مثال AJAX ASP

در این مثال، نحوه ارتباط وب‌سایت با سرور هنگام تایپ کاربر در جعبه ورودی نشان داده می‌شود:

مثال

لطفاً حروف (A - Z) را در جعبه ورودی زیر تایپ کنید:

نام:

پیشنهاد:

من خودتان کد منبع را امتحان کنید

توضیح مثال - صفحه HTML

وقتی کاربر حروف را در جعبه ورودی بالا تایپ می‌کند، عملکرد "showHint()" اجرا می‌شود. این عملکرد توسط رویداد "onkeyup" فعال می‌شود:

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
اگر (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
اگر (window.XMLHttpRequest)
  {// کد برای IE7+, Firefox, Chrome, Opera, Safari}
  xmlhttp=new XMLHttpRequest();
  }
else
  {// کد برای IE6, IE5}
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  اگر (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<p><b>لطفاً حروف انگلیسی را در فیلد ورودی وارد کنید:</b></p>
<form>
نام اول: <input type="text" onkeyup="showHint(this.value)" size="20">
</form>
<p>پیشنهادات: <span id="txtHint"></span></p>
</body>
</html>

توضیحات کد منبع:

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

اگر فیلد ورودی خالی نباشد، showHint() مراحل زیر را اجرا می‌کند:

  • عنصر XMLHttpRequest ایجاد می‌شود
  • توابعی که در هنگام آماده شدن پاسخ سرور اجرا می‌شوند، ایجاد می‌شوند
  • درخواست به فایل روی سرور ارسال می‌شود
  • لطفاً توجه داشته باشید که پارامترهای اضافه شده به پایان URL (q) شامل محتوای فیلد ورودی است.

فایل ASP

صفحه‌ای که این فراخوانی JavaScript به سرور با نام "gethint.asp" است را فراخوانی می‌کند.

"gethint.asp" کد منبع بررسی می‌کند که آیا آرایه نام‌ها را دارد و سپس نام‌های مناسب را به مرورگر بازمی‌گرداند:

<%
response.expires=-1
dim a(30)
'آرایه‌ای از نام‌ها را پر کنید
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"
'پارامتر q را از URL دریافت کنید
q=ucase(request.querystring("q"))
'اگر طول 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
'اگر هیچ راهنمایی پیدا نشد، "no suggestion" را نمایش دهید
'یا مقادیر صحیح را نمایش دهید
if hint="" then
  response.write("no suggestion")
else
  response.write(hint)
end if
%>

توضیحات کد منبع:

اگر JavaScript هرگونه متن را ارسال کند (یعنی strlen($q) بزرگتر از 0 باشد)، این اتفاق می‌افتد:

  • نام‌هایی که با کاراکترهای JavaScript تطابق دارند را پیدا کنید
  • اگر تطابق یافت نشد، رشته پاسخ را به "no suggestion" تنظیم کنید
  • اگر یک یا چند نام تطابق یافت، تمام نام‌ها را برای تنظیم رشته پاسخ استفاده کنید
  • پاسخ را به جایگاه معینی "txtHint" ارسال کنید