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>
واتمنى ان ينال هذا الدرس على اعجابكم
و هذه المكتبة المقدمة من ياهو تعتبر مكتبة غنية و مثيرة للاعجاب ، ففيها العديد من الامكانيات التي لن أقول أنها لا تتوفر في غيرها و لكن طريقة التعامل معها تكون بسيطة ، دون ادخال لغة برمجية أخرى كما هو الحال مع GWT .
مكتبة ضخة ، و عندما أقول ضخمة فأنا أعني ما أقول ، فهي تحوي العديد العديد من آليات التحكم الجملية التي تساعد ، و بصراحة ما شاهدته و تعاملت به عندها لم أجده عند غيرها ، لكن مشكلتها و هذا ما عانيت منه هو معاناة المستعرض من عملية جمود لفترة معينة ريثما يتم تحميل كامل المكتبة ، و ليس الأمر بكثافة العناصر المستخدمة ، حتى و لو كنت أستخدم عنصر واحد فقط ..