| |||||||
| المدوّنات | البحث | مشاركات اليوم | اجعل كافة المشاركات مقروءة |
 |
| | LinkBack | أدوات الموضوع |
| |||||
| (أول درس في القسم) مقدمة في الأجاكس والXMLHttpRequest أولاً: مبروك لنا جميعاً الأقسام الجديدة في سوالف سوفت وهذا القسم الرائع.. وأحب أن أبدأ بأول درس في هذا القسم نقلاً عن مجتمع مطوري المواقع DevPedia ------------------------------------------------------- الأجاكس تقنية جديدة والتي أخذت الويب إلى مرحلة جديدة كليا والتي تسمى في الوقت الحالي بالويب 2.0، فما هي الأجاكس؟ الأجاكس AJAX وهي بالعادة تكتب كاملة بالحروف اللاتينية الكبيرة لانها تعتبر اختصار لكلمة (Asynchronous java script And XML). والأجاكس كانت موجودة من زمان ولكن لم يعرف أحد أهميتها أو كيفية استخدامها بالشكل الصحيح حتى قامت شركة Google بتوظيفها في برامجها الجديدة كالGmail وGoogle maps، وتتيح الأجاكس لمطوري الويب بإضافة حيوية وديناميكية للموقع كإضافة معلومات حية كأسعار البورصة من دون الحاجة لإعادة تحميل الصفحات كلما أراد المستخدم أن يطلب معلومة من الServer-Side أوعن طريق الخادم، فلغات برمجة الويب تنقسم إلى قسمان Client-Side وهي كالجافاسكربت والvb سكربت وقسم يسمى بالServer-Side وهي كالphp و الasp، و تقنية الأجاكس في الأساس هي استخدام للغة الجافاسكربت وهي لغة Client-Side لطلب أي معلومة موجودة على الServer-Side من دون الحاجة لطلب كامل الصفحة. وهناك اعتقاد خاطئ عند بعض الناس أن الأجاكس هي لغة جديدة وصعبة ويجب تعلمها من الصفر، والصحيح أن الأجاكس هي تقنية تستخدم لغة الجافاسكربت بالكامل لطلب المعلومات، فإذا كنت تعرف القليل عن الجافاسكربت أو حتى إن لم تكن تعرف ولكن لديك خبرة في اللغات المشتقة من لغة الC كالphp فسيكون تعلم الجافاسكربت بالنسبة لك شيء سهل وبسيط جدا وسأحاول بإذن الله شرح هذه التقنية الجميلة بسهولة بحيث أنك تتقنها في عند انتهاءك من قراءة هذا الدرس. ستجد تحت الكود الكامل بالجافاسكربت لعمل بسيط بالأجاكس والXMLHttpRequest وسأشرح كل جزء منه على حده. كود: function createRequestObject() {
var req;
if(window.XMLHttpRequest){
// لمتصفحات الفايرفروكس والأوبرا والسفاري
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
// للإنترنت اكسبلورر النسخة الخامسة فما فوق
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
// نستخدم دالة ال alert لكي نظهر حصول خطأ وغالبا يكون الخطأ لمستخدمي نسخ قديمة من المتصفحات
alert('حصل خطأ في طلب الصفحة...الرجاء المحاولة مرة أخرى وإذا لم تنفع جرب أن تنزل نسخة جديدة من المتصفح');
}
return req;
}
// نطلب الدالة createRequestObject() ونعطي الناتج للمتغير http
var http = createRequestObject();
function sendRequestGet(act) {
// نطلب صفحة ال php
http.open('get', 'myphpscript.php?act='+act, true);
// عندما ننتهي من طلب الصفحة نطلب دالة handleResponse
http.onreadystatechange = handleResponse;
// الانتهاء من الطلب
http.send(null);
}
function handleResponse() {
if(http.readyState == 4 && http.status == 200){
// نعطي المتغير response النص اللذي رجع من طلبنا لصفحة ال php
var response = http.responseText;
if(response) {
// نحدث محتوى ال div والتي اسمها ajaxTest
document.getElementById("ajaxTest").innerHTML = response;
}
}
} كود: function createRequestObject() {
var req;
if(window.XMLHttpRequest){
// لمتصفحات الفايرفروكس والأوبرا والسفاري
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
// للإنترنت اكسبلورر النسخة الخامسة فما فوق
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
// نستخدم دالة ال alert لكي نظهر حصول خطأ وغالبا يكون الخطأ لمستخدمي نسخ قديمة من المتصفحات
alert('حصل خطأ في طلب الصفحة...الرجاء المحاولة مرة أخرى وإذا لم تنفع جرب أن تنزل نسخة جديدة من المتصفح');
}
return req;
} إذا فشلت كل المحاولات اذا المتصفح إما يكون قديما أو أنه لايدعم الXMLHttpRequest، وفي آخر الدالة نرجع مايحتويه المتغير req. وبعد ذلك نعرف متغير جديد ونسميه http ونعطيه نسخه من الدالة createRequestObject وسيحتوي جميع الخصائص للXMLHttpRequest. كود: var http = createRequestObject(); طلب المعلومات باستخدام طريقة GET انتهينا من تعريف المتغير الجديد والذي سميناه http واعطيناه خصائص الXMLHttpRequest، الآن سنطلب المعلومات بطريقة GET من صفحة الphp: كود: function sendRequestGet(act) {
// نطلب صفحة ال php
http.open('get', 'myphpscript.php?act='+act, true);
// عندما ننتهي من طلب الصفحة نطلب دالة handleResponse
http.onreadystatechange = handleResponse;
// الانتهاء من الطلب
http.send(null);
} هنا ترى دالتان يجب عليك فهمها وهما من خصائص الXMLHttpRequest هما open() و send()، في أول سطر نطلب الصفحة باستخدام طريقة get وهي تكون أول متغير في الدالة open() وأول متغير يكون نوع طلب الصفحة كما سنرى في القسم التالي والمتغير الثاني في الدالة يكون الصفحة المطلوبة وفي حالتنا هذه نطلب صفحة اسمها myphpscript.php وتأخذ متغير اسمه act ومتغير act نأخذه بالجافاسكربت ونضعه عندما نطلب الصفحة. ولأننا نستخدم طريقة GET فهي تأخذ المتغيرات عن طريق شريط التصفح لذلك نطلب دالة send() ونعطيها الأمر null، ولكن طريقة POST لاتأخذ متغيراتها عن طريق شريط التصفح لذلك تتغير قليلا عندما نطلب المعلومات، أما المتغير الثالث للداله فهو لاستخدام الطلب الغير تزامني أو الasynchronous للأجاكس ونعطيه true، والسطر: كود: http.onreadystatechange = handleResponse; طلب المعلومات باستخدام طريقة POST كود: function sendRequestPost(act) {
// نطلب صفحة ال php
http.open('post', 'myphpscript.php', true);
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// عندما ننتهي من طلب الصفحة نطلب دالة handleResponse
http.onreadystatechange = handleResponse;
// الانتهاء من الطلب
http.send('act='+act);
} كود: http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); اللمسات الأخيرة.. كود: function handleResponse() {
if(http.readyState == 4 && http.status == 200){
// نعطي المتغير response النص اللذي رجع من طلبنا لصفحة ال php
var response = http.responseText;
if(response) {
// نحدث محتوى ال div والتي اسمها ajaxTest
document.getElementById("ajaxTest").innerHTML = response;
}
}
} هناك 5 أنواع من حالات الأستعداد للXMLHttpRequest وللعلم أن الحالة الأخيرة هي الأهم بينهم 0: لم يتم البدء 1: بدء عملية الاتصال 2: تم استلام الطلب 3: جاري تحليل الطلب والرد عليه 4: تم الانتهاء أما http.status فكما تعرفون هناك حالات كثيرة عندما تطلب المعلومات ولعل من أشهرها حالة 404 وهي خطأ عدم وجود الصفحة على الخادم، أما 200 فأن الصفحة موجودة وتم استلامها بنجاح ولمعرفة الحالات المتنوعة عند طلب الصفحة الرجاء زيارة الرابط التالي: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html وعندما بتم التأكد من كل شيء بحالة سليمة نسمي متغير جديد باسم response ونعطيه http.responseText وهذا هو الرد من طلبنا لصفحة الphp أي أنه أي نص يتم طبعه على الصفحة عن الانتهاء من طلبها، ويجب التنويه هنا انه هناك نوعان من الردود، responseText و respon***ML ولكننا هنا نأخذ فقط النص الذي رجع إلينا من طلب صفحة الphp في السابق، وربما سأشرح كيفية التعامل مع الردود بالXML لاحقا. وبعد هذا وعندما يتم التأكد أن المتغير response يحمل نصا وليس فارغا يتم أخذ هذا النص ووضعه في الDiv التي اسمها ajaxTest. نهاية الدرس وقد حملت بعض الأمثلة لرؤية كيفية عمل الأجاكس وللإستفادة المطلقة من هذا الدرس المثال الأول: استخدام طريقة GET http://www.devpedia.org/articles/exa...s/demoGet.html المثال الثاني: استخدام طريقة POST http://www.devpedia.org/articles/exa.../demoPost.html وبهذا تم الانتهاء من أول درس في الأجاكس والXMLHttpRequest وأتمنى من الله أن أكون قد وفقت في هذا الدرس وتكونوا قد استفدتم منه. ------------------------------------------------------- :: كتبه Bo3oof :: المصدر: http://www.devpedia.org/articles/index.php?p=17 ====================== ومن أراد المناقشة فبإمكانه ذلك هنا أيضاً لأن كاتب المقال معنا في سوالف وبالتوفيق للجميع ومبروك عليكم القسم ومبروك عليكم رمضان الكريم المبدع العربي ^_^ | |||||
|
| |||||
|
شكراً أخى الكريم  وبإنتظار بقية السلسلة بإذن الله وكل عام وإنتا بخير 
__________________ Amr Elmogy www.shababvb.com www.shababvb.com/vb If you are not criticized , you may not be doing much. | |||||
|
| |||||
|
شاكرين لك اخى الكريم
__________________ شبكة البيت للتصميمات وبرمجة الاسكربتات الخاصة http://www.Elbayt.NeT الزواج - العقارات -الاخبار- مجلات خاصة - نيوك - منتديات - قروبات - مستعمل - الجوال - الوظائف - واى من الاسكربتات الخاصة | |||||
|
| |||||
|
مشكور اخوي
__________________ إميل سعودي مجاني htaccess بكل بساطة الشفرة الموحدة "يونِكود" (إن من مفاسد هذه الحضارة أنها تسمي الاحتيال ذكاءً، والانحلال حرية، و"الرذيلة فناً" والاستغلال معونة) - مصطفى السباعي | |||||
|
| |||||
|
جزاك الله خير ..
__________________ ██████████ ██████████ ██████████ مهارات سوفت مهارات سوفت للبرامج وتطوير المواقع والمنتديات والتبادل التجاري. للتواصل .. 00967733873335 باب الحارة .. للبيع ..!! | |||||
|
| |||||
|
الشكر موصول للجميع أعزائي الكرام، ومشاء الله ماتوقعت كل هذا الاطراء الجميل على الموضوع، وانه يتثبت ويكون من المواضيع المتميزه، الصراحه أذهلني وأعجبني ماقام به الأخوه هنا في سوالف، فالشكر الجزيل لكم وان شاء الله أكون عند حسن الظن في الدروس القادمة ومبروك علينا جميعا افتتاح الأقسام الجديدة ومبارك على أخونا زيزوار الإشراف على هذا القسم، ورمضان مبارك مع تحياتي
__________________ ------------------------ Moving with the web 2.0h era | |||||
|
| |||||
| اقتباس:
في الفايرفوكس: View -> Character Encoding -> Unicode وأعتقد في الاكسبلورر نفس الشيء، المشكلة الآن انا على اللينكس مع تحياتي
__________________ ------------------------ Moving with the web 2.0h era | |||||
|
| |||||
|
استاذي ابوعوف درسك رائع وسهل التطبيق ويعطي امكانيات ممتازة لكن عندي مشكلة في اللغة العربية سواء بترميز اليوني كود او الترميز العربي 1256 والعمل هنا : http://www.digitooth.com/ajax.php تحياتي
__________________ digitooth.com حدّد هدفك .. وسر خلفه .. وأبشر بالنجاح | |||||
|
| |||||
|
قرأت في أحد الكتب أن الأجاكس هي تلك اللغة التي تمكنك من تصميم برامج الويب كبرامج تطبيقات الحاسب الآلي ما مدى صحة هذا الأمر؟
__________________ سبحان الله وبحمده---سبحان الله العظيم برامج عربية: البوابة العربية المدونه العربيه MySmartBB | |||||
|
| |||||
| اقتباس:
كود بلغة HTML: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> اقتباس:
http://www.swalif.net/softs/showthread.php?t=173084 وايضا لدي تجربة شخصية في هذا المجال حيث أنني حاليا أقوم بتصميم صفحة بداية ويب عربية تعتمد بالكامل على الأجاكس والخلاصات، ويمكنك تجربتها في النسخة التجريبية على http://www.seamler.com
__________________ ------------------------ Moving with the web 2.0h era | |||||
|
| |||||
|
استاذي بوعوف حفظت الملف بصيغة unicode http://digitooth.com/ajax2.php فقد الملف تشغيل أوامر الـ php وفوق ذلك نفس المشكلة مع اللغة العربية مع الملاحظة ان الصفحة مافيها اي ميتا متعلق بالترميز
__________________ digitooth.com حدّد هدفك .. وسر خلفه .. وأبشر بالنجاح | |||||
|
| |||||
| اقتباس:
__________________ ------------------------ Moving with the web 2.0h era | |||||
|
| |||||
|
بارك الله فيك اخوي الصراحه درس روعه وابي اجربه وان شاء الله يضبط معاي انا جربت اكواد جاهزه للأجاكس ولكني حصلت اغلبها لاتعمل مع اللغه العربيه ,, لدي سؤال بسيط بالنسبه لهذا الموقع http://www.seamler.com/ مثلا اذا ضغط تسجيل جديد لما تسجيل يظهر لك بنفس الصفحة كلمة (( جاري التحقق)) ويسجل لك او يظهر لك رسالة خطأ ,,, هل ممكن ان تذكر لنا الفكره ببساطه هل من الممكن ان استخدم الكود المنزل ولكن بدل استخدم دالة لسويتش استخدم اوامر php بدالة if كانه برنامج php او لا .!! وفي امان الله
__________________ سبحان الله وبحمده سبحان الله العظيم | |||||
|
|
| |
| |
| أدوات الموضوع | |
| |
