اے جی ایکس اے ایس ایکسیپل

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）；اگر بله، محتوای placeholder txtHint را خالی کرده و از تابع خارج شوید.

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

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

فایل ASP - "gethint.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
%>