بسم الله الرحمن الرحيم
مقدمة
من أفضل مزايا استخدام تقنية أجاكس 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:
<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 "setInterval('Switch(\'photo_show.php\', \'photo_show\');', 10000);";
?>
<br /><div style="z-index:3" class="smallfont" align="center">Search Engine Optimization by vBSEO 3.2.0</div></body>
</html>
2- كود الملف photo_show.php (والذي سيتم استدعائه عن طريق AJAX لتغيير الصورة في البلوك)، الكود مطابق لكود الملف index.php تقريبا اذا لا داعي لشرحه
كود PHP:
<?
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'].'" />';
}
?>
هكذا نكون قد انتهينا من انشاء السكريبت
الكود كامل بالمرفقات
أتمنى ان يكون كل شيء واضح
كما أتمنى ان تعذروني لأي خطأ وتنبهوني له
وفي حال وجود أي استفسارات أرجو طرحها هنا
شكرا
رد مع اقتباس
مشكل
