نمایش زنده آمار و اطلاعات با ای جکس (Ajax)

چگونه با ای جکس (Ajax) آمار و اطلاعات را به طور زنده نمایش دهیم؟

شاید اولین سوالی که به ذهن می رسد این باشد که چگونه با ای جکس (Ajax) آمار و اطلاعات را به طور زنده نمایش دهیم؟
پاسخ این است که ای جکس از این قابلیت ذاتی برخوردار است که می توان به کمک آن در پس زمینه و بدون بارگذاری مجدد صفحه، از سمت کاربر به سرور درخواست ارسال و در مقابل پاسخ درخواست را دریافت و در مرورگر نتیجه را پردازش یا نمایش داد.
همان طور که می دانیم ای جکس مبتنی بر برنامه نویسی جاوا اسکریپت (JavasScript) است و لذا شروع توابع آن با فراخوانی یک رویداد آغاز می شود، این رویداد می تواند به فرض کلیک کاربر بر روی دکمه (onclick) یا بارگذاری (onload) صفحه و یا هر رویداد استاندارد و تعریف شده دیگری در جاوا اسکریپت باشد، به طور مثال ممکن است به محض بارگذاری صفحه و اجرای رویداد onload شروع به ارسال و دریافت زنده اطلاعات با ای جکس کنیم، پس از اینکه موتور ای جکسی ما به حرکت می افتد درخواست به سرور ارسال و پاسخ متناظر دریافت می شود و می توانیم به نحو مقتضی از آن استفاده کنیم، برای ایجاد روند متناوب، این فرآیند را معمولا با توابعی مانند setTimeout و setInterval تکرار کرده و نتیجه جدید را نمایش می دهیم و مجددا تا زمانی که مورد نیاز است این چرخه به همین صورت ادامه می یابد و سبب می شود که بتوانیم اطلاعات جدید ذخیره شده در دیتابیس، فایل های PHP و یا حتی فایل های متنی را به طور زنده و مداوم دریافت کنیم و نتایج را در لحظه نمایش دهیم.

تابع ارسال و دریافت زنده آمار و اطلاعات با ای جکس (Ajax)

قبل از هر چیز به تابع ای جکس (Ajax) احتیاج داریم که بتواند درخواست های ما از طریق مرورگر را ارسال و پاسخ های سرور را دریافت کند، بدین منظور و همانطور که در بخش آموزش مقدماتی ای جکس گفته ایم، از آبجکت XMLHttpRequest و متدهای Post یا Get استفاده می کنیم، در نمونه تابع زیر این کار را انجام داده ایم:

<script>
var xmlHttp = null;
var response = '';
var template = '';
var count = 0;
var d = new Date();

function getAjaxLive(){
    var rand_string = d.getFullYear() + '' + d.getMonth() + '' + d.getDate() + '' + d.getHours() + '' + d.getMinutes() + '' + d.getSeconds() + '' + count++;
    var elm_result = document.getElementById('show-result');

    if(window.XMLHttpRequest){
        //IE7+, Firefox, Chrome, Opera, Safari
        xmlHttp = new XMLHttpRequest();
    } else{
        //IE6, IE5
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlHttp.open('GET', 'result.php?new=' + rand_string, true);
    xmlHttp.send(null);

    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4){
            response = xmlHttp.responseText;

            if(response != ''){
                template = '<div class="result-row">' + response + ' - ' + rand_string + '</div>';
                elm_result.innerHTML = template;
            }

            if(xmlHttp.status == 200){
                setTimeout('getAjaxLive();', 5000);
            } else{
                alert('Something Is Not True! Please Refresh The Page.');
            }
        }
    }
}
<script>

