يتم استخدام AJAX لإنشاء المزيد من التطبيقات التفاعلية.
يوضح المثال التالي كيفية تواصل صفحة الويب مع خادم الويب عندما يقوم المستخدم بكتابة الأحرف في مربع الإدخال:
عندما يقوم المستخدم بكتابة الأحرف في مربع الإدخال أعلاه، يتم تنفيذ وظيفة "showHint()". يتم تشغيل هذه الوظيفة بواسطة حدث "onkeyup":
<html><head><script>function showHint(str){ if (str. length==0) { document.getElementById("txtHint").innerHTML="" } 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"،getint.php?q="+str,true();</script></head><body><p><b>في مربع الإدخال أدخل اسمًا:</b></p><form> الاسم: <input type="text" onkeyup="showHint(this.value)"></form><p>قيمة الإرجاع: <span id="txtHint"></span></p></body></html>شرح كود المصدر:
إذا كان مربع الإدخال فارغًا (str.length==0)، فستقوم هذه الوظيفة بمسح محتوى العنصر النائب txtHint والخروج من الوظيفة.
إذا لم يكن مربع الإدخال فارغًا، فسينفذ showHint() الخطوات التالية:
إنشاء كائن XMLHttpRequest
قم بإنشاء وظيفة يتم تنفيذها عندما تكون استجابة الخادم جاهزة
إرسال طلب إلى ملف على الخادم
يرجى ملاحظة أن المعلمة (q) تمت إضافتها إلى نهاية عنوان URL (التي تحتوي على محتويات مربع الإدخال)
صفحة الخادم التي تم استدعاؤها أعلاه من خلال JavaScript هي ملف PHP يسمى "gethint.php".
يتحقق الكود المصدري في "gethint.php" من مصفوفة الأسماء ويعيد الأسماء المقابلة إلى المتصفح:
<?php// املأ المصفوفة بالأسماء $a[]="Anna";$a[]="Brittany";$a[]="Cinderella";$a[]="Diana";$a[]="Eva" ; $a[]="فيونا";$a[]="غوندا";$ a[]="Hege";$a[]="Inga";$a[]="Johanna";$a[]="Kitty";$a[]="Linda";$a[]=" نينا";$a[]="أوفيليا";$a[]="البطونية";$ a[]="Amanda";$a[]="Raquel";$a[]="سيندي";$a[]="دوريس";$a[]="Eve";$a[]=" ايفيتا";$a[]="سونيفا";$a[]="توف";$a []="Unni";$a[]="Violet";$a[]="Liza";$a[]="Elizabeth";$a[]="Ellen";$a[]="Wenche ";$a[]="Vicky";//احصل على q من عنوان URL للطلب المعلمة $q=$_GET["q"];// تحقق مما إذا كانت هناك قيمة مطابقة، إذا q>0if (strlen($q) > 0){ $hint="" for($i=0; $ i< count($a); ") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i] } } }}// إذا لم تكن هناك قيمة مطابقة، فاضبط الإخراج على "لا يوجد اقتراح". " if ($تلميح == ""){ $response="no الاقتراح";}else{ $response=$hint;}// قيمة إرجاع الإخراج echo $response;?>توضيح: إذا أرسلت JavaScript أي نص (على سبيل المثال strlen($q) > 0)، فسيحدث هذا:
ابحث عن الأسماء المطابقة للأحرف المرسلة بواسطة JavaScript
إذا لم يتم العثور على أي تطابق، فاضبط سلسلة الاستجابة على "لا يوجد اقتراح"
إذا تم العثور على اسم مطابق واحد أو أكثر، فقم بتعيين سلسلة الاستجابة بجميع الأسماء
أرسل الرد إلى العنصر النائب "txtHint".
إذا كان طلبك غير المتزامن يحتاج إلى عبور النطاق، فيمكنك التحقق من: حل مشكلة PHP Ajax عبر النطاق.