النتائج 1 إلى 9 من 9

الموضوع: [طريقة مختلفة] AJAX بدون XmlHttpRequest

  1. #1

    [طريقة مختلفة] AJAX بدون XmlHttpRequest



    بسم الله الرحمن الرحيم
    مقدمة
    كثر في الآونه الأخيرة الحديث عن تقنية AJAX التفاعلية. حيث تعد تقنية AJAX واحدة من أهم المعالم التقنية للويب 2 أو الجيل الجديد من مواقع الويب.
    تعمل AJAX على جلب و تحديث البيانات في صفحة إنترنت دون إعادة تحميل الصفحة بشكل كامل وهذا ما يجعل تطبيقات AJAX تفاعليه للغاية مثل تطبيقات سطح المكتب.
    عادة ما تعتمد تطبيقات AJAX على كائن برمجي متوفر في معظم متصفحات الإنترنت الحديثة وهو تصنيف XmlHttpRequestويتم تخليق كائن من هذا التصنيف و هو يتولى عملية جلب و تحديث البيانات من الخادم ولكن هذا التصنيف مبني بطرق متباينة في متصفحات الإنترنت المختلفة وأسوئها هو متصفح إنترنت إكسبلورر حيث تم بناء التصنيف كـActiveX control مما قد يؤدي إلى ظهور رسالة تحذيرية من مخاطر الـActiveX

    خطوات العمل
    نبدأ أولا بملف php الذي يلعب دور المحرك حيث يمكنك برمجة كل ما يحلو لك حتى الإتصال بقاعدة بيانات و جلب المعلومات منها في هذا الملف. في هذا المثال سوف نجعل الـphp تطبع رسالة مكررة 33 مرة بإستخدام حلقة تكرارية بسيطة.
    سوف نسمي الملف MyCutePage.php لاحظ أننا سوف نستخدمه لاحقاً.
    كود PHP:
    <?php
    header
    ("Cache-Control: no-cache, must-revalidate");
    header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); 
    header("Content-Type: text/html;charset=windows-1256");

            
    $html="الله أكبر";
        
    for(
    $i=0;$i<33;$i++)
       
    $html.= "<br><b>سبحان الله</b>";
    ?>
    div = document.getElementById('MySweetDiv');
    div.innerHTML = '<?php echo $html?>';
    في المثال السابق قمنا بتعريف متغير نصي يحوي عبارة الله أكبر ثم إستخدمنا الحلقة لكتابة عبارة سبحان الله 33 مرة في 33 سطر منفصل ثم بعد ذلك سنكتب محتوى هذا المتغير في DIV والتي لها المعرف MySweetDiv

    الملف السابق لا يتم تحميله عند تحميل الصفحة الرئيسية خاصتك بينما يتم تحميله في حالة تنفيذ حدث ما و لذلك فإننا لن ندرجه من البداية في صفحتك بل عند تنفيذ حدث ما سنقوم بإنشاء وسوم أو Tag الإدراج بشكل ديناميكي
    كلنا نعرف وسوم إدراج JavaScript

    كود PHP:
    <script type="text/javascript" src="MyJavaScript.js"></script> 
    لكننا لن ندرج ملف الـ JavaScript بشكل مباشر منذ بداية تحميل الصفحة بل عند تنفيذ حدث ما و لهذا نحتاج لإنشاء الكود السابق بشكل ديناميكي
    الملف التالي سوف نسميه Ajax.js وهو الذي سننفذ فيه الحركة السابقة

    كود PHP:
    url document.location.href;
    xend url.lastIndexOf("/") + 1;
    var 
    base url.substring(0xend); 
    function 
    ajax_do (url) {
            if (
    url.substring(04) != 'http') {
                    
    url base url;
                }
            var 
    jsel document.createElement('SCRIPT');
            
    jsel.type 'text/javascript';
            
    jsel.src url;
            
    document.body.appendChild (jsel);} 
    أولا نستدعي عنوان المجلد الذي يحوى الصفحة و نضعه في المتغير url
    ثانيا نحسب طول العنوان (عدد الحروف) من بداية العنوان و حتى أخر علامة "/" وذلك لإستبعاد إسم الملف من العنوان ثم نضع هذه القيمة في المتغير xend.
    للتوضيح أكثر نفرض لو أن الملف الذي نعمل به إسمه Me.js فعند تنفيذ الأمر
    url=document.location.href
    فإن المتغير url سيحتوي على شيء من هذا القبيل
    http://www.yoursite.com/yourdir/Me.js
    ولكننا نحتاج لأن يحتوي المتغير على ما يلي
    http://www.yoursite.com/yourdir/

    ثالثا سنقص من المتغير url الحروف من البداية و حتى القيمة التي يحويها xend ونضع النص الجديد في متغير أخر يدعى base
    الأن سنكتب الدالة التي تعتبر أساس المحاكاة للـ AJAX والتي تسمى ajax_do وتأخذ متغير واحد يسمى url والذي يمثل عنوان ملف PHP الذي يؤدي دور المحرك (MyCutePage.php) .
    الدالة تتحقق من العنوان المرسل إليها ما إذا كان كاملا مثل
    http://www.yoursite.com/yourdir/MyCutePage.php
    أو لا فإذا أرسلنا لها إسم الملف فقط فسوف تلحق به محتوى المتغير base حتى يكون العنوان كاملا
    ثم تقوم الدالة بتخليق عنصر جديد وهو وسوم إدراج JavaScript والذي يسمى SCRIPT
    وهو يقوم بإدراج الملف الذي أرسلنا إسمه للدالة وأخيرا تقوم الدالة بإلحاق هذا العنصر في نهاية صفحتك الرئيسية.

    الأن نكتب ملفك الرئيسي الذي يراه زوار موقعك

    كود PHP:
    <html dir="rtl">
    <
    head>
    <
    title>مثال تجريـــــبي</title>
    <
    script type="text/javascript" src="Ajax.js"></script>
    </head>
            <body>
                    <div id="MySweetDiv"></div>
            <input type="button" onclick="ajax_do ('MyCutePage.php');" value="إضغط هنا" />
            </body>
    </html> 
    ببساطة شديدة ندرج ملف الـ JavaScript ثم نضع عنصر من النوع div لإستقبال الرسالة و أخيرا زر لتنفيذ الحدث وهو مناداة الدالة ajax_do الموجودة في ملف الـ JavaScript وإرسال إسم ملف الـ PHP كمتغير للدالة.
    الخلاصة
    الطريقة التي عرضت لها ميزة واحدة فقط و هي أنها تسمح لك بجلب المعلومات من موقع أخر غير موقعك حيث أن هذا غير مسموح به في كائن XmlHttpRequest لكنها تعاني من مشكلة كبيرة و هي أن الطلب يجب أن يكون من نوع GET فقط و لا يمكن أن يكون من النوع POST

    كافة الملفات التي إستخدمتها موجودة بالمرفق

    أتمنى أن أكون قد وفقت في عرض الفكرة و منتظر ردودكم





    الملفات المرفقة الملفات المرفقة
    • نوع الملف: zip ajax.zip‏ (1.1 كيلوبايت, 271 مشاهدات)
    __________________
    Mohammed S. Makhlouf
    JJMAK


  2. #2
    عضو نشيط جدا
    تاريخ التسجيل
    Sep 2006
    المشاركات
    405


    جزاك الله خيرا علي هذا الشرح اخي






  3. #3


    مشكور أخوي على ردك





    __________________
    Mohammed S. Makhlouf
    JJMAK

  4. #4
    خبير JavaScript
    تاريخ التسجيل
    Jul 2002
    المشاركات
    2,920


    بارك الله فيك و هذه الطريقة نافعة جدا بالنسبة للمتصفحات التي لاتدعم تقنية أجاكس، غير ان أجاكس بيقى تفوق على هذه الطريقة بمراحل أولهما سرعة التطبيق وثانيا هي في التعمامل مع ملفات XML المستوردة، فهذه هي النقطة التي تتفوق بها تقنية أجاكس، بحيث تسمح لك بالتعامل و الوصول الى وسوم xml بطريقة قياسية
    غير ان طريقتك هذه تنفع كثيرا المبرمجين المحترفين خصوصا انها تعتمد على تقنية DOM
    شكرا لك مرة أخرى






  5. #5


    العفو أستاذنا زيزوار و لي الشرف إنك رديت على موضوعي





    __________________
    Mohammed S. Makhlouf
    JJMAK

  6. #6
    عضو نشيط
    تاريخ التسجيل
    May 2006
    المشاركات
    39


    شكرا اخى الكريم على كود
    وعلى فكرة الجميل فى هذه التقنية تسمح لك بالتعامل مع الملفات على انها javascript
    وهذه تساعدك على تطبيق واضافة واستدعاء الدوال فى الجافا اسكريبت بعكس الاجاكس فى حالة responseText
    شكرا لك مرة اخرى





    __________________
    NileSolutions.biz Creative Web Engineering
    Php,Perl,Xhtml,Javascript,Css C++

    http://astaza.com/
    http://uf3.com



  7. شكرا لك عزيزي بالتاكيد سيفيد كثيرا

    دمت بخير





    __________________
    كل مالا يعطى يضيع

  8. #8
    خبير JavaScript
    تاريخ التسجيل
    Jul 2002
    المشاركات
    2,920


    لكن الأجمل في هذه الطريقة انها تسمح لك بسحب ملف من سيرفر آخر عكس تقنية أجاكس التي لاتجلب الا من نفس السيرفر التي فيها صفحة أجاكس
    وهنا مثال
    http://www.wino.ws/js/includjs
    الصفحة موجودة على موقع wino.ws وسيجلب ملف من موقع آخر pcjahiz.com
    وهذه الطريقة غير ممكنة مع اجاكس






  9. #9
    عضو نشيط جدا
    تاريخ التسجيل
    Sep 2006
    المشاركات
    389


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





    __________________
    أرجوا من الجميع ان يسامحوني ، سواء عرفوني أو لم يعرفوني !! ، ارجوا من جميع من قد اكون اسأت اليهم أن يصفحوا عني ، ومن لديهم عندي حقوق أن يطلبوها مني .. جمعنا الله في الجنان .





ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

أضف موقعك هنا| اخبار السيارات | حراج | شقق للايجار في الكويت | بيوت للبيع في الكويت | دليل الكويت العقاري | مقروء | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض