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

یکی از قابلیت های منحصر به فرد برنامه نویسی ترکیبی آژاکس (ترکیبی از جاوا اسکریپت و xml)، امکان پردازش زنده آمار و اطلاعات و ارسال و دریافت آنها در لحظه است، شاید تا به حال نمونه ای از این نوع کدها و برنامه های مبتنی بر آژاکس (Ajax) را دیده باشید، مثلا در برخی سیستم های نمایش آمار بازدیدکنندگان، قسمتی تحت عنوان نمایش زنده آمار وجود دارد که در هر لحظه، اطلاعات خوبی از اینکه کاربرانتان مثلا از چه کشورهایی هستند، به دنبال چه مطالبی می گردند و در حال دیدن کدام صفحه از سایت یا وبلاگ شما هستند را نشان می دهد که می تواند در کمک به شناخت بهتر نیازهای آنها و ایجاد محتوایی مفید تر و خیلی چیزهای دیگر به کار آید، جالب است اگر بدانید این نمایش زنده آمار، معمولا با آژاکس یا فِریم وُرک (Framework) های مبتنی بر آن قابل دست یافتن است، متاسفانه در وب و مخصوصا در وب فارسی، تا به امروز منبع خوبی برای اینگونه مسائل ارائه نشده است، به همین دلیل در این مطلب می خواهیم روش پایه ای انجام این کار را در حد امکان آموزش دهیم.

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

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

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

