آموزش کار با Ajax در PHP :
همانطور که در درس قبل اشاره کردیم، از Ajax برای ایجاد صفحات دینامیک و پویا در سایت های PHP استفاده می شود.
در کد مثال عملی زیر، نشان داده ایم چگونه یک صفحه وب می تواند در حالی که کاربر کاراکترهای مورد نظر خود را در کادر متن جستجو وارد می کند، در پشت صحنه با سرور تعامل داشته و اطلاعات خود را به روز کند :
توضیح مثال:
در کد متال فوق، هنگامی که کاربر در کادر متن نوشته ای را وارد می کند، یک تابع به نام “show Hint()” اجرا می شود. این تابع با رویداد on key up فراخوانی می شود.
کد HTML صفحه مثال به صورت زیر است :
<html> <head> <script> function showHint(str) { if (str.length == 0) { document.getElementById("txtHint").innerHTML = ""; return; } else { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { document.getElementById("txtHint").innerHTML = this.responseText; } }; xmlhttp.open("GET", "gethint.php?q=" + str, true); xmlhttp.send(); } } </script> </head> <body> <p><b>Start typing a name in the input field below:</b></p> <form> First name: <input type="text" onkeyup="showHint(this.value)"> </form> <p>Suggestions: <span id="txtHint"></span></p> </body> </html>
نکات مثال
در مرحله اول، برنامه چک می کند آیا کادر متن ورودی خالی است یا خیر (آیا مقدار str.length==0 است یا نه). اگر مقدار آن خالی باشد، محتویات txt Hint placeholder را چک کرده و از تابع خارج می شود. اما اگر مقدار کادر متن خالی نباشد، کارهای زیر را به ترتیب انجام می دهد :
- یک شی جدید XMLHttp Request را ایجاد می کند.
- تابع لازم جهت اجرا را پس از این که پاسخ سرور آماده شد، تهیه می کند.
- درخواست یا request را به یک فایل به نام “gethint.php” بر روی سرور ارسال می کند.
- توجه داشته باشید که پارامتر q به آدرس (url) صفحه اضافه شده است (gethint.php?q=”+str).
- متغیر str نیز مقدار کادر متن را در خود ذخیره می کند.
محتویات فایل PHP مثال “gethint.php” :
فایل PHP یک آرایه از نام ها را چک می کند و مقادیری که با مقدار جستجو شده کاربر مرتبط هستند را به مرورگر باز می گرداند :
<?php // Array with names $a[] = "Anna"; $a[] = "Brittany"; $a[] = "Cinderella"; $a[] = "Diana"; $a[] = "Eva"; $a[] = "Fiona"; $a[] = "Gunda"; $a[] = "Hege"; $a[] = "Inga"; $a[] = "Johanna"; $a[] = "Kitty"; $a[] = "Linda"; $a[] = "Nina"; $a[] = "Ophelia"; $a[] = "Petunia"; $a[] = "Amanda"; $a[] = "Raquel"; $a[] = "Cindy"; $a[] = "Doris"; $a[] = "Eve"; $a[] = "Evita"; $a[] = "Sunniva"; $a[] = "Tove"; $a[] = "Unni"; $a[] = "Violet"; $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; ?>
