بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اليوم نتناول في موضوعنا لشيئ غير اعتيادي لدى السواد الاعظم منا - الا و هو التحميل المرحلي لمحتوى الصفحات
في الحقيقة فكرت كثيرا في اختيار العنوان المناسب لموضوعنا الفريد من نوعه على الاقل عربيا - لما له من اهمية قصوى لمجال تطبيقات الويب الحديثة منها - الا و هي آلية لتسريع تحميل صفحات النت و من هنا جائتني فكرة هذا الموضوع
ماذا تعني التحميل المرحلي لمحتوى الصفحات ؟
التحميل المرحلي لمحتوى الصفحات : هي آلية برمجية تقوم بتحميل محتوى الصفحة على شكل دفعات - كلما انتهى الجزء الاول من التحميل يستدعي الجزء الموالي له و هكذا ... يعني نهاية الجزء الاول هي بداية الجزء الثاني ووووو .....
هذه الطريقة مفيدة ايما فائدة حيث تسرع تحميل الصفحة بشكل كبير جدا جدا مما يسمح لنا بدمج الكم الذي نريده و باي صيغة في اي صفحة من صفحات تطبيقاتنا
- لنفترض لدينا سكريبت ادارة محتوى - و في الغالب يعرض في رئيسيته العديد من بلوكاته و ابوابه : مثلا يعرض فيه جديد المقالات و جديد الدروس و جديد المواد الصوتية و جديد الفلاشات و القوائم الرئيسية وووووو الكثير من المحتوى المفروض عرضه خلالها .
هل تصورتم معي كم حجم ذالك المحتوى و كم هو منهك و مجهد في التحميل و المعالجة ؟ و يتضح ذالك من خلال بطئ في تحميل الصفحات - فيلجئ المبرمج او صاحب السكريبت بالتضحية بالكثير من الشيئ - المحتوى - الذي كان يرغب بعرضه في رئيسية موقعه .
و لاكن باستخدام درسنا هذا يمكن لنا اضافة ما نريد و كيفما نريد لاي صفحة كانت شرط المتابعة و المراجعة الدقيقة لموضوعنا
سنمر اولا لمثال للعملية :
من المثال يتضح لدينا كيفية تنفيذ عملية التحميل المرحلي لمحتوى الصفحة حيث في الاول تم تحميل الهيدر بالكامل و انتقل التحميل للقائمة على اليمين و تم تحميلها بالكامل و اخيرا تم تحميل المحتوى الوسطي
اليست العملية جد مريحة لسيرفر و خفيفة التصفح و عرض المحتوى ؟
لتنفيذ تلك الفكرة المبهرة نتبع الشرح التالي :
دائما و ابدا في الاول يلزمنا تضمين ملف مكتبة الجي كواري ضمن صفحتنا بهذا الكود :
كود 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>') },
cache: false,
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>'); },
cache: false,
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>'); },
cache: false,
success: function(data){
$("#content").html(data);
}
});
}
});
</script>
لنشرح ما جاء فيه :
1 : اعلنا عن انشاء دالة جي كواري ذاتية التنفيذ بهذا السطر
كود PHP:
$(document).ready(function(){
2 : حددنا من اين يبدأ تحميل الصفحة و في مثالنا التحميل يبدا من الهيدر اي نستدعي دالة الهيدر هكذا :
الان لنشرح ماذا احتوته الدالة 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>'); },
cache: false,
success: function(data){
$("#menu").html(data) + content();
}
});
}
غيرنا صفحة محتوى القائمة الجانبية
و منطقة عرض القائمة
كود PHP:
$("#menu").html(data)
تعرض ضمن
كود PHP:
<div id="menu"></div>
و اخيرا
غيرنا الدالة الموالي استدعائها الا و هي دالة عرض المحتوى الوسطي
اخيرا اضفنا دالة المحتوى و الوسطي و غيرنا ما يجب تغييره كما سبقها:
كود 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>'); },
cache: false,
success: function(data){
$("#content").html(data);
}
});
}
لاحظوا اننا لم نستدعي دالة اخرى بعدها لاننا قسمنا صفحة المثال لثلاثة اجزاء فقط و بالتالي تم تحميلها على ثلاثة مراحل - و لاضافة مراحل اخرى نتبع نفس الاسلوب و الترتيب التتابعي لعرض المحتوى
بعدها نغلق دالة الجي كواري الام :
و لا ننسى ان نضيف مناطق عرض النتائج :
كود PHP:
<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
بهذه الحيلة البسيطة نجني فوائد كبيرة جدا و امكانية لادراج اكبر محتوى ممكن ضمن صفحاتنا
ملاحظة : ممكن لا تصل لكم طريقة تنفيذ العملية من الوهلة الاولى و لاكن بمراجعة الموضوع بتمعن باذن الله تتضح الفكرة و الطريقة و اي اشكال باذن الله نحن موجودين فقط اضف تعليق على الموضوع و نتكفل بالرد
نتمنى اننا قدمنا الشيئ المفيد لكم - ملتقانا باذن الله في موضوع آخر جديد و مفيد
و السلام عليكم و رحمة الله و بركاته
المصدر : المكتبة العربية لتطبيقات الاجاكس