توضیح:
- تابع بالا با نام getAjaxLive وظیفه ارسال و دریافت اطلاعات را به سرور (در اینجا فایل result.php) بر عهده دارد.
- در ابتدای کدها و خارج از تابع متغیرهایی به صورت Global Scope یا دسترسی سراسری با مقادیر اولیه مقداردهی شده اند.
- متغیر d به صورت یک آبجکت از نوع Date تعریف شده است و به این ترتیب می توانیم از متدهای مربوط به تاریخ و زمان در تابع استفاده کنیم.
- تابع setTimeout برای ایجاد وقفه در درخواست های ای جکس به کار می رود و مقدار آرگیومنت دوم آن بر حسب میلی ثانیه است (5000 میلی ثانیه معادل 5 ثانیه)، به این صورت می توانیم در گام های مشخص به صورت متناوب مجددا تابع را فراخوانی و آخرین اطلاعات را از سرور دریافت کنیم.
- مقادیر 5 ثانیه صرفا برای تست کد مناسب است، در برنامه های کاربردی جهت جلوگیری از افزایش تعداد درخواست ها به سرور بهتر است مدت زمانی بیش از 15 ثانیه در نظر گرفته شود.
- در اینجا از آبجکت XMLHttpRequest برای فراهم کردن ساز و کار ارسال درخواست ای جکس به صورت ساده و با شرط if و else استفاده شده است (در بخش آموزش های مقدماتی ای جکس دیدیم که روش try و catch نیز در این مورد کاربرد دارد).
- متغیر rand_string برای جلوگیری از ذخیره نتایج درخواست ها در حافظه موقت مرورگر یا به اصطلاح Cache نشدن آنها است، به صورت ساده با محاسبه تاریخ و زمان در این متغیر عددی غیرتکراری ایجاد می شود و در هر بار ارسال درخواست با متد Get، پارامتر new مقادیر جدیدی همراه درخواست ای جکس می فرستد که این کار موجب تازه سازی آدرس URL در مرورگر و جلوگیری از ذخیره یا به اصطلاح کش شدن اطلاعات می شود.
- متدهای xmlHttp.open و xmlHttp.send درخواست را به همراه پارامتر متغیر new در بستر ای جکس به فایل result.php ارسال می کنند و نتیجه را با متد xmlHttp.responseText دریافت می کنیم.
- با توجه به منسوخ (Deprecated) شدن استفاده از مقدار false برای آرگیومنت سوم متد xmlHttp.open در مرورگرهای جدید، از مقادیر true و متدهای xmlHttp.onreadystatechange و xmlHttp.readyState در این کد استفاده شده است، در غیر اینصورت احتمالا هشدار زیر در Console مرورگر نمایش داده خواهد شد:

synchronous requests on the main thread have been deprecated due to their negative impact on the user experience.

- در قسمت دستور شرطی if بررسی می شود که اگر مقادیر برگردانده شده از xmlhttp.responseText خالی نباشد، قسمت ایجاد خروجی نهایی تابع اجرا شود.
- در قسمت ایجاد خروجی ابتدا در متغیر response پاسخ سرور از متد xmlHttp.responseText دریافت و در صورتی که مقدار خالی نباشد خروجی نهایی در متغیر template آماده سازی و با متد innerHTML در صفحه وب (بلاک show-result) نمایش داده می شود.

فراخوانی تابع و نمایش اطلاعات در بلاک div

پس از اینکه تابع خود را مبتنی بر متدهای ای جکس نوشتیم، باید نتیجه درخواست را درون بلاک div با آی دی مشخص (که در کد بالا با نام فرضی show-result تنظیم شده است) نمایش دهیم، اما قبل از هر چیز باید ابتدا موتور ای جکسی خود را استارت زده باشیم! گفتیم که توابع در جاوا اسکریپت معمولا با یک رویداد فراخوانی می شوند و در اینجا نیز می توانیم از رویداد onload در تگ body استفاده کنیم (رویداد onload با بارگذاری کامل صفحه اجرا می شود):

<body onload="getAjaxLive();">

یا با متد window.onload تابع را پس از بارگذاری کامل صفحه فراخوانی کنیم:

window.onload = function(){
    getAjaxLive();
}

و همچنین در کدنویسی HTML صفحه یک بلاک div با آی دی showr-result می سازیم.

<div id="show-result"></div>

و نمونه استایل زیر را در صفحه (یا به صورت فایل مجزا) درج می کنیم:

<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    line-height: 22px;
}
.result-row {
    margin: 4px;
    padding: 4px;
    color: #FFFFFF;
    border: 1px solid #2e6ab1;
    background: #8EA9EE;
    direction: ltr;
}
</style>

اکنون کد ما تقریبا برای استفاده اولیه آماده است اما بسته به هدف خود می توانیم از قابلیت های بیشتری استفاده کنیم که در ادامه به آنها اشاره خواهیم کرد.

دریافت زنده آمار و اطلاعات از فایل متنی با ای جکس و PHP

اکنون که با نحوه ارسال درخواست و دریافت آمار و اطلاعات به صورت زنده از طریق ای جکس آشنا شدیم، می خواهیم ببینیم که چگونه می توانیم فایل متنی با فرمت txt را به این روش مدیریت کنیم، به طور مثال به صورت متناوب بررسی کنیم که آیا اطلاعات این فایل به روز شده است یا خیر؟
ساختار مد نظر ما از منطق ساده ای پیروی می کند و می تواند مبنای سیستم های زنده تحت وب باشد، بدین منظور لازم است که در برنامه نویسی سمت سرور و کدهای PHP تمهیداتی اندیشه کنیم، به اینصورت که باید یک فایل متنی TXT و دو فایل PHP داشته باشیم، فایل TXT را با نام file.txt و فایل های PHP را می توانیم به صورت result.php و update.php نامگذاری کنیم، فایل result.php با هر درخواست از سمت کاربر فایل متنی را بررسی می کند، اگر این فایل حاوی اطلاعات بود نتیجه استخراج، به مرورگر ارسال و در نهایت فایل متنی برای نوشتن مجدد خالی می شود، اما اگر فایل متنی حاوی اطلاعات نبود یعنی هنوز به روزرسانی صورت نگرفه است و لذا پاسخ خالی به مرورگر ارسال می شود، فایل update.php نیز بر اساس نیاز و ساختار برنامه اطلاعات جدید را در انتهای فایل متنی می نویسد بدون اینکه اطلاعات موجود حذف شوند، این فایل در حالت تست برنامه به صورت دستی فراخوانی یا رفرش می شود اما در پروژه های کاربردی معمولا توسط کاربران یا به فرض بازدیدکنندگان سایت اجرا خواهد شد، در ادامه آموزش جهت راهنمایی بیشتر مراحل انجام کار را مورد به مورد بررسی می کنیم.

فایل متنی file.txt، نگهداری و استخراج اطلاعات

همان طور که گفتیم برای نگهداری و استخراج اطلاعات جدید می توانیم از یک فایل متنی استفاده کنیم، این فایل را با نام file.txt در دایرکتوری برنامه ایجاد می کنیم، دقت کنیم که محتوای فایل متنی باید خالی باشد و با فراخوانی توسط فایل update.php به روزرسانی شود.

فایل result.php، بررسی فایل متنی و ارسال پاسخ به مرورگر

تابع ای جکس درخواست ها را به فایل result.php در سرور ارسال می کند، این فایل دو وظیفه را برعهده دارد، ابتدا باید محتوای فایل متنی را بررسی کند، اگر محتوا خالی نبود یعنی اطلاعات جدید توسط فایل update.php اضافه شده است و مقادیر موجود به عنوان پاسخ به مرورگر ارسال می شود، اما اگر محتوایی در فایل متنی وجود نداشته باشد یعنی هنوز به روزرسانی صورت نگرفته و پاسخ خالی به مرورگر ارسال می شود، وظیفه دوم این تابع خالی کردن فایل متنی و آماده سازی جهت به روزرسانی بعدی است، بر این اساس کدهای زیر را در فایل result.php درج می کنیم:

<?php
$file = 'file.txt';
$fp = fopen($file, 'rb+');

