article

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

ajax-live-file

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

چگونه با ای جکس (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 به روش های دیگر مانند استفاده از دیتابیس نیز به راحتی قابل استفاده است.
sectionدسته بندی: آموزش کاربردی » Ajax
related مطالب بیشتر:
» نمایش داینامیک و صفحه به صفحه مطالب با ای جکس (Ajax)
» اعتبار سنجی همزمان فرم با آژاکس (Ajax) و PHP
» لیست داینامیک پیشنهاد کلمات، مبتنی بر ای جکس، PHP و MySQL
» ساخت قابلیت امتیازدهی با PHP و Ajax
» آموزش نحوه آپلود فایل با PHP و آژاکس (Ajax)
commentنظرات (۲۳ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: س
زمان: ۱۱:۱۷:۱۹ - تاریخ: ۱۳۹۱/۱۲/۲۲
سلام، ممنون از لطف شما
نویسنده: مازیار
زمان: ۱۶:۵۲:۱۳ - تاریخ: ۱۳۹۲/۰۲/۰۸
ممنون از اموزش خوبی که قرار دادید ولی من با این کد یک مشکل دارم وقتی 5 ثانیه به پایان می رسد و اطلاعات مجدد لود می شود چند لحظه کل مرورگر هنگ می کند البته این مورد در حالت عادی قابل رویت نیست من این کد را برای چت انلاین استفاده کردم و کاربران به خاطر این مکث در تایپ خود دچار مشکل شده اند لطفا راهنمایی کنید
پاسخ: 
این یک مشکل بنیادی است و بستگی به حجم اطلاعات و رفتار مرورگرها دارد، به طور مثال معمولا فایرفاکس درخواست های هم زمان آژاکس را به خوبی مدیریت می کند، از این گذشته برای ایجاد سیستم چت مبتنی بر وب نیاز به توابع پیچیده تری است، برای نمونه باید تابعی داشته باشید که تنها درخواست آژاکس را هنگامی ارسال کند که کاربر در حال تایپ نباشد، مثال:
<script type="text/javascript">
var interval = 1000;
var lastKeypress = null;
var interceptKeypress = function(){
lastKeypress = new Date().getTime();
setTimeout(function(){
var currentTime = new Date().getTime();
if(currentTime - lastKeypress > interval){
sendRequest();
}
},
interval + 100
);
}
sendRequest = function(){
//ارسال درخواست آژاکسی
}
</script>
ضمن اینکه کد حاضر باید تغییراتی کند و به صورت asynchronous (هم زمان) باشد، برای این کار در هنگام استفاده از xmlhttp.open، آرگومان آخر را true قرار دهید، البته برای جلوگیری از بروز خطای
data necessary to complete this operation is not yet available
باید کدها به صورت نمونه زیر ویرایش شوند:
<script type="text/javascript">
xmlhttp.open("GET",'result.txt?new=' + RndString, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
InnerHTMLText = xmlhttp.responseText + document.getElementById("showresult").innerHTML;
document.getElementById("showresult").innerHTML = InnerHTMLText;
AjaxClear(0);
}
}
xmlhttp.send(null);
</script>
در اینجا زمانی از xmlhttp.responseText استفاده می کنیم که درخواست در وضعیت کامل باشد.
نویسنده: رضا
زمان: ۱۳:۴۴:۵۰ - تاریخ: ۱۳۹۲/۰۸/۰۹
سلام ممنون از آموزشتون.
من این کد رو پیاده کردم. اما یه مشکل داره.
هنگامی که برای دومین بار مطلبی رو در result.txt تغییر می دیم مطلب اولیه از بین نمی ره و مطلب دوم بهش اضافه میشه. مثلا اگه بنویسیم xxx و بعدش به yyy تغییرش بدیم. اونوقت نتیجه میده yyyxxxx اما در صورتی که میبایست xxx پاک بشه ولی پاک نمیشه؟؟؟!!!
لطفا راهنماییم کنید
مرسی
پاسخ: 
سلام
این کار به صورت پیش فرض بوده، می توانید قسمت زیر را ویرایش کرده:
InnerHTMLText = xmlhttp.responseText + document.getElementById("showresult").innerHTML;
و به این صورت تغییر دهید:
InnerHTMLText = xmlhttp.responseTextTML;
نویسنده: رضا
زمان: ۱۹:۱۵:۲۰ - تاریخ: ۱۳۹۲/۰۸/۰۹
با سلام و تشکر
من این کد رو با موفقیت پیاده کردم ولی پس از چندین بار تغییر دادن result.txt متاسفانه با مشکل عجیبی روبرو شدم. آی پی من به علت تبادل اطلاعات توسط سرور مسدود شد و پیغام زیر نمایش داده شد.
our connection to this server has been blocked in this server's firewall.
You need to contact the server owner for further information.
Your blocked IP address is 5.233.48.135
This server's hostname is server39.mylittledatacenter.com
من آی پی رو عوض کردم اما دوباره پس از چند بار تبادل اطلاعات دوباره آی پی من مسدود شد.
علت چیست؟؟؟
آیا تبادل زنده آمار و اطلاعات می تواند موجب مسدود شدن آی پی توسط سرور اصلی شود؟؟
با تشکر
پاسخ: 
مسدود شدن IP ارتباط مستقیمی به Ajax ندارد، بلکه تکرار پی در پی درخواست به سرور در یک بازه زمانی خیلی کوتاه می تواند علت بلاک شدن باشد، درخواست های شما به سرور باید طی فواصل زمانی محدود (به فرض هر 1 دقیقه) باشد.
نویسنده: مهدی
زمان: ۰۰:۱۴:۱۶ - تاریخ: ۱۳۹۲/۱۱/۱۶
سلام استاد ممنون از آموزشتون من به یک کد نیاز دارم اونم اینکه بررسی بشه اگر در صفحه دیگری مقدار یک متعیر تغییر کرده است مقدار جدید نمایش داده شود ممنون
پاسخ: 
سلام
سوالتان واضح نیست!
نویسنده: آزاد
زمان: ۰۰:۵۳:۳۹ - تاریخ: ۱۳۹۲/۱۱/۲۰
سلام خسته نباشید...
اگه بخوام چندتا فایل رو به صورت همزمان توی یک فایل فراخوانی کنم به صورت آژاکس باید چه کدی استفاده کنم کدی که شما ارائه کردید فقط برای یک فایل جواب میده به طور مثال من میخوام فایل های a.php و b.php رو به صورت همزمان به صورت زنده نمایش بدم...
ممنون ازتون
پاسخ: 
سلام
باید نحوه کار آژاکس را خوب درک کنید تا بتوانید این کد را متناسب با نیازتان توسعه دهید.
نویسنده: ابوالفضل
زمان: ۱۷:۳۲:۲۸ - تاریخ: ۱۳۹۲/۱۱/۲۸
سلام من از کد زیر استفاده می کنم می خوام اگر تغییراتی ایجاد نشده بود متن پیش فرض نمایش داده شود. کد به خوبی کار می کنه و به محض اینکه متن تغییر کرد تغییر میکنه ولی باز بعد چند ثانیه متن پیش فرض را نمایش می دهد
<script type="text/javascript">
//<![CDATA[
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", 'validate.php?new=' + RndString, false);
xmlhttp.send(null);
if(xmlhttp.responseText != ""){
InnerHTMLText = xmlhttp.responseText;
document.getElementById("showresultt").innerHTML = InnerHTMLText;
}
else{
if(document.getElementById("showresultt").innerHTML == ''){
InnerHTMLText = 'متن پیش فرض';
document.getElementById("showresultt").innerHTML = InnerHTMLText;
}
}
}
AjaxLive();
//]]>
</script>
در ضمن نمیشه اون فرمان راه اندازی موتور آژاکس را توی خود همین فایل انجام داد من میخوام کد را در یک فایل جاوا مانند زیر نمایش بدم
<script language="javascript" src="http://www.mysite.com/abzar.php?s=2"></script>
ممنون میشم راهنمایی بفرمایید
پاسخ: 
سلام
کد بالا برای هر دو سوال ویرایش و اصلاح شد!
نویسنده: ابوالفضل
زمان: ۲۳:۲۲:۱۴ - تاریخ: ۱۳۹۲/۱۱/۲۸
سلام خیلی ممنون
یه سوال دیگه هم دارم آیا میشه به جای اینکه خروجی را در :
<div id="showresultt"></div>
در یک متغیر ذخیره کند تا بتوان به شکل زیر ازش استفاده کرد:
document.write("pasookh:" + showresult + "");
من الان نزدیک یک ساعته دارم کل جاوا رو روش پیاده سازی می کنم! اما نشد که نشد...
پاسخ: 
سلام
showresult در واقع آی دی بلاکی است که نتیجه در آن چاپ می شود، نتیجه در xmlhttp.responseText وجود دارد (لطفا به آموزش های مقدماتی آژاکس مراجعه کنید).
نویسنده: ابوالفضل
زمان: ۰۳:۳۵:۲۴ - تاریخ: ۱۳۹۲/۱۱/۳۰
سلام خواهش می کنم بگید من باید چیکار کنم رفتم خوندم اموزش های مقدماتی آژاکس رو یعنی من باید یه تایع ایجاد کنم؟ display اسمش بزارم؟! xmlhttp.responseText را در یک متغیر ذخیره کردم خروجی گرفتم نشد من کار با آژاکس و جاوا رو تازه شروع کردم درکش برام پایینه هر چی هم بلد بودم روی این کد پیاده کردم نشد :(( فقط این مورد دیگه را راهنمایی کنید خواهش می کنم خیلی بهش نیاز دارم...
پاسخ: 
سلام
اگر اشکال دیگری در کدهای شما وجود نداشته باشد، حالت زیر باید پاسخ درخواست آژاکسی را چاپ کند:
<script type="text/javascript">
var showresult = xmlhttp.responseText;
document.write("pasookh:" + showresult + "");
</script>
نکته: با توجه به توضیحات شما به نظر مشکل از موارد دیگری ناشی می شود، به طور مثال ممکن است کدهایتان خطای syntax داشته باشد.
نویسنده: ابوالفضل
زمان: ۱۹:۴۱:۴۳ - تاریخ: ۱۳۹۲/۱۱/۳۰
سلام ممنون راستش من خودمم همین کار رو کرده بودم یک متغیر ایجاد کردم مثل شما ولی نشد حالا چرای اون خیلی جالبه :
من کدها را قبل از
AjaxLive();
که تابع رو فراخوانی می کرد قرار می دادم! در صورتی که باید بعد از
AjaxLive();
قرار می دادم مشکل من فقط همین بود و به خاطرش خیلی چیزهای دیگه از این جاوا یاد گرفتم که الان یعنی کل این کد نویسی رو فهمیدم چی به چیه!
البته این کارم میشه کرد:
	var element = document.getElementById('player');
var id = element.innerHTML;
document.getElementById("player").innerHTML = id;
document.write("<div id='player'></div>");
خیلی ممنونم از سایت خوبتون
نویسنده: ابوالفضل
زمان: ۱۹:۴۸:۰۱ - تاریخ: ۱۳۹۲/۱۱/۳۰
راستی یادم رفت سوال بعدیم رو بپرسم :d
من این کد رو درست کردم همه چیز هم عالیه البته با کمک شما تونستم تا اینجای کار بیام
حال من این کد را در:
<script language="javascript" src="http://www.mysite.com/abzar.php?s=2"></script>

قرار میدم اون قسمت:
xmlhttp.open("GET", 'validate.php?new=' + RndString, false);
هم به :
xmlhttp.open("GET", 'http://mysite.com/validate.php?new=' + RndString, false);
تغییر دادم کد کار نمیکنه ! در آژاکس نمیشه درخواست به صفحات سایت دیگری فرستاد و پاسخ گرفت؟
واسه انجام چنین کاری راهی وجود داد اصلا؟
پاسخ: 
از نظر امنیتی امکان ارسال مسقیم درخواست آژاکسی به سروری دیگر (به سادگی) مهیا نیست، باید درخواست را به سرور خود ارسال کرده و در سرور با استفاده از توابعی مانند curl ادامه مراحل را انجام دهید.
نویسنده: بهنام
زمان: ۲۳:۴۴:۲۶ - تاریخ: ۱۳۹۳/۰۲/۳۱
با سلام
چرا کدها در آژاکس کش میشوند دلیلش چیست؟
نمیشوند مستقیم بجای سال و ماه و روز و ساعت و دقیقه و ... یک عدد فرضی مثلا 999999999999999999 گذاشت؟ یا با عملیات ضرب و اینا هر بار اجرای آژاکس ضرب در دو شود؟
و در ضمن اگه ممکن در مورد کش شونده ها و
AjaxClear()
بیشتر توضیح بدید ممنونم
پاسخ: 
سلام
تا آنجا که اطلاع داریم درخواست های Ajax برای مرورگر مانند یک درخواست معمولی HTTP است، منتها اغلب مرورگرها به صورت پیش فرض تا دقایق کوتاهی صفحات وب را در حافظه موقت نگهداری می کنند (جهت افزایش سرعت)، از آنجایی که اغلب درخواست های آژاکسی در کمتر از دقیقه و به صورت پی در پی رخ می دهند، لذا این حالت مناسب نیست و باید در هر درخواست نتیجه جدید گرفته شود، لذا با افزودن یک پارامتر به انتهای آدرس درخواستی از سرور، مرورگر تصور می کند که این صفحه قبلا فراخوانی نشده و لذا نباید cache شود، اینکه این پارامتر چه چیز باشد مهم نیست، اما باید در هر درخواست یک مقدار متفاوت فرستاده شود تا مطمئن شویم آدرس تکراری نباشد، روش سال و ماه و... به این دلیل که همواره یک خروجی جدید خواهیم داشت از این لحاظ مناسب است.
تابع AjaxClear توضیح بیشتری از آنچه در آموزش گفته شده ندارد!
نویسنده: بهنام
زمان: ۲۳:۵۲:۱۰ - تاریخ: ۱۳۹۳/۰۲/۳۱
و راستی
من کد ها رو به این صورت نوشتم
function AjaxClear(SetTime){
AjaxStart();
xmlhttp.open("GET","delete.php",false);
xmlhttp.send(null);
if(SetTime == 1){
setInterval("Ajax();",5000);
}
}
function Ajax(){
AjaxStart();
var InnerHTML = '';
setInterval("Ajax();",5000);
xmlhttp.open("GET","result.txt",false);
xmlhttp.send(null);
if(xmlhttp.responseText != ''){
InnerHTML = document.getElementById('main').innerHTML + xmlhttp.responseText;
document.getElementById('main').innerHTML = InnerHTML;
AjaxClear(0);
}
}
دقیق عمل کرد و هیچ مشکلی پیش نیومد کش ها رو حذف کردم آیا امکان دارد بعد ها مشکلاتی پیش بیاید؟
نکته:
- درون فایل delete.php که همان کد های خودتان هست
- AjaxStart هم همان فراخوانی آژاکس هست
پاسخ: 
حالت cache همیشه وجود ندارد، مرورگرها بر حسب تنظیمات پیش فرض ممکن است این کار را انجام دهند، در هر صورت استفاده نکردن از پارامتر توصیه نمی شود!
نویسنده: بهنام
زمان: ۰۲:۰۱:۳۴ - تاریخ: ۱۳۹۳/۰۳/۰۱
سلام
با کمک سایت مفید شما تونستم چت رومم را همانطور که آرزوم بود بسازم حالا یه مشکل مونده این وسط:
شما با یک فایل مثال زدید که هر بار محتوای درون فایل را خالی می کند و پیام های جدید را نشان میدهد این درست اما اگر بخواهیم بجای فایل با mysql کار کنیم من با mysql را طبق همین نوشتم ولی نمیدونم درون فایل delete.php چه کدی بنویسم؟ اگر دستور مربوط به mysql حرف تمامی ستون ها delete from ... ؛ اینطوری مشکل برطرف می شود و پیام ها را نشان میدهد اما فقط به خودم نشان میدهد اگر با مرورگر دیگه ای برم کاربر دیگه ای نمیتواند پیام ها را ببیند اما اگر کد های درون delete.php را خالی بگذارم و هیچ کدی ننویسم- مثلا 10 پیام در پایگاه داده هستش ؛ هر 10 تا پیام همینطور هی تکرار میشوند و همه کاربرا پیام را میبینند و برای آن ها هم تکرار می شود راه حل delete.php چیست؟
لطفا یک راه حال پیشنهاد بدید نهایت سپاس را دارم
پاسخ: 
سلام
در پاسخ های قبلی گفتیم که باید تجربه لازم را داشته باشید، تعریف ساختار یک برنامه چت نیاز به رعایت نکات زیادی دارد که نمی توان همه آنها را اینجا خلاصه کرد، به طور مثال ده ها کاربر هم زمان در حال استفاده از اطلاعات دیتابیسی هستند که باید مقادیر ستون های آن مطابق با عملکرد تمام کاربران مدیریت شود، اینکه چه راه حلی برای این کار پیدا کنید تنها با صرف وقت، فکر کردن و نوشتن طرح تئوری روی کاغذ امکانپذیر است!، اما چیزی که در این لحظه به ذهن می رسد، می توانید اطلاعات را هنگامی حذف کنید که آخرین کاربر از چت روم مورد نظر خارج یا آفلاین می شود، یعنی زمانی که هیچ کاربری در روم نبود یا به فرض مدت یک روز از تاریخ مطالب گذشت، آنها را با اجرای فایل delete.php حذف کنید، برای نمایش اطلاعات نیز یک ستون در نظر بگیرید، هر کاربری که ردیف مورد نظر را دریافت کرد، نام او را در ستون فرضی به صورت یک رشته قابل تبدیل به آرایه اضافه کنید، به فرض:
Ali|Reza|Pedram
با این حالت می توانید در کدهای PHP، نام کاربر را با مقادیر value آرایه مقایسه کنید، اگر وجود داشت، آن ردیف را به خروجی ارسال نکنید یا روش ساده تر این است که یک سشن آی دی برای کاربران در نظر بگیرید که مقادیر آن آخرین id از ستون پیام هایی باشد که برای کاربر ارسال می شود، به این ترتیب در هر درخواست، شماره های بعدی را تنها در پاسخ ارسال کنید.
در کل برای طراحی بهترین و بهینه ترین حالت باید خوب فکر کنید و البته بر ابزار کار (برنامه نویسی PHP و MySQL + Ajax و JavaScript) مسلط باشید.
نویسنده: بهنام
زمان: ۱۴:۵۹:۲۰ - تاریخ: ۱۳۹۳/۰۳/۰۱
بله فهمیدم بسیار ممنونم
اگر دستور آژاکس ما POST باشد این کش را چطوری باید بفرستیم آیا به این صورت امکان پذیر است؟
xmlhttp.open("POST","result.txt",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("new=" + MyRand());
پاسخ: 
بله، در قسمت اول هم می توانید این کار را انجام دهید و در نهایت فرقی نمی کند، منظور این قسمت است:
xmlhttp.open("POST","result.txt?new=" + MyRand(),true);
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




5 × 1
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form حسن
در:
سلام خسته نباشید میخواستم بدونم تابع
file_get_contents
سمت سرور اجرا میشه؟ یعنی یوزر نمیفهمه که تابع اجرا شده؟ و اینکه ادرس url...
۱۱:۳۱:۳۵ ۱۳۹۸/۰۹/۱۶

form مونا
در:
سلام من یک وبلاگ ساختم همه چیزش درست بود ولی یک انجمن به نام قاتی پاتی که هدفش شناساندن و معرفی وبلاگ نویسان هست اومده...
۱۵:۳۱:۱۳ ۱۳۹۸/۰۹/۱۳

form نرگس
در:
یه سوال دبیرمون بهم داده که با استفاده از آرایه پنج نمره رو دریافت کرده و در حلقه for معدلشان را محاسبه کرده و نمایش...
۱۳:۰۳:۵۵ ۱۳۹۸/۰۹/۱۳

form محمد صادق نصرتی رامش
در:
چکونه لینک بگذارم و پول در بیاورم؟
۱۶:۰۵:۳۴ ۱۳۹۸/۰۹/۱۱

form مصطفی
در:
ببخشید چرا قسمت جستجوی سایتتون عمل نمیکنه!؟ دنبال مقاله راجع سشن ها و ساخت پنل مدیریت برای سی ام اسم میگردم یادمه یه مقاله قبلا...
۰۰:۱۹:۰۳ ۱۳۹۸/۰۹/۰۸

form مصطفی
در:
سلام نه هر چه کردم کد درست عمل نکرد و مجبور شدم یک ایندکس بسازم لینک بزارم با این کار قصد دارم هم بتونم سایت...
۲۱:۵۶:۰۱ ۱۳۹۸/۰۹/۰۷

form مصطفی
در:
سلام ادرس سایت من
www.ory.ir
است من 2 تا قالب درست کردم در دو پوشه اما با دستور زیر در روت مشکل دارم و...
۰۸:۰۳:۳۵ ۱۳۹۸/۰۹/۰۷

form مصطفی
در:
سلام . وقتی داریم یک رکورد رو آپدیت میکنیم ، چطوری بفهمیم کدوم ستون ها داره آپدیت میشه و اونارو بفرستیم به یک view ؟
۱۴:۳۴:۵۵ ۱۳۹۸/۰۹/۰۶

form یه سوال کننده
در:
سلام. ببخشید من یه سری فایل dbf دارم که نمیدونم چطور تبدیلش کنم به فایل اکسل که فرمتش درست باشه. مربوط به فایل برنامه 118...
۰۴:۴۴:۱۲ ۱۳۹۸/۰۹/۰۵

form adel
در:
سلام با تشکر از سایت خوب شما. یه سوال داشتم چگونه تمام این کدها را در جاوا اسکریپت همزمان قرار دهیم. من مثلا دستور این...
۲۱:۲۵:۴۰ ۱۳۹۸/۰۸/۲۴

form یه سوال کننده
در:
سلام. ببخشید چطور میشه ایمیل هایی رو میفرستن که ریپلای زدن رو ایمیلی که از طرف ما نبوده بیشتر تو تبلیغات دیدم امیدوارم منظورم و...
۰۳:۲۳:۰۸ ۱۳۹۸/۰۸/۲۴

form پرتو
در:
با عرض سلام و خسته نباشید امیدوارم حالتون خوب باشه من دو سه سال پیش وبلاگم رو حذف کردم ایا امکانش هست برگرده؟ ادرس...
۱۴:۵۵:۵۲ ۱۳۹۸/۰۸/۲۰

form علی
در:
سلام من نمی تونم html tag رو چطور در وبلاگم قرار بدم وبلاگم اینه
tagtak.blog.ir
۱۰:۲۳:۳۴ ۱۳۹۸/۰۸/۲۰

form حمید
در:
سلام. خسته نباشید. من میخاستم استایل فیلدهای فرمم رو تغییر بدم منتهی نمیدونم از چه کدهایی باید استفاده کنم. برای اینکه فرمی به شکل...
۱۰:۳۶:۱۹ ۱۳۹۸/۰۸/۱۹

form سمیه
در:
سلام ممنون بابت آموزش مفیدتون توی تگ ها هرچیزی که در تگ head قرار بگیره نمایش داده نمیشه، اما ممنون میشم...
۲۰:۴۹:۲۳ ۱۳۹۸/۰۸/۱۷