درس بلوك صور عشوائية بواسطة أجاكس AJAX

**coder** · 02-06-2009, 10:37 PM

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

مقدمة
من أفضل مزايا استخدام تقنية أجاكس AJAX هي سرعة التحميل، تخيل معي انك تريد عمل عرض تلقائي لصور عشوائية من قاعدة البيانات، عدد الصور 20 صورة، كل صورة تستغرق 10 ثوان ثم يتلوها صورة أخرى وهكذا،
تخيل لو كان حجم كل صورة 50 كيلوبايت، يصبح الحجم الاجمالي 20 صورة * 50 كيلوبايت لكل صورة = 1 ميجابايت يتم تحميلها الى الجهاز عند فتح الصفحة.

1 ميجابايت تستغرق للتحميل الأزمان التالية:

على اتصال 256KB تستغرق 32 ثانية
على اتصال 512KB تستغرق 16 ثانية
على اتصال 1024KB تستغرق 8 ثوان

من المقارنة السابقة نجد أنها مشكلة كبيرة، حيث سينتظر الزائر اكثر من 30 ثانية في أغلب الأحوال حتى يتم تحميل بلوك الصور فقط

من هنا تأتي الحاجة الماسة الى استخدام أجاكس AJAX لجلب هذه الصور
مايحدث عند استخدام أجاكس AJAX أن الصورة يتم تحميلها وقت الحاجة اليها، ولا يتوقف اكتمال تحميل الصفحة على تحميل الصور جميعها.

إفتراضات

الصور عندي محفوظة في نظام الملفات مع حفظ رابط الصورة في جدول الصور.
بنية جدول الصور هي كالتالي:

كود:

 
CREATE TABLE `photo` ( 
`id` int(10) unsigned NOT NULL auto_increment,

`title` varchar(85) NOT NULL default '',
`url` varchar(255) NOT NULL,
PRIMARY KEY  (`id`)
) ENGINE=MyISAM;

البنية سهلة وواضحة، id حقل الترقيم الألي كذلك المفتاح المميز، title هو اسم الصورة، url وهو رابط الصورة.

ملف index.php يحتوي على الكثير من الأكواد لجلب باقي البلوكات بالصفحة، فقط ذكرنا هنا ما يخص بلوك الصور العشوائية

الكود

1- كود الملف index.php

كود PHP:

 
[RIGHT][RIGHT]<html>
<head>
<script language="javascript">
function jah_switch(url,target)
{

    if (document.getElementById(target).innerHTML != '')
    {
        document.getElementById(target).innerHTML = '';
    }
    else
    {

        jah(url,target);
    }

}
function Switch(url,target) {
    // native XMLHttpRequest object
        
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = function() {jahDone(target);};
        req.open("GET", url, true);
        req.send(null);
    // IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = function() {jahDone(target);};
            req.open("GET", url, true);
            req.send();
        }
    }
}    

function jahDone(target) {
    // only if req is "loaded"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
            results = req.responseText;
            document.getElementById(target).innerHTML = results;
        } else {
            document.getElementById(target).innerHTML="خطأ:\n" +
                req.statusText;
        }
    }
}
</script>
</head>
<body>
<?
// جلب ملف الاتصال لانشاء الاتصال بقاعدة البيانات
require('db_connect.php');
// طباعة div الذي سيحتوي على الصور
  echo '<div id="photo_show">';
// الاستعلام عن صورة من جدول الصور مع الترتيب عشوائيا
$get_phos = @mysql_query("SELECT `id`, `title`, `url` FROM `photo` ORDER BY RAND() LIMIT 1");
// جلب نتيجة الاستعلام، نتوقع نتيجة واحدة بناءا على طلبنا لذا لا داعي لحلقة التكرار
$phos = @mysql_fetch_array($get_phos);
// طباعة الصورة، مع استخدام اسمها لخاصية alt حتى يظهر عن مرور الماوس على الصورة
    echo '<img width="200" src="'.$phos['url'].'" alt="'.$phos['title'].'" />';