قبل از هر چیز به یک تابع مبتنی بر آژاکس احتیاج داریم که بتواند درخواست های ما از طریق مرورگر و پاسخ های سرور را مدیریت کند، بدین منظور و همانطور که در بخش آموزش مقدماتی آژاکس، پیش تر گفته ایم، از خاصیت های XMLHttpRequest، innerHTML، document.getElementById، xmlhttp.responseText و متدهای Post یا Get استفاده می کنیم، در تابع زیر این کار را انجام داده ایم:
//xmlhttp = null;
count = 0;
var d = new Date();
function AjaxLive(){
    InnerHTMLText = "";
    setTimeout('AjaxLive()', 5000);
    xmlhttp = null;
    if (window.XMLHttpRequest){
        // IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else{
        // IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
RndString = d.getFullYear() + "" + d.getMonth() + "" + d.getDate() + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "" + count++;

    xmlhttp.open("GET",'result.php?new=' + RndString,false);
    xmlhttp.send(null);
    if(xmlhttp.responseText != ""){
       InnerHTMLText = xmlhttp.responseText + document.getElementById("showresult").innerHTML;
        document.getElementById("showresult").innerHTML = InnerHTMLText;
    }
}
//]]>
توضیح:
- تابع بالا با نام AjaxLive (نامی دلخواه است) وظیفه ارسال و دریافت اطلاعات را به سرور (در اینجا فایل result.php) دارد.
- مقادیر ابتدای تابع برای xmlhttp ، count و var d، مقادیری پیش فرض هستند.
- setTimeout برای ایجاد وقفه در درخواست های آژاکسی به کار می رود، مقدار آن بر حسب میلی ثانیه است (5000 میلی ثانیه معادل 5 ثانیه).
- در اینجا از XMLHttpRequest برای ارسال درخواست آژاکسی استفاده شده است (در بخش آموزش مقدماتی آژاکس گفتیم که دو روش XMLHttpRequest و try و catch در ارسال درخواست آژاکسی کاربرد دارند).
- متغیر RndString برای جلوگیری از کَش (cache) شدن اطلاعات و دریافت تازه ترین آنها است، به طور ساده در این متغیر عددی با محاسبه تاریخ و زمان به صورت داینامیک ایجاد می شود و در هر بار ارسال درخواست با متد Get، پارامتر new، مقادیری جداگانه همراه درخواست آژاکسی می فرستد که این کار موجب جلوگیری از ذخیره یا به اصطلاح کَش شدن می شود.
- xmlhttp.open و متد Get یک درخواست در بستر آژاکس به فایل result.php با پارامتر متغیر new ارسال می کند تا نتایج را با xmlhttp.responseText دریافت کند.
- در قسمت دستور شرطی if بررسی می شود که اگر مقادیر برگردانده شده از xmlhttp.responseText خالی نباشد، مقادیر به خروجی ارسال شود.
- در قسمت خروجی تابع بالا، ابتدا در متغیر InnerHTMLText مقادیر خروجی از xmlhttp.responseText با محتوای موجود در بلاک div با آی دی showresult جمع می شود (مقادیر موجود در بلاک div با innerHTML به دست می آید).
- سپس کل محتوا (پاسخ جدید و اطلاعات فعلی) از نو، در بلاک div با آی دی showresult با یک دستور innerHTML نشان داده می شوند.

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

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

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

اکنون که با نحوه دریافت آمار و اطلاعات به صورت زنده از طریق آژاکس آشنا شدیم، بد نیست ببینیم که چگونه می توان یک فایل متنی یا txt را به این روش مدیریت کرد، یعنی به صورت متناوب بررسی کرد که آیا اطلاعات این فایل به روز شده است یا خیر، بدین منظور یک تابع دیگر به تابع بالا اضافه می کنیم تا نتیجه به صورت زیر در بیاید.
//xmlhttp = null;
count = 0;
var d = new Date();
function AjaxClear(StartTimer){
   xmlhttp = null;
    if (window.XMLHttpRequest){
        // IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else{
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
RndString = d.getFullYear() + "" + d.getMonth() + "" + d.getDate() + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "" + count++;

    xmlhttp.open("GET",'delete.php?new=' + RndString,false);
    xmlhttp.send(null);
    if(StartTimer == 1){
        setTimeout('AjaxLive()', 5000);
    }
}
function AjaxLive(){
    InnerHTMLText = "";
    setTimeout('AjaxLive()', 5000);
    xmlhttp = null;
    if (window.XMLHttpRequest){
        // IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else{
        // IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
RndString = d.getFullYear() + "" + d.getMonth() + "" + d.getDate() + "" + d.getHours() + "" + d.getMinutes() + "" + d.getSeconds() + "" + count++;

    xmlhttp.open("GET",'result.txt?new=' + RndString,false);
    xmlhttp.send(null);
    if(xmlhttp.responseText != ""){
       InnerHTMLText = xmlhttp.responseText + document.getElementById("showresult").innerHTML;
        document.getElementById("showresult").innerHTML = InnerHTMLText;
        AjaxClear(0);
    }
}
//]]>
توضیح:
- همانطور که می بینید، در اینجا یک تابع دیگر با نام AjaxClear (نامی دلخواه است)، به کد خود اضافه کرده ایم، این تابع وظیفه دارد که فایل delete.php را فراخوانی کند، این فایل برای حذف اطلاعات موجود در فایل دیگری به نام result.txt است که در تابع دوم تنظیم کرده ایم.
- در اینجا نیز از XMLHttpRequest و متد GET برای ارسال درخواست آژاکسی استفاده شده است که پیش تر توضیح دادیم.
- فایل delete.php به این جهت فراخوانی می شود که اطلاعات جدید فقط دریافت شود نه اطلاعاتی که قبلا دریافت شده است، در غیر اینصورت هر 5 ثانیه، محتوای فعلی فایل result.txt به خروجی بلاک div داده می شود و واضح است که تکرار نتایج خواهیم داشت.
- درون فایل delete.php دستوراتی تعریف خواهیم کرد که با هر بار فراخوانی، محتوای result.txt را پاک می کند.
- اگر دقت کنید، متوجه می شوید که در اینجا در تابع دوم یعنی AjaxLive به جای فایل php فایلی با فرمت txt با نام result.txt را فراخوانی می کنیم.
به طور ساده کد بالا با دو تابع، هر 5 ثانیه یک بار فایل result.txt را بررسی و محتوای آن را (اگر وجود داشته باشد) به بلاک div مقصد منتقل می کند، سپس تابع AjaxClear اجرا شده و محتوای فعلی پاک سازی می شود، همین روند هر 5 ثانیه یک بار تکرار می شود، تا زمانی که کاربر پنجره مرورگر را ببندد.

تنظیمات فایل delete.php

در فایل delete.php باید تنظیماتی را قرار دهیم که با هر بار فراخوانی آن، اطلاعات موجود در فایل result.txt پاک سازی شوند (این کار برای جلوگیری از نمایش محتوای تکراری است)، پس کد را به صورت زیر تنظیم می کنیم.<?php
$ajaxfile= fopen("result.txt", "w");
fclose($ajaxfile);
?>ملاحظه می کنید که تنها کافی است با متد w فایل را باز کنید و بنویسید.
استفاده از کد آژاکسی بالا، محدود به فایل های استاتیک نمی شود، می توان به فرض اطلاعات و آمار را از دیتابیس به صورت داینامیک دریافت کرد و یا توابعی پیچیده تر بر مبنای آژاکس نوشت، در کل دنیای زبان های برنامه نویسی مخصوصا برنامه نویسی وب، بسیار توسعه پذیر است که این موضوع تا حدود زیادی به سطح مهارت و علاقه ما و همچنین به وجود منابع آموزشی مناسب بستگی دارد.

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

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

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

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

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

تنظیمات فایل delete.php

مطالب مشابه :

پخش زنده رادیو در وبلاگ یا سایت

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

نکته های مهم وبلاگ نویسی چيست ؟

نکاتی که به وبلاگ نویسی بهتر شما کمک خواهند کرد

سیستم عامل

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

فروش گوسفند زنده

آموزش وبلاگ نویسی