سلسة دروس اجاكس

mr.smith · 08-09-2008, 01:35 AM

بسم الله الرحمن الرحيم

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

هذه الدروس هي ما يقوم الاخ ArbTool.Com بتعليمي وعرفانا مني لجميله وضعتها هنا لكل يدعو لي وله كل من استفاد من هذه الدروس

مايلزمنا في الدروس

:
1- سيرفر اباتشي
2-نوت باد
3 -عزيمة على المواصلة

خلصو

الدرس الاول :
نشئ مجلد لهذه الدورة
ولكل درس مجلد
الدرس

:
ننشئ ملف للاندكس
يحتوي على:

طبعا هنا الموضوع

شارح نفسه بنفسه ننتقل للخطوات التالية

ورح نحط هذا الفنكش بالهيد

كود PHP:

  ,<script>function createxmlhRequest()

{

    var req;

    if(window.XMLHttpRequest)

    {

        req = new XMLHttpRequest();

    }

    else if(window.ActiveXObject)

    {

        req = new ActiveXObject("Microsoft.XMLHTTP");

    }

    else

    {

        alert('Error Browser ..');

    }

    return req;

}

function Send_Request_Call_Ajax_Now(div_ajax_name,Ajax_values,php_file_name)

{

    var httpCallAjaxNow = createxmlhRequest();

    var ajaxsearch = document.getElementById(div_ajax_name) ;

 
    ajaxsearch.innerHTML = "<br>جاري طلب البيانات<br>" ;

    

    httpCallAjaxNow.open('post',php_file_name);

    httpCallAjaxNow.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    httpCallAjaxNow.setRequestHeader("Content-length", Ajax_values.length);

    httpCallAjaxNow.setRequestHeader("Connection", "close");

    httpCallAjaxNow.onreadystatechange = function ()

                                         {

                                             if (httpCallAjaxNow.readyState == 4)

                                             {

                                                 if (httpCallAjaxNow.status == 200)

                                                 {

                                                     var response = httpCallAjaxNow.responseText;

                                                     if(response)

                                                     {

                                                         ajaxsearch.innerHTML = response ;

                                                     }

                                                 }

                                             }

                                         }

                                         httpCallAjaxNow.send(Ajax_values);

}

</script>

الفكشن هذا عمل الاستاذ عرب تول ووظيفته انه يقوم بالاستعلام وجلب البيانات من دون ترك الصفحة

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

يتبع... العشاء

mr.smith · 02:02 AM

والان يسأل سأل (((امووت واعرفه

)))
نعدل الكود الكود الزر:

كود PHP:

  <input type="button" value="اطلب البيانات" name="getdata" id="getdata" 

    onclick="Send_Request_Call_Ajax_Now('results','msg=1','getmsg.php');">

الشرح:
onclick امر جافا سكربت بالتنفيذ عند النقر
Send_Request_Call_Ajax_Now('results','msg=1','getmsg.php'); فنكشن ارب تول وتفصيله

قيمة 'results'
اي دي div للنتيجة

كود PHP:

  <div id='results'>...</div>

والامر واضح

msg متغيير نقوم بانشاءه في صفحة المعالجة (((زي قيمة البوست))

'getmsg.php' قيمة توضح صفحة المعالجة

وين صفحة المعالجة هذا ما ستعرفونه بالمشاركة التالية لان التلفون يرن((مقطع كبودكم))

mr.smith · 08-09-2008, 01:58 AM

:sالمهم

كود الصفحة الاولى النهائي

كود PHP:

  <?php

 
/**

 * @author arbtool

 *@galaxy-master.net

 * @copyright 2008

 */

 
?>

<html dir="rtl">

 
<head>

<script>

function createxmlhRequest()

{

    var req;

    if(window.XMLHttpRequest)

    {

        req = new XMLHttpRequest();

    }

    else if(window.ActiveXObject)

    {

        req = new ActiveXObject("Microsoft.XMLHTTP");

    }

    else

    {

        alert('Error Browser ..');

    }

    return req;

}

function Send_Request_Call_Ajax_Now(div_ajax_name,Ajax_values,php_file_name)

{

    var httpCallAjaxNow = createxmlhRequest();

    var ajaxsearch = document.getElementById(div_ajax_name) ;

 
    ajaxsearch.innerHTML = "<br>جاري طلب البيانات<br>" ;

    

    httpCallAjaxNow.open('post',php_file_name);

    httpCallAjaxNow.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    httpCallAjaxNow.setRequestHeader("Content-length", Ajax_values.length);

    httpCallAjaxNow.setRequestHeader("Connection", "close");

    httpCallAjaxNow.onreadystatechange = function ()

                                         {

                                             if (httpCallAjaxNow.readyState == 4)

                                             {

                                                 if (httpCallAjaxNow.status == 200)

                                                 {

                                                     var response = httpCallAjaxNow.responseText;

                                                     if(response)

                                                     {

                                                         ajaxsearch.innerHTML = response ;

                                                     }

                                                 }

                                             }

                                         }

                                         httpCallAjaxNow.send(Ajax_values);

}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>درس الاجاكس</title>

</head>

 
<body>

 
    <!-- الحدث المستخدم لطلب البيانات -->

    <input type="button" value="اطلب البيانات" name="getdata" id="getdata" 

    onclick="Send_Request_Call_Ajax_Now('results','msg=1','getmsg.php');">

    

    <!-- هنا سيتم  وضع النتائج المستقبلة -->

    <div id='results'>...</div>

 
</body>

 
</html>

تأكد وأي سؤال انا حاضر

طيب صفحة المعالجة

كود PHP:

  <?php

 
/**

 * @author arbtool

 * @copyright 2008

 */

 
echo 'رقم الرسالة : ' . $_POST['msg'] ;

 
?>

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

))

بالمرفقات كوود الصفحتين الاصلي لمن اراد

الأزهر · 08-09-2008, 05:12 AM

ما شاء الله شكراً لك على هذا المجهود الطيب ،،،

ابوطارق · 08-09-2008, 11:00 AM

ما شاء الله

وين هالدروس الجميلة

برجاء التركيز في هذه الدروس لان الاجاكس جميل جدا

وانا ابحث عن تعليم عربي له

شاعر_الظلام · 08-09-2008, 01:29 PM

الله يعطيك العافيه خيو ^_^

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
[دروس] سلسة اساسيات Javascript	Bruce	ويب 2.0 و البرمجية القياسية Ajax +XML+ CSS+ JavaScript وغيرها	5	03-05-2008 12:18 PM
حصريا سلسة دروس فى المجموعات البريدية ( القروبات )	PHP Emperor	تطوير الويب	19	15-09-2006 02:15 PM
سلسة دروس مغترب في لغة البي اتش بي وقواعد البيانات	mkman	تطوير الويب	1	18-12-2002 01:36 PM
سلسة دروس بناء موقع تجاري كامل ب php	الفارس22	تطوير الويب	3	17-08-2002 09:33 AM
سلسة دروس طريقك إلى احتراف مجلة البورتال	egycoins	تطوير الويب	1	22-07-2002 02:55 PM

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق