AJAX PHP
يستخدم AJAX لإنشاء المزيد من التطبيقات التفاعلية وفي هذا الدرس سوف نتعرف علي طريقة استخدامها مع لغة PHP
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left AJAX PHP chevron_left JavaScript
AJAX PHP
</> AJAX PHP Example
يوضح المثال التالي كيف يمكن لصفحة الويب الاتصال بخادم الويب بينما يكتب المستخدم الأحرف في حقل الإدخال:
The XMLHttpRequest Object
Start typing a name in the input field below:
Suggestions:
First name:
</> Example Explained
في المثال السابق عندما يقوم المستخدم بكتابة احرف في حقل الادخال سوف يتم تنفيذ الدالة ( )showHint وذلك باستخدام ال event التالي "onkeyup"
Example
<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" القيمة التي قام بأدخالها المستخدم في حقل الادخال
</> The PHP File - "gethint.php"
يتحقق ملف PHP من مجموعة من الأسماء وبعد ذلك يقوم بأعادة الاسماء المتشابهة الي المتصفح
<?php
/* Array with names */
$a[] = "Ahmed";
$a[] = "Ali";
$a[] = "Adel";
$a[] = "Mohamed";
$a[] = "Maged";
$a[] = "Mahmoud";
$a[] = "Marawan";
$a[] = "Moustaf";
$a[] = "Nader";
$a[] = "Noah";
$a[] = "Nasir";
$a[] = "Nour";
$a[] = "Nadia";
$a[] = "badr";
$a[] = "Bilal";
$a[] = "Youssef";
$a[] = "Younes";
$a[] = "Hussein";
$a[] = "Hoda";
$a[] = "Hamza";
$a[] = "Hadeel";
$a[] = "Seham";
$a[] = "saleh";
$a[] = "salah";
$a[] = "samar";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";
/* get the q parameter from URL */
$q = $_REQUEST["q"];
$hint = "";
/* lookup all hints from array if $q is different from "" */
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}
/* Output "no suggestion" if no hint was found or output correct values */
echo $hint === "" ? "no suggestion" : $hint;
?>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