if(($fp) !== false) {
    if(flock($fp, LOCK_EX) === true) {
        $size = filesize($file);

        if($size > 0) {
            $data = fread($fp, $size);
            echo $data;
            ftruncate($fp, 0);
        } else {
            echo '';
        }

        flock($fp, LOCK_UN);
    } else {
        echo 'Locking Error!';
    }

    fclose($fp);
}
?>

نکته: برای جلوگیری از ایجاد تداخل احتمالی در هنگام نوشتن فایل متنی از تابع flock استفاده کرده ایم، با این تابع ساز و کاری فراهم می شود تا درخواست های هم زمان برای نوشتن یک فایل به ترتیب صورت گیرد.

فایل update.php، به روزرسانی فایل متنی با اطلاعات جدید

بسته به نیاز و هدف برنامه کدنویسی فایل update.php می تواند متفاوت باشد، جهت نمونه کدهای زیر را در این فایل درج می کنیم:

<?php
$file = 'file.txt';
$fp = fopen($file, 'ab');

if(($fp) !== false) {
    if(flock($fp, LOCK_EX) === true) {
        $data = 'Ajax Response!';

        if(fwrite($fp, $data)) {
            echo 'Write Ok!';
        } else {
            echo 'Write Error!';
        }

        flock($fp, LOCK_UN);
    } else {
        echo 'Locking Error!';
    }

    fclose($fp);
}
?>

با هر بار فراخوانی فایل update.php اطلاعات جدید در انتهای فایل متنی نوشته می شود، در هنگام تست برنامه این فایل باید به صورت دستی و مکررا فراخوانی شود اما در حالت کاربردی می تواند توسط کاربران یا بازدیدکنندگان سایت فراخوانی شود.

تابع پیشرفته نمایش زنده آمار و اطلاعات با ای جکس (Ajax)

تابع ای جکسی که در این آموزش بررسی کردیم به عنوان کد پایه و به صورت ساده صرفا اطلاعات را در یک بلاک نمایش می دهد و از جلوه های گرافیکی یا نمایش در بلاک های مختلف پشتیبانی نمی کند، با توسعه این کد می توانیم قابلیت های دیگری با توجه به نیاز و هدف برنامه در نظر بگیریم، به طور مثال قابلیت نمایش اطلاعات جدید با افکت Fade In و همچنین نمایش نتیجه هر درخواست در یک بلاک div جدید در صفحه وب بدون اینکه بلاک های موجود حذف شوند یا افزایش ردیف ها باعث کندی روند پیمایش در صفحه مرورگر شود، بر این اساس کد جاوا اسکریپت آموزش را به صورت زیر تغییر می دهیم:

<script>
var xmlHttp = null;
var response = '';
var template = '';
var count = 0;
var d = new Date();

function getAjaxLive(){
    var rand_string = d.getFullYear() + '' + d.getMonth() + '' + d.getDate() + '' + d.getHours() + '' + d.getMinutes() + '' + d.getSeconds() + '' + count++;
    var container;
    var div;
    var elm_result;

    if(window.XMLHttpRequest){
        //IE7+, Firefox, Chrome, Opera, Safari
        xmlHttp = new XMLHttpRequest();
    } else{
        //IE6, IE5
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlHttp.open('GET', 'result.php?new=' + rand_string, true);
    xmlHttp.send(null);

    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4){
            response = xmlHttp.responseText;

            if(response != ''){
                container = document.getElementById("show-result");

                div = document.createElement("div");
                div.id = 'show-result-' + count;
                //container.appendChild(div);
                container.insertBefore(div, container.firstChild);

                elm_result = document.getElementById('show-result-' + count);

                template = '<div class="result-row">' + response + ' - ' + rand_string + '</div>';
                elm_result.innerHTML = template;
            }

            if(xmlHttp.status == 200){
                setTimeout('getAjaxLive();', 5000);
            } else{
                alert('Something Is Not True! Please Refresh The Page.');
            }
        }
    }
}
</script>

