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

الموضوع: التحميل المرحلي لمحتوى الصفحات

  1. #1

    التحميل المرحلي لمحتوى الصفحات



    بسم الله الرحمن الرحيم
    السلام عليكم ورحمة الله وبركاته

    اليوم نتناول في موضوعنا لشيئ غير اعتيادي لدى السواد الاعظم منا - الا و هو التحميل المرحلي لمحتوى الصفحات

    في الحقيقة فكرت كثيرا في اختيار العنوان المناسب لموضوعنا الفريد من نوعه على الاقل عربيا - لما له من اهمية قصوى لمجال تطبيقات الويب الحديثة منها - الا و هي آلية لتسريع تحميل صفحات النت و من هنا جائتني فكرة هذا الموضوع

    ماذا تعني التحميل المرحلي لمحتوى الصفحات ؟

    التحميل المرحلي لمحتوى الصفحات : هي آلية برمجية تقوم بتحميل محتوى الصفحة على شكل دفعات - كلما انتهى الجزء الاول من التحميل يستدعي الجزء الموالي له و هكذا ... يعني نهاية الجزء الاول هي بداية الجزء الثاني ووووو .....

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

    - لنفترض لدينا سكريبت ادارة محتوى - و في الغالب يعرض في رئيسيته العديد من بلوكاته و ابوابه : مثلا يعرض فيه جديد المقالات و جديد الدروس و جديد المواد الصوتية و جديد الفلاشات و القوائم الرئيسية وووووو الكثير من المحتوى المفروض عرضه خلالها .

    هل تصورتم معي كم حجم ذالك المحتوى و كم هو منهك و مجهد في التحميل و المعالجة ؟ و يتضح ذالك من خلال بطئ في تحميل الصفحات - فيلجئ المبرمج او صاحب السكريبت بالتضحية بالكثير من الشيئ - المحتوى - الذي كان يرغب بعرضه في رئيسية موقعه .

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

    سنمر اولا لمثال للعملية :

    من المثال يتضح لدينا كيفية تنفيذ عملية التحميل المرحلي لمحتوى الصفحة حيث في الاول تم تحميل الهيدر بالكامل و انتقل التحميل للقائمة على اليمين و تم تحميلها بالكامل و اخيرا تم تحميل المحتوى الوسطي

    اليست العملية جد مريحة لسيرفر و خفيفة التصفح و عرض المحتوى ؟

    لتنفيذ تلك الفكرة المبهرة نتبع الشرح التالي :

    دائما و ابدا في الاول يلزمنا تضمين ملف مكتبة الجي كواري ضمن صفحتنا بهذا الكود :
    كود PHP:
    <script type="text/javascript" src="jquery.min.js"></script> 
    ثانيا نضيف الكود التالي :
    كود PHP:
    <script type="text/javascript">
    $(
    document).ready(function(){
    header();
    function 
    header() {
        $.
    ajax({
        
    type"POST",
        
    url"header.php",
        
    data"" ,
        
    beforeSend: function() { $("div#header").html('<center><img src="loader.gif" width="30" height="30" alt="Loading" /><span>... تحميل</span></center>') },
        
    cachefalse,
        
    success: function(data){
        $(
    "#header").html(data) + menu();
        }
        });
    }
    function 
    menu() {
        $.
    ajax({
        
    type"POST",
        
    url"menu.php",
        
    data"" ,
        
    beforeSend: function() { $("div#menu").html('<center><img src="loader.gif" width="30" height="30" alt="Loading" /><span>... تحميل</span></center>'); },
        
    cachefalse,
        
    success: function(data){
        $(
    "#menu").html(data) + content();
        }
        });
    }
    function 
    content() {
        $.
    ajax({
        
    type"POST",
        
    url"content.php",
        
    data"" ,
        
    beforeSend: function() { $("div#content").html('<center><img src="loader.gif" width="30" height="30" alt="Loading" /><span>... تحميل</span></center>'); },
        
    cachefalse,
        
    success: function(data){
        $(
    "#content").html(data);
        }
        });
    }

    });
    </script> 
    لنشرح ما جاء فيه :

    1 : اعلنا عن انشاء دالة جي كواري ذاتية التنفيذ بهذا السطر

    كود PHP:
    $(document).ready(function(){ 
    2 : حددنا من اين يبدأ تحميل الصفحة و في مثالنا التحميل يبدا من الهيدر اي نستدعي دالة الهيدر هكذا :
    كود PHP:
    header(); 
    الان لنشرح ماذا احتوته الدالة header(); بشيئ من التفصيل :

    type: "POST" : اخترنا نوع الارسال - يمكن تعديله الى GET
    url: "header.php" : حددنا الصفحة التي فيها محتوى الهيدر
    $("#header").html(data) + menu(); : مربط الفرس :
    اولا - $("#header").html(data) : حددنا المنطقة التي سيعرض فيها الهيدر و وفقا لمثالنا المنطقة هي :
    كود PHP:
    <div id="header"></div
    ثانيا - + menu() : الدالة التي تنفذ بعد اكمال استدعاء التي قبلها و وفقا لمثالنا ايضا هي القائمة الجانبية

    و في
    كود PHP:
    function menu() {
        $.
    ajax({
        
    type"POST",
        
    url"menu.php",
        
    data"" ,
        
    beforeSend: function() { $("div#menu").html('<center><img src="loader.gif" width="30" height="30" alt="Loading" /><span>... تحميل</span></center>'); },
        
    cachefalse,
        
    success: function(data){
        $(
    "#menu").html(data) + content();
        }
        });

    غيرنا صفحة محتوى القائمة الجانبية
    كود PHP:
    url"menu.php" 
    و منطقة عرض القائمة
    كود PHP:
    $("#menu").html(data
    تعرض ضمن
    كود PHP:
    <div id="menu"></div
    و اخيرا
    كود PHP:
    content() 
    غيرنا الدالة الموالي استدعائها الا و هي دالة عرض المحتوى الوسطي
    كود PHP:
    content() 
    اخيرا اضفنا دالة المحتوى و الوسطي و غيرنا ما يجب تغييره كما سبقها:
    كود PHP:
    function content() {
        $.
    ajax({
        
    type"POST",
        
    url"content.php",
        
    data"" ,
        
    beforeSend: function() { $("div#content").html('<center><img src="loader.gif" width="30" height="30" alt="Loading" /><span>... تحميل</span></center>'); },
        
    cachefalse,
        
    success: function(data){
        $(
    "#content").html(data);
        }
        });

    لاحظوا اننا لم نستدعي دالة اخرى بعدها لاننا قسمنا صفحة المثال لثلاثة اجزاء فقط و بالتالي تم تحميلها على ثلاثة مراحل - و لاضافة مراحل اخرى نتبع نفس الاسلوب و الترتيب التتابعي لعرض المحتوى

    بعدها نغلق دالة الجي كواري الام :
    كود PHP:
    }

    }); 
    و لا ننسى ان نضيف مناطق عرض النتائج :
    كود PHP:
    <div id="header"></div>
    <
    div id="menu"></div>
    <
    div id="content"></div
    بهذه الحيلة البسيطة نجني فوائد كبيرة جدا و امكانية لادراج اكبر محتوى ممكن ضمن صفحاتنا
    ملاحظة : ممكن لا تصل لكم طريقة تنفيذ العملية من الوهلة الاولى و لاكن بمراجعة الموضوع بتمعن باذن الله تتضح الفكرة و الطريقة و اي اشكال باذن الله نحن موجودين فقط اضف تعليق على الموضوع و نتكفل بالرد

    نتمنى اننا قدمنا الشيئ المفيد لكم - ملتقانا باذن الله في موضوع آخر جديد و مفيد
    و السلام عليكم و رحمة الله و بركاته

    المصدر : المكتبة العربية لتطبيقات الاجاكس







  2. #2
    عضو فعال
    تاريخ التسجيل
    Dec 2008
    المشاركات
    1,897


    و عليكم السلام و رحمة الله و بركاته.
    جزاك الله خيراً محمد ، ردس رائع أقرأه على موقعك الآن





    __________________
    راسلني

  3. #3
    عضو فعال
    تاريخ التسجيل
    Jun 2008
    المشاركات
    1,600


    للوهلة الأولى ظننت الموضوع يتكلم عن ال lazy loading
    أي عدم تحميل إلا المحتويات الضرورية في الصفحة
    يعني إذا كان هناك صور في اسفل الصفحة ولم يصل لها الزائر لا يتم تحميلها
    http://www.appelsiini.net/projects/lazyload

    لكن موضوعك حلو ويعمل جيدًا عند استدعاء خدمات خارجية أو تنفيذ اكواد جافاسكربت
    لا نريد لها ان تبطئ من تحميل الصفحة.

    بارك الله فيك






  4. #4


    و عليكم السلام و رحمة الله و بركاته.
    جزاك الله خيراً محمد ، ردس رائع أقرأه على موقعك الآن
    آمين اجمعين و شاكر مرورك العطر اخي حمزة

    للوهلة الأولى ظننت الموضوع يتكلم عن ال lazy loading
    أي عدم تحميل إلا المحتويات الضرورية في الصفحة
    يعني إذا كان هناك صور في اسفل الصفحة ولم يصل لها الزائر لا يتم تحميلها
    http://www.appelsiini.net/projects/lazyload

    لكن موضوعك حلو ويعمل جيدًا عند استدعاء خدمات خارجية أو تنفيذ اكواد جافاسكربت
    لا نريد لها ان تبطئ من تحميل الصفحة.

    بارك الله فيك
    الاجمل مرورك العطر و شاكر جدا تعيقك






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


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

    موضوع جميل وفيد جدا ولكن لي استفسار

    كيف تقوم محركات البحث بأرشفة محتوي موقعي اذا قمت بتطبيق الفكرة علي موقعي, فأنا فتحت الSource للمثال الموجود بالموضوع ولا أثر للمحتوي فيه.
    أرجوا التوضيح لهذه النقطة

    تحياتي






  6. #6


    درس راائع بالفعل
    مع انى لا اعرف شىء فى jquery لكن وجدت ان الامر بسيط جدا
    لدى فقط استفسار
    ماذا اذا اردت جلب محتوى من نفس الصفحة اللى بستخدمها وليس من صفحة اخرى
    يعنى لدى فورم تسجيل دخول واريده ان لا يظهر مباشرة فماذا ستكون الطريقة ؟
    شكرا





    __________________
    - حسابى على فيسبوك --> هنا
    - لطلبات تعريب السكربتات والقوالب & التعديلات البرمجية ---> MtRp@live.com

  7. #7


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

    موضوع جميل وفيد جدا ولكن لي استفسار

    كيف تقوم محركات البحث بأرشفة محتوي موقعي اذا قمت بتطبيق الفكرة علي موقعي, فأنا فتحت الSource للمثال الموجود بالموضوع ولا أثر للمحتوي فيه.
    أرجوا التوضيح لهذه النقطة

    تحياتي
    بالنسبة للارشفة مع الاجاكس يلزمنا اتباع بعض الحيل و من بينها نتأكد من المتصفح على انه آلة ام بشري

    ان كان آلة - ربوت محركات البحث - نجلب امحتوى بدون استعمال الاجاكس و ان كان بشري نجلبه بها - العملية مبدئيا سهلة و وارد جدا استخدامها

    شاكر جدا ردك

    درس راائع بالفعل
    مع انى لا اعرف شىء فى jquery لكن وجدت ان الامر بسيط جدا
    لدى فقط استفسار
    ماذا اذا اردت جلب محتوى من نفس الصفحة اللى بستخدمها وليس من صفحة اخرى
    يعنى لدى فورم تسجيل دخول واريده ان لا يظهر مباشرة فماذا ستكون الطريقة ؟
    شكرا
    يمكنك اولا استعمال GET بدل POST و استدعاء المناطق وفقا لاكشن من نفس الصفحة










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

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  
اعلانات سوالف
0
أضف موقعك هنا | نسائم نيوز