// اقفال الـ div الذي يحتوي على الصورة
echo '</div>';
// هنا الجزء الأهم من الكود، وهو انشاء تايمر يقوم بتنفيذ الكود Switch كل 10 ثواني (10 آلاف ملي ثانية)
echo "<script>setInterval('Switch(\'photo_show.php\', \'photo_show\');', 10000);</script>";
?>
</body>
</html>



 [/RIGHT][/RIGHT]

2- كود الملف photo_show.php (والذي سيتم استدعائه عن طريق AJAX لتغيير الصورة في البلوك)، الكود مطابق لكود الملف index.php تقريبا اذا لا داعي لشرحه

كود PHP:

 
[RIGHT][RIGHT]<?
require('db_connect.php');
$get_phos = @mysql_query("SELECT `id`, `title`, `url` FROM `photo` ORDER BY RAND() LIMIT 1");
while($phos = @mysql_fetch_array($get_phos))
{
    echo '<img width="200" src="'.$phos['url'].'" alt="'.$phos['title'].'" />';
}
?>



 [/RIGHT][/RIGHT]

هكذا نكون قد انتهينا من انشاء السكريبت

الكود كامل بالمرفقات

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

شكرا

**بلال كيالي** · 02-06-2009, 11:00 PM

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

ToMix · 02-06-2009, 11:21 PM

شكراً لك اخي العزيز على ها لطرح المميز .. بالفعل كلامك 100% في ما يخص وقت تحميل الصور.

الاحظ انك استخدمت الجدول لحفظ بيانات الصورة كـ ( عنوانها ، رابطها ..إلخ)

هل باستطاعتنا ان نقوم بتحديد مجلد للصور والسكريب ياخذ الصور الي بالمجلد تلقائياً ؟ يعني بدون ما نحفظ عناوين الصور بجدول ثم نقوم باستدعائها.

ارجو الإفادة.

**coder** · 07-06-2009, 04:56 PM

اقتباس:

الكاتب : ToMix

شكراً لك اخي العزيز على ها لطرح المميز .. بالفعل كلامك 100% في ما يخص وقت تحميل الصور.

الاحظ انك استخدمت الجدول لحفظ بيانات الصورة كـ ( عنوانها ، رابطها ..إلخ)

هل باستطاعتنا ان نقوم بتحديد مجلد للصور والسكريب ياخذ الصور الي بالمجلد تلقائياً ؟ يعني بدون ما نحفظ عناوين الصور بجدول ثم نقوم باستدعائها.

ارجو الإفادة.

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

emamn · 06-09-2009, 04:57 AM

طبقت الدرس ولكن للاسف عوضا عن يقوم بتغير الصورة في

كود PHP:

  echo "setInterval('Switch(\'photo_show.php\', \'photo_show\');', 10000);";

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

PHP_SMITTEN · 06-09-2009, 05:13 AM

اقتباس:

الكاتب : emamn

طبقت الدرس ولكن للاسف عوضا عن يقوم بتغير الصورة في

كود PHP:

  echo "setInterval('Switch(\'photo_show.php\', \'photo_show\');', 10000);";

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

هذا كود جافا سكربت

حاول عدم إستخدامه وسط أكواد php

أو إستخدمه بهذه الطريقة

كود هتمل:

 echo "<script type='text/javascript'>
 setInterval('Switch(\'photo_show.php\', \'photo_show\');', 10000);
 </script>
 ";

emamn · 06-09-2009, 06:25 AM

شكرا اخي هكذا اشتغل الكود بشكل تمام اللهم اسلك بكل اسملك ان ترزقه العلم والهداية والشفاء

**coder** · 06-09-2009, 06:56 PM

اقتباس:

الكاتب : emamn

طبقت الدرس ولكن للاسف عوضا عن يقوم بتغير الصورة في

كود PHP:

  echo "setInterval('Switch(\'photo_show.php\', \'photo_show\');', 10000);";

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

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

أستغرب جدا من أن أحدا لم يلفت انتباهي لهذا الخطأ من قبل

