يتم استخدام AJAX لإنشاء تطبيقات أكثر ديناميكية.
سيوضح لك المثال التالي كيفية تواصل صفحة الويب مع خادم الويب عندما يقوم المستخدم بكتابة الأحرف في مربع الإدخال: يرجى كتابة الحروف (A - Z) في مربع الإدخال أدناه:
حاول إدخال الحرف a في مربع الإدخال:
معلومات سريعة:
عندما يقوم المستخدم بكتابة الأحرف في مربع الإدخال أعلاه، سيتم تنفيذ الوظيفة "showHint()". يتم تشغيل هذه الوظيفة بواسطة حدث "onkeyup":
وظيفة عرض التلميح ( شارع ) { فار xmlhttp ; إذا ( شارع . الطول == 0 ) { مستند getElementById ( " txtHint " ) إرجاع داخلي ; لو ( نافذة .XMLHttpRequest ) { // رمز تنفيذ متصفح IE7+ وFirefox وChrome وOpera وSafari xmlhttp = جديد XMLHttpRequest ( ) ; آخر { // رمز تنفيذ متصفح IE6 وIE5 xmlhttp = جديد ActiveXObject ( " Microsoft.XMLHTTP " ) ; xmlhttp.onreadystatechange = الدالة ( ) { لو ( xmlhttp . ReadyState == 4 && xmlhttp . الحالة == 200 ) { مستند getElementById ( " txtHint " ) . innerHTML = xmlhttp ; } xmlhttp مفتوح ( " GET , " /try/ajax/gethint.php?q= " + str , xmlhttp ) ;تحليل كود المصدر:
إذا كان مربع الإدخال فارغًا str.length==0 ، فستقوم الوظيفة بمسح محتويات العنصر النائب txtHint وتخرج من الوظيفة.
إذا لم يكن مربع الإدخال فارغًا، فستقوم الدالة showHint() بالمهام التالية:
إنشاء كائن XMLHttpRequest
تنفيذ الوظيفة عندما تكون استجابة الخادم جاهزة
إرسال الطلب إلى ملف على الخادم
لاحظ أننا أضفنا المعلمة q (مع محتويات مربع الإدخال) إلى عنوان URL
صفحة الخادم التي يطلق عليها JavaScript أعلاه هي ملف ASP يسمى "gethint.asp".
أدناه، نقوم بإنشاء نسختين من ملف الخادم، أحدهما مكتوب بلغة ASP والآخر بلغة PHP.
يتحقق الكود المصدري في "gethint.asp" من مجموعة من الأسماء ويعيد الأسماء المقابلة إلى المتصفح:
<%response.expires=-1dim a(30)'املأ المصفوفة بها namesa(1)="آنا"a(2)="بريتاني"a(3)="سندريلا"a(4)="ديانا"a(5)="إيفا"a(6)="فيونا"أ( 7)="جوندا"أ(8)=" Hege"a(9)="Inga"a(10)="Johanna"a(11)="Kitty"a(12)="Linda"a(13)="Nina"a(14)="Ophelia" أ(15)="البطونية"أ( 16) = "أماندا" أ (17) = "راكيل" أ (18) = "سيندي" أ (19) = "دوريس" أ (20) = "حواء" أ (21) = "إيفيتا" أ (22) ="سونيفا"a(23)="Tov e"a(24)="Unni"a(25)="Violet"a(26)="Liza"a(27)="إليزابيث"a(28)="إلين"a(29)="وينتشي" a(30)="فيكي"'get المعلمة q من URLq=ucase(request.querystring("q"))'ابحث عن جميع التلميحات من المصفوفة إذا كان طول q>0if len(q)>0 ثم تلميح = "" لـ i=1 إلى 30 إذا q=ucase (mid(a(i),1,len(q))) ثم إذا تلميح = "" ثم تلميح = a (i) آخر تلميح = تلميح & " , " & a(i) النهاية إذا النهاية إذا كان التالي إذا'الإخراج "لا يوجد اقتراح" إذا لم يتم العثور على أي تلميح أو قم بإخراج القيم الصحيحة إذا كان التلميح = "" ثم Response.write("لا يوجد اقتراح")else Response.write(hint)end if%>الكود أدناه مكتوب بلغة PHP وله نفس تأثير كود ASP أعلاه.
<?php// املأ المصفوفة بـ أسماء$a[]="آنا";$a[]="بريتاني";$a[]="سندريلا";$a[]="ديانا";$a[]="إيفا";$a[] ="فيونا";$a[]="غوندا";$a []="Hege";$a[]="Inga";$a[]="Johanna";$a[]="Kitty";$a[]="Linda";$a[]="Nina ";$a[]="أوفيليا";$a[]="البطونية ";$a[]="Amanda";$a[]="Raquel";$a[]="Cindy";$a[]="Doris";$a[]="Eve";$a[ ]="Evita";$a[]="Sunniva";$a[]="To ve";$a[]="Unni";$a[]="Violet";$a[]="Liza";$a[]="Elizabeth";$a[]="إلين";$a []="وينش";$a[]="فيكي";//get المعلمة q من URL$q=$_GET["q"];// ابحث عن جميع التلميحات من المصفوفة إذا كان طول q>0if (strlen($q) > 0){ $hint=""; for($i= 0; $i<count($a); ($hint=="") { $hint=$a[$i] } else { $hint=$hint." , ".$a[$i] } } }}// اضبط الإخراج على "no اقتراح" إذا لم يتم العثور على تلميح// أو إلى القيم الصحيحةif ($hint == ""){ $response="no الاقتراح";}else{ $response=$hint;}// إخراج صدى الاستجابة استجابة $؛؟>