انتقل إلى محتوى الدرس
فقرة فرعية #2 من درس: AJAX PHP

Example Explained

يستخدم AJAX لإنشاء المزيد من التطبيقات التفاعلية وفي هذا الدرس سوف نتعرف علي طريقة استخدامها مع لغة PHP

1 صفوف تعليمية
جافا سكريبت
2,681 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في المثال السابق عندما يقوم المستخدم بكتابة احرف في حقل الادخال سوف يتم تنفيذ الدالة ( )showHint  وذلك باستخدام ال event التالي "onkeyup"

Example

HTML
<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", "/files/gethint.php?q=" + str);
  xmlhttp.send();
  }
}
</script>

شرح الكود السابق

اولا قمنا بالتحقق من اذا كان حقل الادخال فارغا او لا باستخدام ( str.length==0 )

- فأذا كان فارغا يتم الخروج من تنفيذ الدالة 

- واذا لم يكن فارغا تنفيذ ما يلي

  • يتم انشاء العنصر "XMLHttpRequest"
  • يتم انشاء الدالة عندما تكون استجابة الخادم جاهزة 
  • يتم ارسال طلب الي الخادم لأحضار ملف "gethint.php"
  • يحمل المتغير "str" القيمة التي قام بأدخالها المستخدم في حقل الادخال