02-06-2009, 11:00 PM	#2 (permalink)
بلال كيالي مشرف تاريخ الانتساب: 10-04-2008 المكان: Dubai مشاركات: 1,600 مستوى السمعة : 3	رد : بلوك صور عشوائية بواسطة أجاكس AJAX يشرفني ان اكون اول من يضع رد سلمت يمناك عمل رائع جدا جدا __________________ سبحان الله وبحمده , سبحان الله العظيم http://forum.montadaphp.net/t7750/ الاتصال بقواعد البيانات للمشاهدة اون لاين لتحميل الملف ---------------------------------------------------------------------- شرح استقبال المتحولا بالـ POST للمشاهدة اون لاين لتحميل الملف ---------------------------------------------------------------------- اضافة البيانات لقاعدة البيانات للمشاهدة اون لاين لتحميل الملف ---------------------------------------------------------------------- عرض البيانات (اختبار) للمشاهدة اون لاين (جزئين) الاول الثاني لتحميل الملف (جزئين) الاول الثاني ---------------------------------------------------------------------- بناء تسجيل الدخول للوحة التحكم (الجزئ الاول) للمشاهدة اون لاين لتحميل الملف ----------------------------------------------------------------------

02-06-2009, 11:21 PM	#3 (permalink)
ToMix عضو جديد تاريخ الانتساب: 07-08-2008 مشاركات: 49 مستوى السمعة : 0	رد : بلوك صور عشوائية بواسطة أجاكس AJAX شكراً لك اخي العزيز على ها لطرح المميز .. بالفعل كلامك 100% في ما يخص وقت تحميل الصور. الاحظ انك استخدمت الجدول لحفظ بيانات الصورة كـ ( عنوانها ، رابطها ..إلخ) هل باستطاعتنا ان نقوم بتحديد مجلد للصور والسكريب ياخذ الصور الي بالمجلد تلقائياً ؟ يعني بدون ما نحفظ عناوين الصور بجدول ثم نقوم باستدعائها. ارجو الإفادة.

06-09-2009, 04:57 AM	#5 (permalink)
emamn عضو جديد تاريخ الانتساب: 28-08-2009 مشاركات: 7 مستوى السمعة : 0	رد : بلوك صور عشوائية بواسطة أجاكس AJAX طبقت الدرس ولكن للاسف عوضا عن يقوم بتغير الصورة في كود PHP: `echo "setInterval('Switch(\'photo_show.php\', \'photo_show\');', 10000);";` وللاسف لا يقوم بالتغيير بل فقط يتم طباعة السطر حاول ان تكتب الكود بشكل صحيح حتى يستفيد منه وشكرا جزيل لك

06-09-2009, 06:25 AM	#7 (permalink)
emamn عضو جديد تاريخ الانتساب: 28-08-2009 مشاركات: 7 مستوى السمعة : 0	رد : بلوك صور عشوائية بواسطة أجاكس AJAX شكرا اخي هكذا اشتغل الكود بشكل تمام اللهم اسلك بكل اسملك ان ترزقه العلم والهداية والشفاء

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

زوار هذا الموضوع الآن : 1 (0 عضو و 1 ضيف)

مواضيع ذات صلة
الموضوع	الكاتب	المجلس	المشاركات	المشاركة الأخيرة
اعطاء حقل قيمة عشوائية عن طريق...........	omar miligy	مشاكل وحلول PHP Errors & Troubleshooting	4	16-05-2009 03:12 AM
هل ممكن عمل سكربت او بلوك جلب الاخبار من موقع فيه خدمة Rss	ahmadiraqi	مشاكل وحلول PHP Errors & Troubleshooting	3	06-05-2009 10:40 AM
مشكلة بلوك يتغير مع تحديث الصفحة الكود بالداخل	أبو منصور	مشاكل وحلول PHP Errors & Troubleshooting	2	19-11-2008 08:54 PM
[؟] كيف أرفع ملفات عن طريق أجاكس	enigma	مشاكل وحلول PHP Errors & Troubleshooting	0	03-05-2008 08:07 PM
اريد مساعده فى بلوك الاستفتاء فى النيوك..	vBzone	مشاكل وحلول PHP Errors & Troubleshooting	0	23-03-2008 04:16 PM

الاسم		حفظ ؟
كلمة المرور