الأجاكس أصبح سهلا الآن مع jquery
رأينا في الدروس السابقة كيف أن أجاكس بدل برامج الويب وجعلها أكثر فاعلية و انسيابية , و رأينا أن الأجاكس ما هو إلا مجموعة تقنيات معروفة مثل ال html و الجافاسكربت و اكسمل.
في هذا الدرس سوف نتعلم كيفية إضافة أجاكس إلا برامجكم بكل سهولة و بساطة و ذلك بفضل jquery و هي library مشهورة ل الجافاسكربت.
ما هي jqurey:
ال jquery هي library لجفاسكربت تمكنك من فعل أشياء معقدة بكل سهولة .و في الحقيقة يوجد الكثير من libraries لجافا سكربت لكن ال jquery أعجبتني كثيرا و هي عندي أفضل بكثير من الآخرين.
الآن دعنا نتكلم عن كيفية استعمال jquery .
أولا و قبل كل شيء عليك بتحميل آخر إصدار
http://info-concept.net/image/download_manager.png. (http://www.info-concept.net/jquery.ifc)
طريقة استخدام jquery سهلة جدا و هذا السبب الذي جعلها منتشرة. يمكنك تحديد أي عنصر من الصفحة html و ذلك باستخدام الدالة ()$ و التي هي في الحقيقة مثل http://info-concept.net/image/jquery_lesson_0.png
و تستطيع التعامل مع عناصر ال html تمام مثل إضافة ال css . لنضرب مثال كي تتضح الأمور : مثلا عندنا صفحة html فيها مجموعة من ال div فيهم class مثلا 'foo' أردنا أن نضيف "hello world " إلى جميع هذه الdiv و نلونها كلها ي الأحمر ماذا نفعل ؟
http://info-concept.net/image/jquery_lesson_1.png
سهل أليس كذلك ؟
يمكننا أيضا فعل نفس الشيء بكتابة هذا الكود :
http://info-concept.net/image/jquery_lesson_2.png
وهناك الكثير من ال functions في هذه ال library منها ما هو خاص ب أجاكس مثل
$.post(parameters).
يمكنك الإطلاع أكثر على هذه الدوال في هذا الموقع :
الموقع الرسمي (http://docs.jquery.com/Main_Page)
أو من هذا الموقع : (http://visualjquery.com/1.1.2.html)
المثال الأول ل الأجاكس باستخدام jqeury:
في هذا المثال سوف نصنع مكون للجمل حيث يأخذ كلمات عشوائيا من مجموعة من الكلمات و يكون جمل . في هذا المثال سنتسعمل كلمات في مجال ويب 2.0 مثل ('Mashup', 'Folksonomy', 'Media') .. يمكنك استعمال الكلمات التي تريد .
و في كل مرة يضغط المستعمل على الزر يتشكل لنا جمل جديدة بدون إعادة تحميل الصفحة . حيث يقوم بتكوين الجمل عند السيرفر باستعمال php ثم يتدخل الجافاسكربت لإضافة الأجاكس :smailes14: .لا تحافوا سوف نستعمل jquery و سوف ترون مدى سهولة الأمر :smailes92: .
أولا php :
لتكون الأمور واضحة هذا الكود يقوم بتشكيل الجمل لا يهمك إذ لم تفهم كيفية عمله المهم أن تفهم ماذا يحدث .
<?php
header("Cache-Control: no-cache");
// Ideally, you'd put these in a text file or a database.
// Put an entry on each line of 'a.txt' and use $prefixes = file("a.txt");
// You can do the same with a separate file for $suffixes.
$prefixes = array('Mashup','2.0','Tagging','Folksonomy');
$suffixes = array('Web','Push','Media','GUI');
// This selects a random element of each array on the fly
echo $prefixes[rand(0,count($prefixes)-1)] . " is the new "
. $suffixes[rand(0,count($prefixes)-1)];
// Example output: Tagging is the new Media
?>
2. ثانيا html
كل ما نحتاجه هو إضافة زر يستطيع المستعمل الضغط عليه لتشكيل الكلمات و div لإظهار النتائج و نستعمل هذا div لاحقا مع jquery حيث نتعرف عليه بفضل id الخاص به.
<input type="submit" id="generate" value="Generate!">
<div id="quote"></div>
3. ثالثا jquery:
مثلما وضحت سابقا يمكننا استعمال أي عنصر من html . نستعمل الزر : عندما يضغط المستعمل عليه فإننا نقول أنه حدث حادث ألا و هو الضغط :click . نستطيع إضافة كود عند حدوث هذا الحادث و هذه هي كيفية إضافته بصورة عامة:
$("element expression").click(function(){
// Code goes here
});
جميل ! في مثالنا هذا عند حادث click نقوم بإظهار النتائج على ال div .
حتما قرأتم ال html و css و رأيتم كيفية إضافة css لاي div نستعمل # ثم ال id تاع ال div .نفس الشيء تمام مع jquery . مثلا إذا أردنا استعمال الزر الذي له id 'generate' نستعمل العبارة #generate
سوف نستخدم دالة () load لإضافة أجاكس . لنفترض أن ملف ال php اسمه server.php.
كل الكود الذي نضبفه لعمل الاجاكس يتمثل في هذين السطرين :
http://info-concept.net/image/jquery_lesson_3.png
رائع أليس كذلك لا يوجد المشاكل تاع الجافاسكربت . سطران من الكود لإضافة أجاكس.
jquery لديها دالة هي http://info-concept.net/image/jquery_lesson_4.png و التي تسمح باستخدام عناصر ال html عندما تكون قابلة للاستعمال .
هذا هو كل الكود الذي نكتبه في صفحة ال html محتوى فيه الجافا سكربت :
http://info-concept.net/image/jquery_lesson_5.png
http://info-concept.net/image/download_manager.png
يمكنك تحميل كل الكود : الرابط (http://info-concept.net/article/jquery-demo.rar) .
بهذا يكون قد انتهى درسنا لهذا اليوم . أتمنى أن تعجبكم jquery كما أعجبتني .
في الدرس القادم إن شاء الله سوف نقوم بإنشاء برامج أكثر قوة .
سوف أخبركم عن الدرس القادم : سوف نقوم بإنشاء chat بالأجاكس:smailes26: . نعم. فكونوا في الموعد.
