سافر إلي أمريكا ! _._._ تجربة لدعم المنتدى _._._ الديك الرومي ؟؟ القصة الكاملة ليوم الشكر _._._ هل ترغب بالسفر إلي تركيا
إسلاميات - معرض الصور - عيلة النجعاويه - سفر وسياحة - إنفلونزا الطيور - مدونات - الموبايل - المجلة - هريدي اورج - المصدر التعليمي - بريد مجاني - ألعاب فلاشية - قس سرعة النت - أركيد الألعاب - بحث



المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : نظرة على تقنية أجاكس! .... تعالوا نتعلمها سوااا


ابن البلد
10-10-2005, 03:01 PM
السلام عليكم أخواني الكرام
ظهرت مؤخرا تقنية جديدة لتصميم صفحات المواقع التفاعليه ، هذه التقنية تدعي أجاكس AJAX
الحقيقة أنا دورت علي شوية مواضيع باللغه العريبة عن الموضوع ده والحمد لله توصلت لشوية مواضيع منها نتعرف علي التقنية الجديدة ومنها نتعلمها سوا، التقنية الجديدة دي هي اللي أستخدموها في إصدار المنتديات الجديدة من VB والي بتسهل كتير أوي في التعامل مع خيارات المنتدى بشكل عام وخيارات المشرفين بشكل خاص

نظرة على تقنية أجاكس!

مع ظهور شبكة الويب ظهرت برامج جديدة سميت تطبيقات الويب (web application) وهي برامج تعتمد على مزود لتشغيلها، ويمكن استخدامها من خلال المتصفح، ما يميز هذه التطبيقات أن المستخدم لها لا يحتاج إلى تثبيتها في جهازه، وسيحصل المستخدم دائماً على آخر نسخة من التطبيق فلا حاجة لعمليات الترقية بالنسبة له، كذلك يمكن الوصول لها من خلال أنظمة تشغيل مختلفة، ومن سلبياتها أنها لا تتفاعل مع المستخدم بشكل كافي، فالمزود يرسل الصفحة إلى المتصفح ثم ينقطع الاتصال بين المزود والمتصفح حتى يقوم المستخدم بالضغط على زر ما أو رابط، عند ذلك يرسل المتصفح الأمر المراد تنفيذه إلى المزود الذي بدوره يرسل صفحة جديدة إلى المستخدم، وهكذا تتكرر هذه العملية.

ظهرت تقنيات جديدة في السنوات الماضية، وحاول البعض استخدامها لتحل مشكلة تفاعل تطبيقات الويب مع المستخدم، فظهرت الجافا من شركة صن وكذلك تقنية فلاش من شركة مايكروميديا، إلا أن هذه التقنيات تعاني من بعض السلبيات، فقد لا تتوفر هذه التقنيات لبعض أنظمة التشغيل وقد لا يستطيع المستخدم تثبيتها لأسباب عديدة.

هنا يأتي دور أجاكس..

