| |||||||
| المدوّنات | البحث | مشاركات اليوم | اجعل كافة المشاركات مقروءة |
 |
| | LinkBack | أدوات الموضوع |
| |||||
| درس: استخدام الAJAX مع الPHP (بطلب Pal-Heart) السلام عليكم ورحمة الله وبركاته .. كنا انا و الاخ Pal-Heart نتكلم في موضوع الAJAX .. وقال لي لماذا لا تعمل درس .. وقلت له فكرة جيدة .. "ستكون هذه اول محاولة لي في عمل درس وانشاء الله تعجبكم" المقدمة: ماهي الAJAX، اولا هي تنطق مثل ما تنطق الفريف اللذي يلعب في الدوري الهولندي "أياكس"، طبعاً كل واحد له نطّقة الخاص ولكن هي ليست المشكلة، المشكلة هي ماهو ذالك الشيء الذي يسمى AJAX AJAX: هي عبارة عن مجموعة من التقنيات تتعامل مع بعضها البعض، مثل الHTML و الCSS و الXML و الAjavaScript من ناحية العميل Client "اي الكمبيوتر اللذي يتصفح الانترنت" و أي تقنية في عملية برمجة الخوادم Servers "اي الكمبيوترات التي تكون فيها لغة برمجة كالPHP او الASP مثلاً و فيها قاعدة بيانات" الAJAX هي اختصار للجملة Asynchronous JavaScript And XML "الإتصال العشوائية بين جافا سكربت و XML" يعني شيء معقد صح ؟ لا .. وبالخط العريض لا .. هذة الجملة طلعت بعد ما استعملتها الشركات الكبرى لاول مرة، لانها كانت متصلة جداً بالXML والان المبرمجين صاروا يشكون منها، فبدء البعض بعدم استعمال الXML للتعقيد الذي يرونة من استخدامة بعض الشيء " ولكن في درس اخر سؤوضح مزايا الXML في الAJAX" .... فصاروا يستخدمون شيء اسمة الAHAH وهي اختصار لكلمة Asynchronous HTTP And HTML اي "الإتصال العشوائي بين الHTTP و الHTML" .. الحين الجملة صارت اسهل للبلع ..صح؟ لانها صارت تستخدم اشياء و تعاريف تفهمونها .. بالرغم من انه مازال يستخدم الJavaScript في تعاملاتة .... ولكن ليس بالتعقيد اللذي هو علية سابفا انا اعلم ان اكثر الناس يستخدمون الAJAX كمصطلح بدلاً من الAHAH ولكن لكثرة انتشار تلك الكلمة، ابقوة بنفس الاسم ولكن الفكرة مختلف فليلاً ولكن اسهل بكثير في البرمجة لماذا AJAX؟ وما الفائدة منة؟ طيب سؤال جميل، صح؟ خليني اشرح ليش بدئت اصلاً هذة التقنية. تخيل انت تستخدم استضافة غالية الثمن .. و انت لديك الملايين من الزوار "كم اتمنى ذالك في موقعي" و انت تدفع للمستضيف على اساس استخدامك للBandwidth اي لكمية البيانات الخارجة من السرفر الى جمهورك ؟؟ وايضاً تخيل ان لديك خدمة مجانية للاستعلام، ما اذا كان نطاق "Domain" قابل للحجز ام لا؟ وانت استخدمت تصميم تقليدي للموقع (اي بدون اجاكس) .. اي ان الزائر ينقر على الزر "ابحث" بعد تعبئة البيانات الازمة .. مع ان الرد سيكوف فقط ب"نعم قابل للحجز" او "لا، الموقع محجوز من قبل شخص اَخر" ولكن في الطريقة التقليدية انت ستضطر لارسال الصفحة من جديد بصورها و جداولها و الوانها و كل هذا فقط لاضافة سطر واحد ؟؟؟؟ لماذا كل هذا التبذير ؟ صح ؟ اذا كان موقعك مثل موقعي .. "ما احد يعدّي علية" لن يكون لديك اي اهمية ولكن المواقع الكبيرة تهتم به لانها على الاقل ستقلل من المصارف بقدر %60 الى %90 بالمائة !!! ها؟ الان عرفتوا ان فكرة الاجاكس ليس اكثر من مجرد حضرمي يريد ان يقتصد؟ "مع العلم انا اصلي حضرمي" المهم .. ممكن تقول في نفسك ليش اتعلم الاجاكس دة ؟ مالة داعي اضيع وقتي ؟؟ لا لا .. الاجاكس تطور بكثير .. الان بامكانك ان تبرمج مواقع تتعامل معة كما تتعامل مع برنامج الدريم ويفر او الاوفيس .. او الاوتلوك ؟ .. ربما بعض مواقع الاجاكس تظنها مواقع فلاش ولكن كلها اجاكس؟؟ فليش ما تخلي موقعك "كووووووووووول"؟ ============ متطلبات الدرس: في درسنا هذا يجب ان يكون لديك: 1- سرفر .. Apache او ISS او اي خادم تود استخدامة 2- PHP لان الدرس سيستخدم الPHP كلغة اساسية في برمجة الخادم *- تعلم كيف تركبها (السرفر و الPHP) من اي درس يمكن ان تبحث عنة في سوالف او في اي موقع اخر *- معرفة القليل من الPHP و تكون لديك بعض الخلفية عن الJavaScript *-ركبّ MySQL لكن ليس الان .. فقط ضعة في البال لان في الجزء الثاني من الدرس ساحاول ان استخدام قاعدة للبيانات لكي يكون الدرس شامل وقابل للتطبيق في برامجكم المستقبلية ... الدرس: (المستوى مبتدء الى متوسط) في هذا الدرس سوف نتعلم كيفية عمل استدعاء جزئية معينة من ملف في الخادم "السرفر" ووضعة الناتج من تلك الاستدعاء في صفحة محمولة مسبقاً .. اي سنغير بعض محتوى الموقع من دون عملية تحديث للصفحة نفسها .. بالعربي سنتعلم كيف نسوي سحر في الHTML ================== حمل المرفقات الموجودة مع هذا الدرس ================== لنبدء اولا لنعمل ملف HTML اللذي سيحتوي على زر و مكان للتحديث و JavaScript صغير مبرمج لكي ستدعي المعطيات من الموقع ... كود بلغة HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="ar" lang="ar"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" type="text/javascript" src="javaScript.js"></script> <style type="text/css"> td{ font-size:36px } </style> <title>الاجاكس</title> </head> <body> <table width="200" border="1"> <tr> <td id="ChangeHere">يرقة</td> </tr> <tr> <td> <input type="submit" name="Submit" value="حول" onclick="get_From_Server();" /> </td> </tr> </table> </body> </html> شرح الكود: 1- index.html <بالمناسبة معنى كلمة ChangeHere هي (غيّر هنا)!"> ملف الHTML مافية اي تعقيد ابداً ... بس لاحض شيء عجيب ... وهو <td/>يرقة<"td id="ChangeHere> .. "لماذا هذة الزيادة .. بعضكم ممكن يقول "ما كانت الID نستخدمها فقط في قواعد البيانات للتميز من سجل واخر؟" نعم يستخدم في التميز من سجل لاخر ولكن الJavaScript ايضاً يريد ان يميز من شيئ لاخر .. وذالك باعطاء الاماكن بتعاريف مثل الID "لا تخف سيتوضح الامر عندما نشرح اوامر الJavaScript" 2- javaScript.js "الملف الذي يحوي اوامر الJavaScript" قبل ما تقرء السطر التالي ... شمرّ الثوب و ارفع الاكمام ... لان هنا يبدء الشغل المتعب لنشرح سطر بسطر }()function get_From_Server هذا مجرد تعريف للدالة .. ومعناها بالعربي "خذ من السرفر" كود بلغة HTML:
try{ Answer = new XMLHttpRequest();
}catch(error){
try{
Answer = new ActiveXObject("Microsoft.XMLHTTP");
}catch(error){ Answer = null; return false;
} try اي جرّب تستخدم الامر Answer = new XMLHttpRequest و اذا ما نفع استخدم الامر كود بلغة HTML: Answer = new ActiveXObject("Microsoft.XMLHTTP"); معليك من التجارب .. لان الJavaScript سيجرب ولكن النتيجة نفسها السطر ;Answer.onreadystatechange = change_when_have_info مجرد تعريف للحاوي Answer، لكي يعرف ماهي الدالة الذي يستخدمة اذا وصل المعلومات !! ("Answer.open("POST", "ajax.php تقول للحاوي اين يجد النتيجة ... وهي مثل ما ترون ان النتيجة موجودة في الملف ajax.php ;(Answer.send(null تقول للحاوي Answer ان يرسل البيانات الان ... لا تقلق من شئن الnull الان ... هذا في الجزء الثاني من الدرس ()function change_when_have_info نعرف الدالة الذي سيستخدمها الحاوي Answer بعدما تلقى نتيجة من ملف الPHP معليك من الباقي المهم اعلم ان الرقم 200 تعني العملية تمت بنجاح ... الان ممكن اشرح ليش وضعت الID في ملف الHTML السطر document.getElementById('ChangeHere').innerHTML = Answer.responseText يفوم بالتالي .. الذهاب الى المستند document و البحث فية بالامر getElementById و تحديد مكان الID الموجود بالمستند واسمة 'ChangeHere' و لكي يستبدل الناتج من Answer.responseText بالامر innerHTML 3- الملف ajax.php (الملف الذي يحوي النتيجة) ملف الPHP ماهو بذالك التعقيد .. لانة فقط يطبع الكلمة "فراشة" ============== معليش عقدتكم شوي .. بس جرّب وترى انها سهلة جداً ملاحظة: انا أفضّل النقد و الاضاقات اكثر من الشكر والمدح | |||||
|
| |||||
| اقتباس:
بالنسبة للقوالب اتضحت الصورة ورايح اجرب ان شاء الله بالنسبة setTimeout هل ممكن تعديل المثال السابق بحيث يحتوي على setTimeout لاني مبتداء في هذا المجال وشكر لك | |||||
|
| |||||
| اقتباس:
 وسوف اقوم بالتجربة وابلغك انشاء الله | |||||
|
| |||||
|
مبدع اخوي الله يوفقك وننتظر المزيد ايضا .....
__________________ إميل سعودي مجاني htaccess بكل بساطة الشفرة الموحدة "يونِكود" (إن من مفاسد هذه الحضارة أنها تسمي الاحتيال ذكاءً، والانحلال حرية، و"الرذيلة فناً" والاستغلال معونة) - مصطفى السباعي | |||||
|
| |||||
| اقتباس:
 بصراحة كود مفيد فعلا لكن هل ممكن ازيل الزر ا"حول " اريده يعمل بدون ان اضغط على اي زر | |||||
|
| |||||
| اقتباس:
 مشكور اخوي والله ما قصرت اشتغل تمام التمام الله يسعدك وانا محظوظ فعلا باطلاعي واستفادتي من الخبراء امثالك تقبل التحية | |||||
|
| |||||
|
اخوي hilaby كنت ناوي ما اسال اكثر بس يوم شفت توقيعك Ask and you feel stupid for 5 min, don't ask and be stupid for life قررت اني ما اتردد الان ملف AJAX.php يخرج لي معلومة واحدة فقط طيب لو كانت المخرجات اثنتين او اكثر كيف يمكن التعامل معها وماهي التعديلات المطلوب عملها في البرنامج ربما نحتاج هنا الى xml صح ؟ | |||||
|
| |||||
|
نعم .. الXML مطلوب في هذة الحالة .. الXML سيعطيك فرصة لفصل المعلومات عن بعضها .... انا اردت ان اوضح ذالك في الدرس الثاني .. بس مقدمة بسيطة مش رايح يظر شيء صح؟ ملفات الXML هو ملفات HTML ولكن يرتكز على تعريف المعلومات التي تحملها .. الHTML فقط تركز على تنسيق المحتوى .. الفرق ان الXML يستطيع ان يشرح و يعطي المعلومات اضافية للمحتوى .. هذا هو الشيء اللذي يجعل الXML تناسب احتياجات الAJAX المعقدة قليلا .. المفتاح هو في تغير الامر responseText الى responseXML الموجود في ملف الJavaScript الاختلاف ان الresponseText يعطيك الناتج كنص .. وال responseXML يعطيك الناتج ككائن "Object" اي انك تستطيع التعامل معة مثل ما تتعامل مع المصفوفات في الPHP ملاحظة للتعامل مع الXML بسهولة ... تاكد ان ملفك الXML خالي من الاخطاء | |||||
|
| |||||
| اقتباس:
بارك الله في وقتك وجهدك يا بطل بصراحة درس ولا كل الدروس | |||||
|
| |||||
|
ممتاز اخى بارك الله فيك
__________________ اقم صلاتك قبل مماتك اقم صلاتك تنعم بحياتك صلى قبل ان يصلى عليك - لا حول ولا قوه الا بالله 0124686663 & 0114686663 خدمات الشبكات اللاسلكية | |||||
|
| |||||
|
جزاك الله الف خير على هالدرس الرائع والمطلوب بشدة بوركت  بما اني لا افقه شيئ بالبرمجة وقرأة بالايام السابقة عن تقنية اجاكس وكان لدي تسائل عن مضار تقنية اجاكس طبعاً اجاكس بشكل عام هي مفيدة جداً للمواقع الكبيرة والتقليل من اللود والضغط على القواعد طيب نأتي الا المشاكل لو فرضنا ان تقنية اجاكس مطبقة على محرك البحث في المنتدى هنا عند البحث لن يتغير الرابط بالاعلى وهنا يسبب مشكلة لو وددت ان تنسخ الرابط لموضوع ما او لصديق وايضاً لن يكون هناك back الرجوع للخلف تقريباً هذي مشكلة الاجاكس الوحيدة السؤال : هل يوجد حل للمشكلة هذي ؟ ومع اطيب واجمل التحايا لك ولمجهودك الطيب ولموضوعك الرائع
__________________ من الحكمة أن تكون حكيم :) سبحان الله و بحمده سبحان الله العظيم لآ إله إلآ إنت سبحانك إني كنت من الظالمين = موقع عز العاب العبي - للبنات فقط games for girls | |||||
|
| |||||
|
"دليل عز" انت شكلك كذّاب! الظاهر انك فاهم في البرمجة ولا تكذب علي! لانك تطرقت على موضوع حساس في الAJAX نعم للاجاكس مشاكل ... اولا مثل ما قلت المشكلة في الرابط .. لانه لن يغير شيء في شريط العنوان .. ولكن حلها سهل ... اذا ذهبت الى الموقع www.live.com لميكروسوفت ستجد انهم حلوا المشكلة بطريقة سهلة جداً .. وهي عدم وضع الامر ;return false في الرابط وذالك لكي يظهر تغير بسيط في شريط العنوان .. بوضع علامة ال# ثم علامة الاستفهام ? ثم المتغيرات .. مثال بعد الكبس على زر او رابط معين .. وذالك للبحث عن شيء ربما البحث مثلا على الكلمة AJAX سيكون شريط العنوان كالتالي www.mysite.com#?Search=AJAX وبالمناسبة الJavaScript يمكنة ان يقرء شريط العنوان .. فمن ذالك الفكرة ممكن عمل التالي اخذ شريط العنوان كنص Text ثم بحذف العلامة # و ارسال الناتج الى السرفر ... الطريقة سهلة صح؟ النقطة الثانية اللذي هي ان الزر الBACK لا يعمل ... حلها شوي معقد .. لان المتصفحات لا تتعامل مع الزر الBACK بنفس الطريقة الذي يستخدمة متصفح اخر .... و حلها في الاكبلورار 6 بطريقة الFRAMES و حلها في معضم المتصفحات الاخرى بوجود صفحة ثانية تحفظ مكان الBACK ولكن اكثر الحلول شيوعاً وهي ان الJavaScrip يقراء شريط العنوان لاكثر من 10 مرات في الثانية .. اي نعم انها سيائكل كثيراً من قوة المعالج ولكن هناك حلول كثيرة .. ولكن كل حل له عيوبة .. وانت تستخدم ما يناسب موقعك .. والسلام عليكم .. وشكراً اخي للتطرق في هذا الموضوع .. | |||||
|
| |||||
|
جميل جدا اخي ، بارك الله فيك .. طيب لدي سؤال وربما تتطور لأكثر من سؤال كيف نتعامل مع form و ajax ؟؟ كيف ارسل القيم بالـ POST أو GET .. لاكثر من حقل ... كيف يمكن ان اتحكم بالتغذية الراجعه ( المستعلم عنها في ملف php ) .. اذا كانت اكثر وصراحة نقطة الاخ دليل عز ممتازة جدا وماشاء الله عليك كنت متجهز ياليت لو تضح لنا الامر بالمثال وكذلك الردود على مشاركتي بارك الله فيك وماقصرت
__________________ بي اتش بي العرب : php-ar.com دروس PHP خاص : phpfaq.php-ar.com new site : www.naifphp.net/web | |||||
|
| |||||
|
جريح: والله شكلك .. مستعجل على الدرس الثاني ... طيب ... خليني اكمل الدرس اذاً تتذكر لما قلت في الدرس "لا تقلق من شئن الnull الان ... هذا في الجزء الثاني من الدرس" .. من هناك ترسل المعلومات ... اي ان المفتاح هو في تغذية الدالة بمتغيرات المطلوبة فبدلا من ان تضع الامر "null" اي فراغ ... تضع المتغيرات هناك ... مثال ('Answer.send('topic=AJAX&Post=22 فبذالك الدالة انت قد ارسلت المتغيرات للملف المطلوب "في الدرس كانت الملف Ajax.php" ولكن المشكلة .. كيف يتم ذالك !!!! تتذكر اني قلت شيء عن الAjavaScript يريد ان يعرف اين هي المعلومات؟ اي يريد ان يعرف مكان وجود النص المطلوب نقلة او استبدالة ... والحل بواسطة الID .... فتخيل ان لديك مكان لوضع النص وهي <"input type="text" value="" id="username> لاحظ اني وضعت ID خاص بة وهي username .. وذالك سيسهل عملية التحديد للJavaScript ... ولفعل ذالك يتم العملية بواسطة الكود التالي .. "كود يظاف الى كود الJavaScript" var username = document.getElementById('username').value لاحظ استخدامي للامر نفسة getElementByID ومعناها "اعطيني الحاوية التي تمتلك الID الفلاني" .. ومن ثم حفظة في متغير في الJavaScript اسمة username لكي يستخدم في الارسال وشكراً | |||||
|
| |||||
|
بارك الله فيك اخي جميل جداً .. مااشاء الله عليك .. طيب سؤال يتعلق بماكتبت .. انت ذكرت هنا ('Answer.send('topic=AJAX&Post=22 بدل null ... لكن كيف اوصل له القيم ؟؟!! يعني ربما الـ Post تكون متغيره اليس كذلك ... طلب : ياليت تعمل مثال كما عملته باول المشاركة وجزاك الله الف خير
__________________ بي اتش بي العرب : php-ar.com دروس PHP خاص : phpfaq.php-ar.com new site : www.naifphp.net/web | |||||
|
| |||||
|
باذن الله ، وبارك الله فيك اخوي hilaby .. الحين وانا اكتب الرد 11:49 طبعا مساء .. بانتظارك ، وبارك الله فيك وبجهودك
__________________ بي اتش بي العرب : php-ar.com دروس PHP خاص : phpfaq.php-ar.com new site : www.naifphp.net/web | |||||
|
| |||||
|
hilaby ماشاء الله عليك والله قليلا ما اركز فى درس واتبعه كدا إلى الأمام يابطل وانا منتظر الرد على الأخ نايف فى نقاطه اللى طرحها لإنى ايضا محتاجها ( أسجل إعجابى بطريقه شرحك )
__________________ Romida - Private Vision http://www.romida-eg.com شركة روميدا للبرمجيات وخدمات التصميم | |||||
|
|
| |
| |
| أدوات الموضوع | |
| |
