ASP - AJAX مع ASP

يستخدم AJAX لإنشاء تطبيقات أكثر حيوية.

مثال AJAX ASP

في المثال التالي، سنعرض كيفية التواصل بين صفحة الويب والخادم عند إدخال المستخدم أحرفًا في المربع الإدخال:

مثال

الرجاء إدخال الحروف في المربع الإدخال أدناه (A - Z):

اسمك:

إيجازًا:

جرب الكود المصدر بنفسك

توضيح المثال - صفحة HTML

عندما يكتب المستخدم أحرفًا في المربع الإدخال أعلاه، يتم تنفيذ دالة "showHint()". يتم تفعيل هذه الدالة بواسطة أحداث "onkeyup":

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// رمز موجه لـ IE7+, Firefox, Chrome, Opera, Safari}
  xmlhttp=new XMLHttpRequest();
  }
else
  {// رمز موجه لـ IE6, IE5}
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (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

هذا الملف 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"