ماذا يعني مصطلح أجاكس؟
أجاكس (ajax) ليست تقنية بحد ذاتها بل هو مصطلح ابتكره جيس جيمس جاريت (http://www.adaptivepath.com/team/jjg.php) في مقالة بعنوان أجاكس: اتجاه جديد لتطبيقات الويب (http://www.adaptivepath.com/publications/essays/archives/000385.php)، هذا المصطلح يضم تقنيات كثيرة:

XHTML وCSS
XML وXSLT
XMLHttpRequest
جافاسكربت وDOM
يمكن استخدام هذه التقنيات لإنشاء تطبيقات ويب تفاعلية، لكن تصور أن مصطلح أجاكس لم يظهر إلى الوجود، كم هو متعب أن أتحدث عن تطبيق يستخدم كل هذه التقنيات، فلم لا نختصرها في مصطلح واحد؟ هذا ما فعله جيس، وانتشر المصطلح بعد ذلك وبشكل سريع في المواقع والمنتديات، ويكفي أن تزور قسم أجاكس (http://del.icio.us/tag/ajax)في موقع del.icio.us لترى مئات الروابط التي تتحدث عن هذه التقنية.

ما الذي يميز تطبيقات أجاكس؟
تطبيقات الويب التي تستخدم تقنيات أجاكس تتميز بأنها تصبح أكثر تفاعلاً مع المستخدم وتضيق الفجوة بين تطبيقات الويب والبرامج العادية التي يثبتها المستخدم في جهازه، ولنأخذ مثالاً على ذلك.

خدمة تادا لستس (http://www.tadalist.com/) تستخدم تقنيات أجاكس، الخدمة عبارة عن تطبيق ويب بسيط ومجاني لإنشاء القوائم، تستطيع إنشاء عشرة قوائم كحد أقصى وفي كل قائمة تستطيع إضافة عدد لا نهائي من النقاط، فمثلاً يمكنك إنشاء قائمة للأشياء التي تريد إنجازها، أو قائمة مشتريات أو قائمة مشاريع، وهناك أمثلة عديدة (http://tadalist.com/lists/public/1605) تبين كيف يمكن الاستفادة من هذه الخدمة.

الخدمة سهلة الاستخدام، إذا قمت بالتسجيل فيها عليك أولاً أن تقوم بإنشاء قائمة، ثم تضع فيها النقاط التي تريد، لو كانت الخدمة تعتمد على الأسلوب التقليدي لتطوير تطبيقات الويب ستكون بطيئة، فلكي تضيف نقطة واحدة في قائمة ما عليك أن تضغط على زر الإضافة فتظهر لك صفحة جديدة فيها مساحة لإضافة ما تريد، تكتب بعض الكلمات ثم تضغط على زر الإرسال فيرسل المتصفح هذه البيانات إلى المزود وتظهر لك صفحة جديدة فيها القائمة وقد أضيف لها نقطة جديدة.

لكن مع أجاكس الأمر مختلف، قم بإنشاء القائمة، ثم أضف النقاط، إذا أدخلت نقطة ما فستراها مباشرة وقد أضيفت إلى القائمة دون أن يحتاج المتصفح إلى إظهار صفحة جديدة تماماً، المتصفح يقوم بتغيير جزء بسيط من الصفحة بينما باقي عناصر الصفحة ثابت لا يتغير، يمكنك مشاهدة هذا العرض (http://www.tadalist.com/theater)لتفهم كيف تستخدم هذه الخدمة تقنيات أجاكس.

سلبيات استخدام أجاكس لتطوير التطبيقات!
معظم المتصفحات تدعم تقنيات أجاكس، لكن تبقى هناك نسبة من الناس لا تستخدم متصفحات حديثة لسبب أو لآخر، فالبعض يفضل مثلاً استخدام متصفحات نصية لا تدعم الجافاسكربت، والبعض قد يستخدم متصفحاً حديثاً لكنه يلغي دعم الجافاسكربت لأسباب أمنية، وقد يستخدم الشخص هاتفه النقال أو حاسوبه الكفي لتصفح المواقع والكثير من هذه الأجهزة لا تدعم الجافاسكربت، كذلك ذوي الاحتياجات الخاصة قد يستخدمون أجهزة وتقنيات معينة لا تدعم الجافاسكربت، وتقنيات أجاكس لن تكون مفيدة لهؤلاء، لذلك على مطوري تطبيقات الويب أن يوفروا وسيلة بديلة لهؤلاء.

النقطة الثانية تتعلق بدعم المتصفحات، فليس كل المتصفحات تدعم تقنيات أجاكس، وهنا يجب على مطور التطبيقات أو مطور المواقع أن يوفر دعماً لكل المتصفحات الرئيسية، وهذا يعني تعقيد عملية كتابة التطبيقات وزيادة حجمها.

مواقع تستخدم هذه التقنية
شركة جوجل تستخدم تقنيات أجاكس في العديد من خدماتها، مثل بريد Gmail (http://www.gmail.com/) و Google Groups (http://groups-beta.google.com/) وGoogle Suggest (http://www.google.com/webhp?complete=1&hl=en) وخرائط جوجل، كذلك خدمة تخزين وإدارة الصور فليكر (http://www.flickr.com/) تستخدم أجاكس ومحرك بحث أمازون A9 (http://a9.com/) وغيرها من المواقع.

لم تعد أجاكس مجرد موضة عابرة بل أصبحت تقنية تناقش على نطاق واسع وبدأ الكثير من الناس يشاركون في تطويرها وتحسينها.


أرجوا أن يكون المقال الأول أفادنا في فهم التقنية الجديدة
وإن شاء الله أحضر لكم درس تاني باللغه العربية

أحمد المليجي
10-10-2005, 09:35 PM
اول مرة اخد بالي من الموضوع دي
عشان كدة مواقع جوجل دي سرعتها خرافة و تصميمها رائع وبسيط
بقي هو دي السر
بس دي احنا لسة بنحاول نتعلم PHP ولا حتي جافا سكربت
___________________________________
ابو حميد في انتظار الدرس او المقال القادم
http://www.geocities.com/fancy7000/sm24.gif

shody20
10-10-2005, 10:08 PM
أيوة كدة يا حمادة...
عايزين التوكسافين كله

أصدق تمنياتي *8*

ابن البلد
13-10-2005, 12:05 AM
اول مرة اخد بالي من الموضوع دي
عشان كدة مواقع جوجل دي سرعتها خرافة و تصميمها رائع وبسيط
بقي هو دي السر
بس دي احنا لسة بنحاول نتعلم PHP ولا حتي جافا سكربت
___________________________________
ابو حميد في انتظار الدرس او المقال القادم
http://www.geocities.com/fancy7000/sm24.gif
أكيد فيه أسرار كتيرة غير ده يمكن سيرفراتهم والحاجات دي كلها :)

n3na3aah
13-10-2005, 12:24 AM
يا سبحان الله ولله كل ماده الواحد بيحس انه جاهل بجد يعني كل يوم اعرف حاجات ولا كنت اعرف ده ايه ده اساسا يعني حتي الphp الي احمد بيتكلم عنه معرفهوش برده ياله الواحد بيتعلم واحده واحده برده و شكرا ليك يا احمد علي الموضوع و علي المعلومات ديه

ابن البلد
13-10-2005, 05:14 PM
أيوة كدة يا حمادة...
عايزين التوكسافين كله

أصدق تمنياتي *8*
الحمد لله أن الموضوع عجبك يا شودي

ابن البلد
13-10-2005, 05:30 PM
ده مثال عملي جيبته لكم من أحد المواقع برضك علشان يفيدنا في تعلمنا

مثال عملي:
سنقوم بإنشاء تطبيق يقوم بجلب بيانات من قاعدة بيانات MySQL بناءا على اختيار المستخدم ومن ثم عرضها له بدون إعادة تحميل الصفحة.


يتكون المثال الذي سنقوم بتطبيقه من ثلاث ملفات:
* ملف index.html ويستخدم لعرض البيانات للمستخدم.
* ملف test.php ويستخدم لجلب البيانات من قاعدة البيانات.
* ملف main.js ويحتوي على دوال الاتصال بالخادم وجلب البيانات وعرضها


ملف index.html

<html>
<head>
<title>تجربة</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<script src="main.js"></script>
</head>

<body>
<form name="myform">
<select name="myselect" onChange="getInfo()">
<option value="" selected="selected">اختر رقما</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>
<div id="mydiv"></div>
</body>
</html>

ملف main.js

var http = createRequestObject();
function createRequestObject(){
var request_;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_ = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
request_ = new XMLHttpRequest();
}
return request_;
}
function getInfo(){
http.open('get', 'test.php?id='+ document.myform.myselect.selectedIndex);
http.onreadystatechange = handleInfo;
http.send(null);
}
function handleInfo(){
if(http.readyState == 1){
document.getElementById('mydiv').innerHTML = 'جاري جلب البيانات...';
}
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('mydiv').innerHTML = response;
}
}


ملف test.php
<?php
header('Content-Type: text/html; charset=windows-1256');

$id=intval($_GET['id']);
$dbhost="localhost";
$dbuser="root";
$dbpass="";
$database="test";
$link = @mysql_connect( $dbhost, $dbuser, $dbpass );
$db = @mysql_select_db( $database,$link );
$result = mysql_query("SELECT * FROM mytable WHERE id=$id");
while ( $row = mysql_fetch_array($result) ){
echo $row['name'];

}
mysql_free_result($result);
mysql_close($link);
?>

تركيزنا على ملف main.js وهو يتكون من ثلاثة دوال:
دالة createRequestObject لانشاء كائن الاتصال بالخادم.
دالة getInfo لارسال البيانات إلى ملف test.php
دالة handleInfo وهي دالة مساعدة لدالة getInfo وتقوم بعرض البيانات بعد جلبها

في الغالب لن تحتاج للتعديل على دالة createRequestObject
قم بالتعديل فقط في دالتي getInfo و handleInfo ولك ان تسميها كما تشاء
التعديل الذي ستحتاجه في دالة getInfo

* اسم ملف php الذي نستخدمه لعرض البيانات
* اسم النموذج في صفحة HTML وهو في المثال الحالي myform
* اسم صندوق القائمة المنسدلة وهو في المثال الحالي myselect

نلاحظ أن هذا التغيير سيكون في السطر التالي

http.open('get', 'test.php?id='+ document.myform.myselect.selectedIndex);


التعديل الذي ستحتاجه في دالة handleInfo

* اسم وسم div الذي ستسخدمه لعرض البيانات وهو في المثال الحالي mydiv

نلاحظ ان هذا التغيير سيكون في السطرين التاليين:

[code]
document.getElementById('mydiv').innerHTML = 'جاري جلب البيانات...';

document.getElementById('mydiv').innerHTML = response;
[code]

أيضا لاتنسى ان تعدل في ملف test.php حسب إعدادات قاعدة البيانات لديك والمعلومات التي تريد عرضها.

لمشاهدة هذا المثال اضغط هنا
http://www.aknet.com/ajax/
يوجد في المرفقات ملف مضغوط يحتوي على كامل ملفات هذا التطبيق.


بعد مشاهده الرابط نلاحظ أن البيانات بتتغير في نفس الصفحة اللي واقفين فيها دون الإنتقال إلي صفحة تانيه وهكذا وده بيحسسنا اننا فعلا أمام صفحة تفاعليه
ولو عايزين مثال أجمد من ده فنلشاهد صفحة جوجل الجديدة سنجد اننا نستطيع تحريك محتويات الصفحة أمامنا
يارب يكون الدرس عجبكم وإن شاء الله أجيب درس تاني

ابن البلد
13-10-2005, 05:32 PM
يا سبحان الله ولله كل ماده الواحد بيحس انه جاهل بجد يعني كل يوم اعرف حاجات ولا كنت اعرف ده ايه ده اساسا يعني حتي الphp الي احمد بيتكلم عنه معرفهوش برده ياله الواحد بيتعلم واحده واحده برده و شكرا ليك يا احمد علي الموضوع و علي المعلومات ديه
العفو يا نعانيعوووو
خليكي معانا بس وإنت إن شاء الله تتعلمي أكتر وأكتر

أحمد المليجي
13-10-2005, 09:03 PM
<title>تجربة</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<script src="main.js"></script>
</head>

دي بقي طريقه اضافتة ولا كل ملف حسب الوظيفة بتعاتة و حسب استخدامة فتختلف طريقة اضافتة للصفحة العادية
يعني هنا شايفة محطوط في head
_______________________________
الدرس رائع علي فكرة و مستني القادم (عقبال ما نشوف المنتدي شغال بيها )

سمسمة
06-11-2005, 07:33 PM
على فكرة انا بحب موقع gmail وحسيت فعلا ان النظام فيه مختلف عن بقية المواقع لكن ماكنتش اعرف السر

شكرا ياابن البلد وكل سنة وانت طيب

*105*

thefirst2005
18-02-2006, 04:46 PM
جزاك الله كل خير

ابن البلد
20-02-2006, 02:32 PM
على فكرة انا بحب موقع gmail وحسيت فعلا ان النظام فيه مختلف عن بقية المواقع لكن ماكنتش اعرف السر

شكرا ياابن البلد وكل سنة وانت طيب

*105*
العفو يا سمسمة وأنتي طيبه

ابن البلد
20-02-2006, 02:37 PM
جزاك الله كل خير
العفو the first


إسلاميات - معرض الصور - عيلة النجعاويه - سفر وسياحة - إنفلونزا الطيور - مدونات - الموبايل - المجلة - هريدي اورج - المصدر التعليمي - بريد مجاني - ألعاب فلاشية - قس سرعة النت - أركيد الألعاب - بحث