٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش AJAX ASP

AJAX برای ایجاد برنامه های تعاملی بیشتر استفاده می شود. مثال AJAX ASP مثال زیر نشان می دهد که چگونه یک صفحه وب می تواند با یک سرور وب ارتباط برقرار کند در حالی که کاربر در فیلد ورودی از…

محمد یوسفی

30 جولای 2021

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


مثال AJAX ASP

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

مثال

Start typing a name in the input field below:

Suggestions:

First name:


مثال توضیح داده شده

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

عملکرد توسط این onkeyupرویداد تحریک می شود.

این کد است:

<p>Start typing a name in the input field below:</p>
<p>Suggestions: <span id="txtHint"></span></p>

<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>

<script>
function showHint(str) {
  if (str.length == 0) {
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else {
    const xmlhttp = new XMLHttpRequest();
    xmlhttp.onload = function() {
      document.getElementById("txtHint").innerHTML = this.responseText;
    }
  xmlhttp.open("GET", "gethint.asp?q=" + str);
  xmlhttp.send();
  }
}
</script>

مثال

توضیح کد:

ابتدا ، خالی بودن قسمت ورودی را بررسی کنید (طول str.le == 0). در صورت وجود ، محتوای متغیر نگهدارنده txtHint را پاک کرده و از عملکرد خارج شوید.

با این حال ، اگر قسمت ورودی خالی نیست ، موارد زیر را انجام دهید:

  • یک شی X 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
%>

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها