مثال ASP AJAX

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

مثال ASP AJAX

در این مثال، زمانی که کاربر در فیلد ورودی متن می‌نویسد، وب‌سایت چگونه با سرور وب ارتباط برقرار می‌کند:

مثال

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

نام:

پیشنهادات جستجو:

توضیح مثال

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

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

در زیر کد HTML قرار دارد:

مثال

<html>
<head>
<script>
function showHint(str) {
    اگر (str.length == 0) { 
        document.getElementById("txtHint").innerHTML = "";
        بازگردان;
    }
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            اگر (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>لطفاً حروف A-Z را در فیلد ورودی زیر تایپ کنید：</b></p>
<form> 
نام：<input type="text" onkeyup="showHint(this.value)">
</form>
<p> پیشنهادات جستجو：<span id="txtHint"></span></p>
</body>
</html>

آزمایش کنید

توضیح کد:

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

اما اگر فیلد ورودی خالی نباشد، انجام دهید:

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

فایل ASP - "gethint.asp"

این فایل ASP (ASP) بررسی می‌کند که آیا نام‌ها در آرایه هستند یا خیر و سپس نام‌های مطابقت‌یافته را به مرورگر بازمی‌گرداند:

<%
 response.expires=-1
 dim a(32)
 نام‌ها را در آرایه‌ای وارد کنید
 a(1)="Ava"
 a(2)="Brielle"
 a(3)="Caroline"
 a(4)="Diana"
 a(5)="Elise"
 a(6)="Fiona"
 a(7)="Grace"
 a(8)="Hannah"
 a(9)="Ileana"
 a(10)="Jane"
 a(11)="Kathryn"
 a(12)="Laura"
 a(13)="Millie"
 a(14)="Nancy"
 a(15)="Opal"
 a(16)="Petty"
 a(17)="Queenie"
 a(18)="Rose"
 a(19)="Shirley"
 a(20)="Tiffany"
 a(21)="Ursula"
 a(22)="Victoria"
 a(23)="Wendy"
 a(24)="Xenia"
 a(25)="Yvette"
 a(26)="Zoe"
 a(27)="Angell"
 a(28)="Adele"
 a(29)="Beatty"
 a(30)="Carlton"
 a(31)="Elisabeth"
 a(32)="Violet"
 از URL پارامتر q را دریافت کنید
 q=ucase(request.querystring("q"))
 همه hint در آرایه را بررسی کنید، طول q بیشتر از 0 باشد
 if len(q)>0 then
   hint=""
   برای i=1 تا 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
 اگر hint پیدا نشد، "no suggestion" را نمایش دهید یا مقدار صحیح را نمایش دهید
 if hint="" then
   response.write("no suggestion")
 else
   response.write(hint)
 end if
%>