هذا الاسكربت يستخدم الـ 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>

واتمنى ان ينال هذا الدرس على اعجابكم

11 مارس, 2008Gaia اجاكس ويدجت

gaia_widgets.gifاسم الشركة المكتشفة لـ Gaia Ajax هي Gaiware
قامو مؤخرا باصدار مكتبة اجاكس بعد اصلاح 100 مشكلة فمكتبتهم السابقة.

بعض الامثلة:

والكثير...

افضل طريقة لبدأ استخدام Gaia بالمشاركة في Gaia Programming Contest.

اقراء المزيد عن المكتبة وتحميلها من موقعهم الرئيسي Gaia Ajax Widgets website

كثيرة هي تقنيات الويب 2 الحديثة , و هناك الكثير من الحركات المميزة فيها و خاصة في جانب التصميم, و اليوم سنستعرض تطبيق جافا سكربت بسيط يدعى (Accordion) , فإذا أحببت طريقة تصميم القوائم و التبويبات المنزلقة التي تشاهدها في بعض المواقع, فيمكنك عمل مثلها و ببساطة عن طريق هذين التطبيقين:

1) Simple Javascript Accordions : بسيط و رائع بطرق العرض المختلفة التي يوفرها للمحتوى, تستطيع مشاهدته و تجربته, و إذا أعجبك قم بتحميله و استخدامه في موقعك.

2) Accordion v2.0: تطبيق آخر يدور حول نفس التقنية و لكن بتصميم و طرق عرض أخرى.

ستجدون طريقة التركيب و الاستخدام موجودة بالصفحات المشار لها في كلا التطبيقين.

9 مارس, 2008آجاكس

تعتبر هذه الكلمة من الكلمات التي لابد و أن سمعت بها خلال الفترة الزمنية القليلة الماضية أو الماضية بشكل عام ..
و خلال السنتين الماضيتين ظهر على سطح كوكب الانترنيت العديد من التطبيقات التي تعتمد عليها ، مثل Gmail , Windows Live Mail و Yahoo! Mail و العديد العديد من التطبيقات التي بنيت بأساسات تعتمد على الآجاكس ..
و خلال هذه الفترة أصبح المبرميجن أمام محنة الانتقال إلى ما أطلق عليه مصطلح web 2.0 ، و طبعاً الانتقال له ليس بهذه السهولة …
و ما سأكتبه هنا هو عبارة عن كيفية الاستفادة من المكتبات الموجودة ، و ليس اعادة اختراع الدولاب و سأذكر بعض ما شاهدت من مكتبات :

1- Google Web Toolkit :
http://code.google.com/webtoolkit/
images.jpg و تستخدم فيها لغة الجافا ( و هي من شركة SUN و ليس جافاسكريبت والتي هي من شركة Mozilla ) من أجل كتابة التطبيقات و تخريجها لتصبح تطبيقات آجاكس كما هو الحال في gmail , Google Maps .
و الهدف من ذلك مساعدة المبرمجين الذين لا يتعاملون مع الويب من انشاء تطبيقات ويب جيدة .

2- Yahoo! UI :
http://developer.yahoo.com/yui/
ma_devnet_1.gif و هذه المكتبة المقدمة من ياهو تعتبر مكتبة غنية و مثيرة للاعجاب ، ففيها العديد من الامكانيات التي لن أقول أنها لا تتوفر في غيرها و لكن طريقة التعامل معها تكون بسيطة ، دون ادخال لغة برمجية أخرى كما هو الحال مع GWT .

3- Yahoo! UI Ext:
http://www.yui-ext.com/docs/
و هذه المكتبة تعتمد على مكتبة ياهوو لكن مع تقديم العديد من التحسينات ، و هي ليست تابعة لياهو حتى لا يتم الخلط بالأمر ، لكن ما تقدمه هذه المكتبة يثير الاعجاب .

4- scriptaculous :
http://script.aculo.us/
scriptaculous_logo.png مكتبة صغيرة و بسيطة ، تقدم مجموعة بسيطة من التأثيرات الجيدة و الجميلة ، بالاضافة إلى اعتمادها على Prototype خاص بالجافا سكريبت ، و امكانية التعامل مع الأجاكس من خلال العديد من التوابع البسيطة .
كانت لي تجربة مع هذه المكتبة من خلال التأثيرات و ما يدعى بالتحرير في المكان أو inplace Edit .

5- DOJO :
http://www.dojotoolkit.org
images1.jpg مكتبة ضخة ، و عندما أقول ضخمة فأنا أعني ما أقول ، فهي تحوي العديد العديد من آليات التحكم الجملية التي تساعد ، و بصراحة ما شاهدته و تعاملت به عندها لم أجده عند غيرها ، لكن مشكلتها و هذا ما عانيت منه هو معاناة المستعرض من عملية جمود لفترة معينة ريثما يتم تحميل كامل المكتبة ، و ليس الأمر بكثافة العناصر المستخدمة ، حتى و لو كنت أستخدم عنصر واحد فقط ..
و هذه المكتبة بنيت بالجافا لتقوم بتخريج جميع العناصر كعناصر ويب يمكن استخدامها ، و بصراحة أنصح بها من يريد أن يقوم بانشاء مشروع كبير ، لكن عليه ان ينتبه فهذه المكتبة ليس لمن يستخدمون الاتصالات البطيئة …

6- AJAX.net :
http://www.ajax.net
aspajaxlogo.gif طبعا من الاسم تعلمون عمن أتكلم ، طبعا أتكلم عن المكتبة الخاصة بمايكروسوفت ، و من الممكن استخدام هذه المكتبة مع الـ ASP.net 2.0.

المصدر: http://www.mhdzaherghaibeh.name


© مدونة عالم نيوستار | تصميم TextNData | تعريب قياسي | يستخدم وورد بريس