تغییرات این کد نسبت به حالت ساده آن شامل اضافه شدن قسمت مربوط به متدهای createElement و insertBefore است، با این متدها با دریافت هر پاسخ از سرور یک بلاک div با آی دی یکتا در HTML DOM ساخته و ردیف جدید در این حالت به سورس صفحه وب اضافه می شود.
نکته 1: برای افزودن ردیف های جدید در صفحه وب دو متد appendChild و insertBefore کاربرد دارند، تفاوت این دو متد در محل ایجاد بلاک جدید در انتها یا ابتدای عنصر هدف و در نتیجه چینش بلاک های صفحه به صورت نزولی یا صعودی است.
نکته 2: بعضا شاهد هستیم که کاربران در هنگام استفاده از متد innerHTML از کندی پیمایش صفحه مرورگر گلایه دارند و در نهایت مجبور به رفرش صفحه می شوند، دلیل بروز این حالت افزایش حجم زیاد اطلاعاتی است که با متد innerHTML بازنویسی می شود، با راه حل ارائه شده در کد بالا مشکل کندی نیز بر طرف خواهد شد.

استایل CSS پیشرفته و نمایش نتایج با افکت Fade In

برای نمایش اطلاعات جدید با جلوه ظاهری بهتر می توانیم از ایده های مختلفی استفاده کنیم، به طور مثال یکی از ساده ترین و در عین حال کاربردی ترین این جلوه ها نمایش بلاک نتایج با حالت افکت Fade In است که بدین منظور از خاصیت animation در CSS استفاده می کنیم:

body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    line-height: 22px;
}
.result-row {
    margin: 4px;
    padding: 4px;
    color: #FFFFFF;
    border: 1px solid #2e6ab1;
    background: #8EA9EE;
    direction: ltr;
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    -webkit-animation: fadein 2s;
    -o-animation: fadein 2s;
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

افکت Fade In نتایج را با حالت محو و ظاهر شدن تدریجی نمایش می دهد که از نظر ظاهری جلوه زیبایی به برنامه خواهد داد.

دانلود نمونه فایل ها

برای راحتی کار و جلوگیری از سردرگمی می توانیم نمونه فایل های ارائه شده در این آموزش را به صورت یکجا از لینک زیر دریافت و در لوکال هاست یا سرور آنلاین کدها را تست کنیم.
دانلود نمونه فایل های نمایش زنده اطلاعات با ای جکس (Ajax)

کد و پیش نمایش آنلاین

جهت بررسی و تست آنلاین برنامه نیز می توانیم از نمونه کدها و لینک پیش نمایش آنلاین زیر استفاده کنیم:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | نمایش زنده اطلاعات با ای جکس</title>
<!-- Webgoo.ir -->
<link rel="stylesheet" href="style_pro.css">
<script src="script_pro.js"></script>
</head>
<body>
<noscript>جاوا اسکریپت در مرورگر شما غیر فعال است!</noscript>
<div id="show-result"></div>
<hr>
- برای نمایش یا به روزرسانی نتیجه در این صفحه ابتدا باید فایل update.php در نوار آدرس مرورگر فراخوانی شود. [<a href="update.php" title="Update.php" target="_blank">فراخوانی فایل update.php</a>]
<br>
- آپدیت در هنگام تست برنامه به صورت دستی انجام می شود اما در پروژه های کاربردی می تواند به فرض با فراخوانی صفحه توسط کاربر یا بازدیدکننده سایت و به صورت خودکار صورت گیرد.
<br>
- عددی که در کادر نتیجه نمایش داده می شود با هر فراخوانی فایل update.php تغییر خواهد کرد (پس از هر آپدیت اندکی صبر کنید!).
</body>

پیش نمایش آنلاین
نکته: استفاده از این شیوه به فایل متنی محدود نبوده و در صورت آشنایی با برنامه نویسی PHP به روش های دیگر مانند استفاده از دیتابیس نیز به راحتی قابل استفاده است.