با عرض سلام و وقت به خیر خدمت کاربران سایت پی وی لرن و کاربرانی که دوره ی آموزش php 7 را دنبال می کنند.
در جلسه گذشته به بررسی رابطه Ajax و XML پرداختیم و آموختیم که می توان از AJAX برای ارتباط تعاملی با یک فایل XML استفاده کرد.
در ادامه این دوره آموزش ایجاد جستجوی زنده در Ajax را به علاقمندان این دوره ارائه می نماییم.
AJAX می تواند برای ایجاد جستجوی کاربر پسند و تعاملی مورد استفاده قرار گیرد.
مثال زیر یک جستجوی زنده یا Live Search را نشان می دهد، به این معنا که در هنگام تایپ نتایج جستجو را دریافت می کنید.
جستجوی زنده دارای مزایای بسیاری در مقایسه با جستجوی سنتی است:
می توانید نمونه ای از جستجوی زنده را مشاهده نمایید:
نتایج در مثال بالا در یک فایل (XML (links.xml پیدا می شود.
برای این مثال کوچک و ساده، تنها شش نتیجه در دسترس هستند.
هنگامی که کاربر CD را از لیست کشویی بالا انتخاب می کند، یک تابع به نام “()showCD” اجرا می شود.
این تابع توسط رویداد “onchange” event فعال می گردد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <html> <head> <script> function showResult(str) { if (str.length==0) { document.getElementById("livesearch").innerHTML=""; document.getElementById("livesearch").style.border="0px"; return; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (this.readyState==4 && this.status==200) { document.getElementById("livesearch").innerHTML=this.responseText; document.getElementById("livesearch").style.border="1px solid #A5ACB2"; } } xmlhttp.open("GET","livesearch.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> <input type="text" size="30" onkeyup="showResult(this.value)"> <div id="livesearch"></div> </form> </body> </html> |
توضیح منبع کد:
اگر فیلد ورودی خالی باشد (str.length == 0)، تابع محتوای را livesearch را پاک می کند و از تابع خارج می شود.
اما اگر این فیلد خالی نبود؛ موارد زیر توسط تابع ()showResult اجرا می شود:
آموزش ایجاد جستجوی زنده در Ajax را با بررسی فایل php می پردازیم.
صفحه سرور تحت نام جاوا اسکریپت یک فایل php به نام “livesearch.php” است.
کد منبع در “livesearch.php” یک فایل XML که عناوین مطابق با رشته جستجو دارد را جستجو می کند و نتیجه را برمی گرداند:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <?php $xmlDoc=new DOMDocument(); $xmlDoc->load("links.xml"); $x=$xmlDoc->getElementsByTagName('link'); //get the q parameter from URL $q=$_GET["q"]; //lookup all links from the xml file if length of q>0 if (strlen($q)>0) { $hint=""; for($i=0; $i<($x->length); $i++) { $y=$x->item($i)->getElementsByTagName('title'); $z=$x->item($i)->getElementsByTagName('url'); if ($y->item(0)->nodeType==1) { //find a link matching the search text if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) { if ($hint=="") { $hint="<a href='" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . $y->item(0)->childNodes->item(0)->nodeValue . "</a>"; } else { $hint=$hint . "<br /><a href='" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . $y->item(0)->childNodes->item(0)->nodeValue . "</a>"; } } } } } // Set output to "no suggestion" if no hint was found // or to the correct values if ($hint=="") { $response="no suggestion"; } else { $response=$hint; } //output the response echo $response; ?> |
اگر همه متون ارسال شده از جاوا اسکریپت (strlen($q) > 0) باشد؛ موارد زیر رخ می دهند:
در این جلسه به آموزش ایجاد جستجوی زنده در Ajax پرداختیم.
در جلسه بعد که آخرین جلسه از دوره آموزش php 7 است به آموزش ایجاد نظر سنجی در Ajax می پردازیم.
با پی وی لرن همراه باشید.