5 مايو, 2008تحديث الى لمحتوى صفحة باستخدام الاجاكس
هذا الاسكربت يستخدم الـ XMLHTTPRequest للحصول على نتائج من صفحة واضافتها الى صفحة وتحديثها اليا.
يامكنك استخدام هذه الخاصية في العديد من الحالت. مثلا, عندما تريد ان يتحدث عدد الزوار اليا على الصفحة بدون ان تقوم بعملية تحديث للصفحة بامكلها.
سوف يتم التحديث باستخدام دالة الـ setTimeout
لندباء في الخطوات:
اولا نحتاج الى صفحة جلب المعلومات المراد المتغيرة
مثلا سوف نقوم بجلب الوقت والتاريخ من صفحة PHP:
date('l jS of F Y h:i:s A');
بعد ذالك نقوم باضافة الكود التالي في الرأس head الخاص بالصفة التي صوف تعرض الموقت والتاريخ
<script type="text/javascript"> var page = "time.php"; // The page that has the information function ajax(url,target) { document.getElementById(target).innerHTML = 'sending...'; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req.onreadystatechange = function() {ajaxDone(target);}; req.open("GET", url, true); req.send(null); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = function() {ajaxDone(target);}; req.open("GET", url, true); req.send(); } } setTimeout("ajax(page,'scriptoutput')", 10000); } function ajaxDone(target) { if (req.readyState == 4) { if (req.status == 200 || req.status == 304) { results = req.responseText; document.getElementById(target).innerHTML = results; } else { document.getElementById(target).innerHTML="ajax error:n" + req.statusText; } } } </script>
يجب تغير عنوان رابط المصدر من time.php الى رابط مصدر المعلومات الخاص بك
قم بتعديل المدة بين كل تحديث (اولضع الحالي, كل 10 ثواني)
setTimeout("ajax(page,'scriptoutput')", 10000);
قم باضافة onload لاستدعاء الكود
<body onload="ajax(page,'scriptoutput')">
اخير اضع الكود التالي على المكان المراد اظهار المعلومة المحدثة اليا (كل عشرة ثواني)
<span id="scriptoutput">المحتوى الاصلي</span>
واتمنى ان ينال هذا الدرس على اعجابكم