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

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

ما شاء الله

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

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

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

M. Al-Dhafeeri · 08-09-2008, 01:29 PM

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