با عرض سلام و وقت به خیر خدمت کاربران سایت پی وی لرن و کاربرانی که دوره ی آموزش php 7 را دنبال می کنند.
در جلسه گذشته و در بررسی رابطه Ajax و پایگاه داده، آموختیم که Ajax را می توان راهی برای ایجاد ارتباط تعاملی با پایگاه داده دانست. در ادامه این دوره به بررسی رابطه Ajax و XML می پردازیم.
می توان از AJAX برای ارتباط تعاملی با یک فایل XML استفاده کرد.
تصویر زیر مثالی است که نشان می دهد که چگونه یک صفحه وب می تواند اطلاعات را از یک فایل XML با استفاده از AJAX استخراج کند:
هنگامی که کاربر 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 36 37 38 39 | <html> <head> <script> function showCD(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; 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("txtHint").innerHTML=this.responseText; } } xmlhttp.open("GET","getcd.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> Select a CD: <select name="cds" onchange="showCD(this.value)"> <option value="">Select a CD:</option> <option value="Bob Dylan">Bob Dylan</option> <option value="Bee Gees">Bee Gees</option> <option value="Cat Stevens">Cat Stevens</option> </select> </form> <div id="txtHint"><b>CD info will be listed here...</b></div> </body> </html> |
تابع ()showCD به شرح زیر است:
در این جلسه به بررسی رابطه Ajax و XML پرداختیم.
در جلسه بعد به آموزش جستجوی زنده یا Live Search در Ajax می پردازیم و می آموزیم که Ajax می تواند برای ایجاد جستجوی کاربر پسند و تعاملی استفاده شود.
جستجوی زنده دارای مزایای بسیاری در مقایسه با جستجوی سنتی است که به طور مفصل در جلسه بعدی به آن خواهیم پرداخت.
با پی وی لرن همراه باشید.