article

آموزش ای جکس (Ajax)، تکنیک غیرهمزمانی در وب

ajax-web-development

ای جکس (Ajax) عنوان جذابی است از نوعی تکنیک برنامه نویسی ترکیبی که از سال 2005 با کاربرد آن توسط موتورهای جستجویی چون گوگل و برنامه نویسان وب مطرح شد، این کلمه مخففی است از سرواژه های Asynchronous JavaScript And XML و در بیانی ساده به معنی نقل و انتقال داینامیک و غیرهمزمان اطلاعات در صفحات وب، بدون بارگذاری مجدد (reload) آنها است، نمونه برجسته ای از کاربرد ای جکس در شبکه های اجتماعی، چت روم های آنلاین و سرویس های آپلود فایل خودنمایی می کند، در واقع با کمک این تکنیک درخواست از سمت مرورگر به سرور ارسال می شود بدون اینکه در روند صفحه فعلی مرورگر کاربر خللی وارد شود (عبارت Asynchronous به معنی غیرهمزمان یا ناهمگام است و این یعنی عملیات در پس زمینه صورت می گیرد و کاربر همچنان می تواند در مرورگر پیمایش کند)، اگرچه به کارگیری این تکنیک در مقایسه با سایر زبان های اسکریپت نویسی وب، تقریبا جدید و روشی نوین است، اما باید توجه داشت که ای جکس یک زبان جداگانه محسوب نمی شود بلکه شیوه ی نوینی از به کارگیری و ترکیب JavaScript و XML است.

تلفظ و نگارش صحیح Ajax


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

ضرورت و پیش نیازهای فراگیری ای جکس (Ajax)


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

شروع آموزش ای جکس با یک مثال


برای شروع آموزش این تکنیک، شاید بهتر باشد ابتدا به صورت کاربردی با ای جکس آشنا شویم، به طور مثال یک فرم ساده وب را در نظر بگیرید که در رویداد onchange، تابعی مبتنی بر جاوا اسکریپت را اجرا می کند:
<form name="myform" action="#">
<label for="username">نام: </label>
<input name="username" id="username" type="text" onchange="ajaxRequest();">
<br><br>
<label for="username">زمان: </label>
<input name="time" id="time" type="text">
</form>
همانطور که گفتیم، ارسال و دریافت اطلاعات در وب، در حالت عادی با بارگذاری مجدد صفحه انجام می شود که این مسئله مخصوصا در مواردی که می خواهیم یک عملیات جزئی در صفحه داشته باشیم چندان منطقی و باب طبع کاربر نیست، برای حل این مشکل با افزودن چند خط کد ای جکس زیر می توانیم بدون رفرش صفحه اطلاعات را به سرور منتقل کرده و مجددا پاسخ را دریافت کنیم (در اینجا می خواهیم پس از اینکه کاربر نام خود را در فیلد اول وارد کرد در فیلد دوم زمان را نشان دهیم):
<script type="text/javascript">
function ajaxRequest(){
    var xmlHttp;
    
    try{
        //Opera, Firefox, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e){
        //Internet Explorer
        try{
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                alert("متاسفانه مرورگر شما از ای جکس پشتیبانی نمی کند");
                return false;
            }
        }
    }
}
</script>
کد بالا برای ارسال درخواست بر بستر ای جکس کامل نیست و بعد از افزودن کدهایی که در ادامه خواهیم دید درخواست به سرور در پس زمینه ارسال می شود، در بررسی کد، XMLHttpRequest یک Object است که در جاوا اسکریپت با دستور new فراخوانی و به متغیر نسبت داده می شود، برای درک دقیق مفهوم آبجکت باید با برنامه نویسی شی گرا آشنا باشیم اما فعلا در همین حد بدانیم که XMLHttpRequest در واقع ساز و کاری را فراهم می کند که بتوانیم درخواست هایی در بستر ای جکس ارسال و نتیجه را دریافت کنیم، این ساز و کار را در برنامه نویسی اصطلاحا API (مخفف Application Programming Interface) می نامند، XMLHttpRequest در مرورگر اینترنت اکسپلورر در نسخه های قدیمی به نحو متفاوتی عمل می کند و اگر بخواهیم چنین مرورگرهایی را نیز پشتبانی کنیم نیاز به کدهای اضافه و استفاده از ActiveXObject داریم، به همین دلیل در نمونه کد بالا تنظیمات سازگار با همه مرورگرها آورده شده تا از این نظر با مشکل مواجه نشویم، اما برای ارسال درخواست و دریافت نتیجه در پس زمینه به دستورات بیشتری نیاز است که در ادامه خواهیم دید:
xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4){
        document.myform.time.value = xmlHttp.responseText;
    }
}
xmlHttp.open("GET", "server-time.php", true);
xmlHttp.send(null);
در تحلیل تکه کد بالا onreadystatechange در ای جکس متدی از آبجکت XMLHttpRequest است که پس از ارسال یک درخواست، مقدار عددی متد readyState را بررسی می کند تا ببیند که رویداد جدیدی رخ داده یا خیر، در بیان ساده هر اتفاقی که در روند ارسال یک درخواست بر بستر ای جکس می افتد با یک مقدار عددی (از 0 تا 4) مشخص می شود، این مقدار عددی را متد readyState در خود نگه می دارد و متد onreadystatechange در واقع زمانی برقرار و به اصطلاح true است که مقدار readyState از حالت پیش فرض به یک عدد تغییر کند (متدهایی مانند onreadystatechange را که با رویداد سر و کار دارند، در اصطلاحات برنامه نویسی EventHandler می گویند)، شرح دقیقتر متد readyState در ادامه خواهد آمد.

readyState یا وضعیت آماده چیست؟


همان طور که اشاره شد بعد از فراخوانی XMLHttpRequest مرورگر یک درخواست ای جکس را شروع می کند و متد readyState در طی این روند با اعدادی از 0 تا 4 که هر کدام یک وضعیت را نمایش می دهند مقداردهی می شود، عدد 0 وضعیت UNSENT را نشان می دهد که یعنی متد open در مرورگر ساخته شده اما هنوز فراخوانی نشده است، عدد 1 وضعیت OPENED را نشان می دهد یعنی متد open فراخوانی شده، عدد 2 نشانگر وضعیت HEADERS_RECEIVED است یعنی متد send فراخوانی شده و سربرگ های HTTP و پاسخ سرور آماده است، عدد 3 نشانگر وضعیت Downloading است، یعنی مرورگر در حال دریافت مقادیر ارسال شده از سرور به عنوان پاسخ است، در گام آخر برای اینکه بررسی کنیم همه چیز مرتب است readyState باید DONE یا کامل باشد، حالت کامل با عدد 4 دریافت می شود و با شرط ساده if برابری آن را بررسی می کنیم (که آیا xmlHttp.readyState برابر 4 است یا خیر).

دریافت و نمایش پاسخ سرور در ای جکس (Ajax)


پس از دریافت مقدار عددی 4 در بررسی readyState با دستور شرطی if، تکه کد document.myform.time.value اجرا و مقدار برگردانده شده توسط سرور که در متد responseText وجود دارد را به فیلد input که با مقدار name آن مشخص شده می دهیم، با دقت در کد متوجه می شویم که در متد open از عبارت GET برای آرگیومنت اول، آدرس یک فایل PHP برای آرگیومنت دوم و عبارت true برای آرگیومنت سوم استفاده شده، در حال حاضر در همین حد بدانیم که این پارامترها به ترتیب برای مشخص کردن نحوه ارسال اطلاعات (متد GET یا POST)، آدرس فایل مقصد در سرور (در اینجا فایل PHP) که درخواست به آن ارسال می شود و تعیین اینکه آیا سایر فعالیت های مرورگر در طی روند درخواست متوقف شود یا خیر (به ترتیب با مقدار false یا true، در حالت پیش فرض true) می باشند، در نهایت اطلاعات را با متد send به فایلی که با متد open فراخوانی گردیده ارسال می کنیم، در کد فعلی هیچ مقداری در send ارسال نشده و مقادیر آرگیومنت آن برابر با null است، اما در آموزش های بعدی خواهیم دید که می توان در یک درخواست مبتنی بر ای جکس پارامترهایی نیز به همراه درخواست به سرور ارسال کرد، کدمان در نهایت به صورت زیر خواهد بود:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | فرم ارسال درخواست ای جکس</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    direction:rtl;
    font-size:12px;
}
label{
    display:inline-block;
    width:50px;
}
</style>
<script type="text/javascript">
function ajaxRequest(){
    var xmlHttp;
    
    try{
        //Opera, Firefox, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e){
        //Internet Explorer
        try{
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                alert("متاسفانه مرورگر شما از ای جکس پشتیبانی نمی کند");
                return false;
            }
        }
    }
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4){
            document.myform.time.value = xmlHttp.responseText;
        }
    }
    xmlHttp.open("GET", "server-time.php", true);
    xmlHttp.send(null);    
}
</script>
</head>
<body>
<form name="myform" action="#">
<label for="username">نام: </label>
<input name="username" id="username" type="text" onchange="ajaxRequest();">
<br><br>
<label for="username">زمان: </label>
<input name="time" id="time" type="text">
</form>
<hr>
پس از نوشتن عبارت مورد نظر در فیلد نام، در فیلد زمان یا در یک فضای خالی صفحه وب کلیک کرده و اندکی منتظر بمانید، تابع ajaxRequest در رویداد onchange اجرا شده و پاسخ سرور در فیلد زمان نمایش داده می شود.
</body>
</html>
پیش نمایش
sectionدسته بندی: آموزش مقدماتی » Ajax
related مطالب بیشتر:
» ذخیره و نمایش اطلاعات فایل با ای جکس (Ajax) و PHP
» نمایش پیام در حال بارگذاری با ای جکس (Ajax)
» ارسال و دریافت اطلاعات با متد GET و POST در ای جکس (Ajax)
» فریم ورک های ای جکس (Ajax Frameworks)
» نمایش افکت fade in با ای جکس (Ajax)
commentنظرات (۲۷ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: رضا
۰۲:۴۷ ۱۳۹۴/۱۲/۲۴
سلام و با تشکر از مطالب مفیدتان و پاسخ های دقیق و راهگشای شما.
برای ساختن ربات تلگرام نیاز به برنامه نویسی سمت سرور و سپس برقراری ارتباط این برنامه با api تلگرام است. برای دریافت مسیج هایی که کاربران به ربات ارسال می کنند، دو روش وجود دارد: یکی از این دو روش، webhook است که بنا به الزام تلگرام می بایستی روی یک دامین دارای ssl قرار داشته باشد تا تلگرام خودش به محض اینکه کاربر مسیجی به ربات ارسال کرد آن مسیج را به صورت درخواست http به کدهای php صاحب ربات ارسال کند. اما من از هاست رایگان و زیردامنه استفاده می کنم و ssl ندارم پس مجبورم از روش دومی که تلگرام برای دریافت مسیج ها مشخص نموده یعنی getupdate استفاده کنم که باید از سمت سرور خودم یک درخواست http به api تلگرام ارسال کنیم تا در پاسخ، آخرین مسیج ها را بصورت json دریافت کنم. بازه زمانی تکرار این درخواستها بستگی به نیاز خودمان و نوع ربات مان دارد که طبیعتا اگر بخواهبم ربات به صورت همیشه آماده به کار باشد باید این بازه را کسری از ثانیه قرار دهیم. حال مشکل بنده این است که برای ارسال درخواست نمیدانم از چه راهکاری استفاده کنم تا از هاست رایگانم که امکان cron job هم ندارد بتوانم بدون نیاز به مرورگر، در طول شبانه روز در بازه های بسیار کوتاه درخواست ارسال کنم و پاسخ درخواست ها را به کدهای php خودم ارسال کنم تا در مسیر پردازش قرار بگیرند؟ کاری که فعلا کرده ام باز گذاشتن یک مرورگر و دائم به اینترنت وصل بودن و گذاشتن یک کد رفرش جاوا در صفحه است!! چطور میتوانم از هاست رایگانم به طور دائم مثلا هر ثانیه 10 بار درخواست ارسال کنم؟ (هر دو متد get و post و روش های زیر در پاس دادن پارامترها توسط api تلگرام پشتیبانی می شود:
URL query string
application/x-www-form-urlencoded
application/json (except for uploading files)
multipart/form-data (use to upload files)
پاسخ: 
تا آنجا که اطلاع داریم، متاسفانه در شرایط توضیح داده شده، راه حل کاربردی وجود ندارد!
نویسنده: صادق
۰۷:۰۳ ۱۳۹۶/۰۸/۰۹
سلام دوست عزیز، استفاده از ajax به شکل زیر مشکلی داره؟ لطفا کدا برام تشریح کنید؟ آیا از xml استفاده میشه؟
$.post('user_panel/codes.php', myArray:myArray},function(data){
$(".box2").html(data).show();
});
پاسخ: 
به نظر تکه کد درج شده مشکل Syntax دارد! فرم کلی درخواست Ajax با استفاده از جی کئوری به شکل زیر است:
array = [];
array[0] = 'value 1';
array[1] = 'value 2';
$.ajax({
type: "POST",
data: {array:array},
url: "index.php",
success: function(result){
$('#result').html(result);
}
});
همچنین می توانید پارامترهای آرایه را به صورت JSON ارسال کنید، لطفا در این زمینه در وب جستجو نمائید، در حال حاضر در خصوص جی کئوری آموزشی در سایت مطرح نمی شود.
نویسنده: امیرحسین
۰۳:۳۶ ۱۳۹۶/۱۲/۲۲
سلام استاد عزیزم امیدوارم حالتون خوب باشه
تشکر میکنم بابت تمام راهنمایی هایی که در حق بنده انجام دادید.
یه سوال و مشکل اساسی واسم در ایجکس پیش اومده و امیدوارم باز هم راهنماییم کنید...
من یک چت روم ساختم یک چت روم تستی برای تمرین کردن ترفند Comet در ایجکس که امیدوارم آموزش در این زمینه در وبگو قرار بگیرد خب من گفتم هر 20 ثانیه یک بار درخواستی با این عنوان "بدست آوردن پیام های جدید از دیتابیس" و قبل اینکه ایجکس رو سند کنم یک تایم اوت براش در نظر گرفتم که بیست ثانیه باشه (که اگه پاسخی از سرور دریافت نشد از درخواست صرف نظر شود) حالا در سمت سرور وارد یک حلقه بینهایت شدم البته با استفاده از تابع sleep که هر بار 1 ثانیه حلقه رو متوقف میکنه خب تو حلقه یک سلکت نوشتم که بره از دیتابیس پیام جدید رو بخونه که با فیلد last_update پیام های جدید رو بدست میارم که اگر پیام جدیدی بود اونو سرور میفرسته و حلقه رو متوقف میکنه اما اگه پیام جدیدی نبود حلقه تا 20 دفعه تکرار میشه و هربار یک سلکتی انجام میده در صورت وجود رکورد جدید ارسال میکنه و حلقه متوقف میشه و اگه تو این مدت 20 ثانیه هیچ پیامی نیومد حلقه باز هم متوقف میشه خب تا اینجا عالی پیش رفتم اما قسمت جاوا اسکریپت که داده رو دریافت میکنه هم گفتم اگه جیسون جدیدی سمت کلاینت (جاوا اسکریپت) اومد پیام جدید رو نمایش میده و با استفاده از این دستور اون تایم اوت رو متوقف میکنم
window.clearTimeout(mytimeout);
و مجدد فانکشن ایجکس رو فراخوانی میکنم و اینگونه میشه که اگه جوابی اومد اون بیست ثانیه تایم اوت متوقف میشه و درخواست جدیدی ارسال میگردد.
خب تا اینجا هم کاملا عالی پیش رفتم اما وقتی خواستم یه متد فانکشن جدیدی تحت عنوان ایجکس ایجاد کنم برای send_message خب کاربر هر پیامی که بفرسته این متد ارسال میشه البته بدون Comet چون نیازی به این کار نیست حالا یه مشکلی پیش میاد:
وقتی قراره فانکشن send_message فراخوانی بشه اول منتظر میمونه تا فانکشن قبلی که get_message بود و درحالت pending... قرار دارد درخواستش به جواب برسه بعد درخواست send_message ارسال میشه یعنی حتما باید درخواست قبلی ایجکس تموم بشه و درخواست جدید ارسال بشه و باز هم من اینجاشو تواناییشو دارم که درخواست قبلی ایجکس رو متوقف کنم با استفاده از
 xhr.abort();
خب حالا مجدد گفتم وقتی قراره send_message فراخوانی بشه درخواست قبلی متوقف بشه یا صرف نظر بشه بعد درخواست جدید ارسال بشه اما با این حال درخواست قبلی صرف نظر میشه اما درخواست جدید هم بعد 10 ثانیه ارسال میشه نمیدونم چرا !!! با این حال بازم وقفه وجود دارد ! شما هر راهی که به ذهنم رسید انجام دادم که نهایت به شما روی اوردم حتی فایل قسمت comet با فایل ajax not comet رو جدا کردم بازم وقفه در زمان سند مسیج وجود دارد دلیل چیست ؟؟
اینم کد ها
توجه من از دیتابیس استفاده نکردم و از فایل ها در این زمینه استفاده کردم و برنامه رو در localhost xamp اجرا میکنم و کد هایی که فرستادم کامل نیستند فقط بخش های لازم رو فرستادم با تشکر
حذف شد
و اینم کد های پی اچ پی سمت سرور قسمت get_message
حذف شد
پاسخ: 
خطایابی کدهایی که تکمیل شده اند معمولا نیاز به تست و آزمایش و خطای واقعی دارد، یعنی کل برنامه باید قابل اجرا باشد تا بتوانیم قدم به قدم مشکلات احتمالی را آزمایش کرده و اشکالات را برطرف کنیم، متاسفانه علی رغم توضیح کامل شما امکان تست کدهایتان به دلیل ناقص بودن فراهم نیست و صرفا به صورت اجمالی بررسی شدند، نکته اول اینکه روشی که در سمت سرور انتخاب کرده اید توصیه نمی شود، چون ایجاد حلقه بینهایت و استفاده از sleep هر دو به کاهش عملکرد سرور منجر می شوند، اینگونه سیستم ها که هر لحظه میزان زیادی درخواست را دریافت و پاسخ را ارسال می کنند باید در کمترین زمان ممکن اجرا شوند و از حداقل منابع سرور استفاده کنند، لذا توصیه ما این است در الگوریتم های خود تجدید نظر نمائید و به محض دریافت هر درخواست از سمت کاربر پاسخ را ارسال کنید تا درخواست بسته شود و منابع سرور آزاد شوند، در مورد بحث سمت کاربر سعی کنید قبل از اینکه کدهایتان تکمیل شود اشکال کار را با روش های مختلف پیدا کنید، به طور مثال خروجی را با alert چاپ کنید، توابع را پس و پیش کنید و هر روشی که ممکن است به پیدا کردن علت مشکل کمک کند، در خطایابی برنامه های رویداد محور مانند جاوا اسکریپت و ای جکس باید دقیقا روند ارسال یک درخواست را دنبال کنیم و مرحله به مرحله اتفاقاتی که رخ می دهند را زیر ذره بین داشته باشیم، در صورت تمایل برنامه را روی سروری آنلاین قرار دهید تا امکان تست بهتر وجود داشته باشد.
نویسنده: امیرحسین
۱۸:۰۰ ۱۳۹۶/۱۲/۲۲
سلام
انگار شما تکنیک comet در ایجکس رو اطلاعی ندارید زیاد چون من در هر آموزشی که دیدم تکنیک comet در ایجکس بدون حلقه بینهایت و sleep امکان پذیر نیست! درواقع واسه همین خاطر هست که comet شکل گرفته کامت در واقع یه تکنیکی از ایجکس هست که به نظر میاد سرور یک درخواستی رو به مرورگر میفرسته ولی درواقع خود مرورگر درخواست میفرسته و منتظر میمونه تا 20 ثانیه که سرور درخواست بفرسته و نهایت ثانیه آخر یعنی به 20 ثانیه رسید یک درخواست خالی میفرسته و مرورگر میفهمه درخواست خوالی اومده و دوباره درخواست میفرسته و منتظر میمونه و به محض درخواست درست دوباره تایم اوت رو غیرفعال میکنه و مجدد درخواست میفرسته که اینگونه به نظر میاد سرور داره یه درخواستی رو میفرسته و به محض ثبت رکورد جدید در دیتابیس دریافت میشه
اینم قسمت پروژه لطفا کدها رو بررسی کنید مشکل رو ببینید باور کنید من 3 روزه همه خطاها رو دیدم و از من دیگه بر نیومد
حذف شد
نیازی به دیتابیس نداره این پروژه میتونید راحت در localhost اجرا کنید
اینم پروژه در هاست
حذف شد
پاسخ: 
متوجه هستیم از چه تکنیکی می خواهید استفاده کنید منظور این بود که در حال حاضر تا آنجا که اطلاع داریم PHP زبان مناسبی برای اعمال این شیوه نیست و برای برنامه ای مانند چت روم این روش باعث مصرف منابع سرور و کاهش عملکرد آن خواهد شد و شاید در تعداد کاربر بالا سرور کلا از کار بیفتد، برای مطالعه بیشتر عبارت "COMET PHP" را در گوگل جستجو کنید!
در PHP بهتر است از شیوه هایی استفاده کنید که درخواست به محض دریافت، اجرا، پاسخ برگردانده و اتصال پایان یابد، به هر صورت کدهایتان را با توجه به زمان محدودی که در اختیار داریم بررسی کردیم، آرگیومنت سوم متد open را به صورت true قرار دهید تا ارسال درخواست ای جکس جدید منوط به دریافت پاسخ درخواست قبلی نباشد، بحث دیگر استفاده از setTimeout و ایجاد وقفه است که باید دقت داشته باشید، متاسفانه اگر مقدار این متد را 0 قرار دهیم کد با مشکل روبرو می شود که پیدا کردن علت و رفع آن به زمان بیشتری نیاز دارد و به جهت محدودیت فرصت متاسفانه برایمان مقدور نیست! در کل در سیستم های چت معمولا با هر درخواست، پیام بلافاصله به سرور ارسال و بلافاصله نیز پاسخ برگردانده می شود، در حالتی که کاربر پیامی نمی فرستد می توانید به فرض هر 5 ثانیه با ای جکس وضعیت سرور را برای وجود پیام جدید چک کنید.
نویسنده: مریم
۲۱:۱۷ ۱۳۹۷/۰۲/۰۹
سلام خسته نباشید .
من در ابتدا به مشکل برخوردم و هر کدی که از ajax می نویسم یا از سایت مختلف کپی میکنم اجرا نمیشه ... با چند مرور گر مختلف امتحان کردم و آخرین ورژن wamp نصب کردم .
باز هم اجرا نمیشه ... !
پاسخ: 
ابتدا باید مطمئن شوید برنامه سرور مجازی به درستی عمل کند، برای این منظور یک فایل فرضی PHP در دایرکتوری www قرار داده و آدرس را به صورت نمونه زیر در مرورگر فراخوانی کنید:
localhost/dir/file.php
اگر در اجرای فایل مشکلی وجود نداشت باید سورس های Ajax را مرحله به مرحله بررسی کنید، در صورت تمایل از کدها اسکرین شات تهیه نمائید تا امکان بررسی بیشتر فراهم باشد.
نویسنده: مریم
۰۸:۲۴ ۱۳۹۸/۰۲/۰۷
سلام ببخشید من برنامه ای میخواستم که هر لحظه اطلاعات جدید از دیتابیس بگیره و نمایش بده بدون کلیک یا بارگذاری مجدد
سرچ کردم میخواستم با ajax این کار انجام بدم ولی بیشتر کدها مربوط به رویداد مثل کلیک و لود شدن صفحه بود!!!
ممنون میشم راهنماییم کنید که چه جوری میتونم چنین کدی بنویسم
پاسخ: 
Ajax مبتنی بر جاوا اسکریپت است و قاعدتا بدون پردازش کدها در مرورگر نمی توانیم به نحو دیگری برنامه را اجرا کنیم، در مورد حالت مد نظر شما می توانید برای اولین بار با بارگذاری صفحه از رویداد onload استفاده و در دفعات بعدی مجددا تابع را با متدهای جاوا اسکریپتی نظیر setTimeout و بدون دخالت کاربر در فواصل زمانی مد نظر فراخوانی کنید.
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
نویسنده: یزدخواستی
۱۶:۰۹ ۱۳۹۸/۰۳/۰۱
سلام قطعه برنامه ای نوشتم که در آن از متد setInterval استفاده کردم و داخل آن از طریق AJAX یک فایل متنی خوانده و محاسباتی روی آن انجام داده و دوباره با تاخیر 200 میلی ثانیه دوباره فایل خوانده شده و ... مشکی که دارم این است که بعد از مدتی بروزر من هنگ می کند اما اگر تاخیر را بیشتر کنم دیرتر هنگ می کند راهنمائی بفرمائید.
setInterval(function(){ 
(برنامه Ajax )
}, 200);
پاسخ: 
احتمالا توابع setInterval در حال اجرای برنامه با هم تداخل پیدا می کنند، برای اطمینان تابع را به متغیر نسبت دهید و پیش از اجرای setInterval جدید عملکرد مورد قبلی را با clearInterval خنثی کنید، مثال:
var timer = setInterval(function(){ 
(برنامه Ajax )
}, 200);

clearInterval(timer);
ساختار کدهای برنامه مشخص نیست اما طبق توضیحات، clearInterval باید در ابتدای قسمت Ajax درج شود، در صورت دریافت پاسخ 200 (یا هر نتیجه دیگری) در ای جکس می توانید تابع را مجدد فراخوانی کنید.
نکته: با درج دستور alert و خروجی فرضی می توانید روند اجرای تابع را خطایابی کنید.
نویسنده: یزدخواستی
۰۷:۲۹ ۱۳۹۸/۰۳/۰۲
با سلام مجدد برنامه من روي هاست قرار دارد و در آن فقط از يک setInterval استفاده شده و تمام کدهاي برنامه داخل اين تابع قرار دارد که بعد از اجرا (بسته به زماني که به تابع setInterval مي دهم يک ثانيه يا چند ثانيه بعد) فقط ورود به هاست و کار با برنامه هاي هاست دچار مشکل ميشود بطوريکه مجبور به ريست کامپيوتر و مودم واي فاي و ورود مجدد به هاست مي شوم ولي کار با کامپيوتر و ورود به سايت هاي ديگر مشکلي ندارد
راهنمائي بفرمائيد
لطفا کدهای زیر را اجرا کنید:
1- محتویات فایل برنامه جاوااسکریپت:
حذف شد
2- محتویات فایل php (readfile.php):
حذف شد
3- و فایل read.txt:
حذف شد
(لازم بذکر است محتویات این فایل متنی مرتب در حال تغییر است.)
پاسخ: 
با توجه به فرآیندهایی که از برنامه مورد انتظار است میزان زمانی که برای setInterval در نظر گرفته شده بسیار ناچیز است و هر 1 دهم ثانیه (100 میلی ثانیه) بی وقفه یک درخواست به سرور ارسال و حجم زیاد درخواست ها باعث اختلال عملکرد سرور، بلاک موقت IP یا کند شدن مرورگر می شود، سعی کنید مدت زمان بیشتر (به فرض 15000 میلی ثانیه = 15 ثانیه) بین هر فراخوانی setInterval فاصله وجود داشته باشد.
نکته: setInterval به خودی خود یک تابع است اما می تواند تا زمان باز بودن پنجره مرورگر در مدت زمان تعیین شده در دور تکرار به تعداد بی شماری اجرا شود، منظور از تداخل توابع کدهایی است که در هر دور setInterval در حال اجرا هستند.
نویسنده: احمد
۰۱:۳۳ ۱۳۹۹/۰۶/۰۳
با عرض سلام و خسته نباشید ببخشید یه مشکل دارم اینکه یه تگ دارم بهش کلاس دادم و میخوام از طریق ایجکس وقتی روش کلیک میکنم از طریق متد پست ارسال بشه به صفحه دیگه و اونجا دریافتش کنم و در دیتا ذخیره کنم ولی هر چقدر روی تگ کلیک می کنم بعدا در دیتا چیزی ذخیره نمیشه بی زحمت میشه بگید مشکل از کجاست که ایجکس جواب نمیده . این دستورم هست
<script>
$(document).ready(function(e) {
var id=0;
$(".btn-product").click(function () {
id=$(this).attr('id');
$.ajax({
type:'post',
url:"sabad.php",
data:{idmahsool:id}
})
.done(function (msg) {
alert(msg);
})
})
})
</script>
پاسخ: 
احتمالا تابع زمانی اجرا می شود که تگ HTML هنوز در صفحه پردازش نشده است و کد قسمت script بالاتر از تگ در صفحه درج شده است!، در این صورت کد را به شکل بالا با افزودن document.ready ویرایش و امتحان کنید، با این تکه کد مفسر جی کئوری تابع را پس از بارگذاری کامل صفحه و در دسترس بودن تمام تگ ها اجرا می کند.
نویسنده: احمد
۲۳:۳۴ ۱۳۹۹/۰۶/۱۳
با سلام ببخشید طریقه استفاده از دستور else در ایجکس به چه صورت هست ایا باید دوباره فانکشن دان رو در هنگام شرط گذاشتن بزارم. وقتی میزارم دستورم عمل نمیکنه مشکل از کجاست با تشکر از زحمات شما
این دستوراتم هست از طریق ایجکس ارسال کردم به صفحه دیگر تا عملیات اینسرت رو انجام بده ولی یه شرط گذاشتم بین ایجکس.
else {
$.ajax({
type: 'post',
url: "sabad.php",
data: {idmahsool: id}
})
.done(function (msg) {
tedad=$(".dropdown-cart-products #"+id+" .cart-product-qty ").html();
alert(tedad);
})
}
})
پاسخ: 
در کل استفاده از دستورات شرطی برای ای جکس تفاوت خاصی با حالت عادی ندارد، هر چیزی که داخل کاراکترهای {} باشد با برقرار بودن شرط اجرا می شود منتها باید Syntax و ارتباط توابع ای جکس را رعایت کنید، به فرض استفاده از else باید بعد از یک if باشد و بدون وجود دستور شرطی if دستور else معنی ندارد، یا چینش کدها در علامت های {} باید با دقت صورت گیرد و هر بلاکی در جای درست باز و بسته شود و خطای نگارشی نداشته باشد، یا بسته به هدف شرط را می توانید در قسمت down داشته باشید و متناسب با پاسخ سرور یک سری کد اجرا شود.
نکته: برای خطایابی کدها می توانید در هنگام اجرا در مرورگر دکمه F12 را بزنید و از امکانات قسمت Console استفاده کنید.
نویسنده: احمد
۱۳:۳۰ ۱۳۹۹/۰۶/۱۴
با عرض سلام مجدد و خسته نباشید ببخشید طبق فرمایش شما من قبل از دستور else دستور if را نوشته بودم تا جایی که اطلاع دارم بعد از هر دستور ایجکس یه دستور دان باید قرار بگیره این قسمت رو مشکل دارم که در دستور else چطوری باید دوباره ایجکس و دستور دان رو بزارم. کل دستوراتم به این صورت هست که تعداد محصول رو از سبدم با دستور گرفتم اگر تعداد محصول در سبد 1 بود یکی بهش اضافه کن ولی اگر داخل سبد محصول نبود یه محصول اضافه کن من الان داخل دستور else مشکل دارم چطوری دستوراتش رو بنویسم. کل دستوراتم به صورت زیر هست ممنون تشکر از شما .
<script>
var id=0;
$(".product .product-media .btn-product ").click(function () {
var length='';
id=$(this).attr('id');
length=$(".product #"+id+"").length;
$.ajax({
type:'post',
url:"sabad.php",
data:{idmahsool:id}
})
.done(function (msg) {
if (length==1){
var tedad=0;
tedad=$(".dropdown-cart-products #"+id+" .cart-product-qty ").html();
tedad=parseInt(tedad);
tedad=tedad+1;
$(".dropdown-cart-products #"+id+" .cart-product-qty").html(tedad);
}
else {
}
})
})
</script>
پاسخ: 
به نظر مشکل ارتباطی به استفاده از شرط در ای جکس ندارد بلکه ایراد از ساختاری است که نوشته اید، در این ساختار آی دی را دخیل کرده اید و این آی دی ظاهرا از دکمه موجود در قسمت تگ های HTML دریافت می شود، length را بر اساس وجود این المنت بدست می آورید اما در انتهای کدها شرط else نوشته اید که اگر length برابر 1 نبود... length زمانی برابر 1 نیست که دکمه در صفحه وجود نداشته باشد از طرفی اگر دکمه وجود نداشته باشد قسمت اول کدها که مبتنی بر کلیک بر روی دکمه است عملا اجرا نمی شود! اگر هم دکمه باشد و آی دی آن 0 باشد باز length مقدار 1 (وجود المنت) را بر می گرداند و عملا قسمت else هیچ وقت برقرار نیست! این ساختار را باید بازنویسی کنید.
نویسنده: احمد
۱۳:۱۹ ۱۳۹۹/۰۶/۱۵
با عرض سلام ببخشید من با دستور append میخوام یه سطری رو به سبدم اضافه کنم ولی چطوری باید داخل append تگ ها رو بنویسم البته مقادیری رو که میخوام رو با توسط دستور find گرفتمشون که میخوام در بین تگ هام داخل دستور append استفاده کنم . ولی جواب نمیده عمل نمیکنه و سطر رو اضاف نمیکنه به سبدم . و سوال دیگه اینکه واسه انتخاب سلکتور باید تگی رو انتخاب کنیم که بقیه تگ ها درونش قرار گرفته باشن کامل و یا فرقی نداره نمونه کدهام رو گذاشتم . ممنون از زحمات شما تشکر
$(".div-class").append('<li class="product"><div id=\'  +id+ \' class="product-cart-details"><h4 class="product-title"><a href="product.html"><span id="title">\'  +title+  \'</span></a></h4><span class="cart-product-info"><span class="cart-product-qty">'  +tedad+ ' </span><span id="gheymat"> ' + gheymat+  '</span></span></div><figure class="product-image-container"><a href="product.html" class="product-image"><img src="\'+img+\'" alt="محصول"></a></figure><a href="#" class="btn-remove" title="حذف محصول"><i class="icon-close"></i></a></li>')
پاسخ: 
مشکل کدها وجود شکستگی (Line Break) در متن داخل متد append است که در بالا اصلاح شد، بهتر است کدهایتان را در یک ویرایشگر حرفه ای مانند PHP Storm بنویسید تا خطاهای Syntax را نمایش دهد، در مورد سلکتور هر تگی در HTML DOM با سلکتورهای موجود به فرض آی دی یا کلاس و... می تواند به عنوان تگ هدف انتخاب شود و این بستگی به نیاز برنامه نویسی دارد.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





4 × 2
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form مهسا
در:
سلام و خسته نباشید مشکلی برای وبلاگ من پیش اومده موقع ورود بهم پیام میده وبلاگ داره بروز رسانی میشه و بعدا وارد وبلاگ شوید...
۱۳۹۹/۰۷/۰۸

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

form mahtab
در:
سلام خسته نباشین ببخشید چرا بلاگفا باز نمیکنه ؟؟؟ میرم مدیریت وبلاگ نه تو بروز شده ها وبی هستم نه هم که...
۱۳۹۹/۰۷/۰۷

form جواد
در:
سلام و عرض ادب. سایت من هک شده و یک کد ریدایرکت تو دیتابیس هاستم بارگزاری شده که آخر همه پست ها تو...
۱۳۹۹/۰۷/۰۷

form نبی
در:
‏asc و desc رو جابجا نوشتی
۱۳۹۹/۰۷/۰۴

form ساناز محمدی
در:
سلام مرسی از کدی که گذاشتید ♥
۱۳۹۹/۰۷/۰۳

form mahtab
در:
سلام خسته نباشین ببخشید میخواستم بپرسم که چجوری میتونیم یه کلیپ رو از کامپیوتر از انیستا دانلود کنیم ؟؟ اها اینم بگم...
۱۳۹۹/۰۷/۰۲

form سعید
در:
سلام دستتون درد نکنه از پروژه شما استفاده کردم فقط یه مشکل اگه در یک صفحه دو تا لیست کشویی داشته باشیم چطوری...
۱۳۹۹/۰۷/۰۱

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

form میثم صدیق
در:
سلام برای اضافه کردن یک المان با (append) من یک کلید گذاشتم اضافه میشه ولی با هر بار کلیک کردن اضافه میشود اگر بخواییم یک...
۱۳۹۹/۰۶/۲۹

form amin
در:
سلام و خسته نباشید می خواستم Slash ( / ) رو به صورت اتوماتیک از تمامی URL ها حذف کنم البته با کمک htaccess...
۱۳۹۹/۰۶/۲۵

form محمد
در:
سلام وقت بخیر من یه همچین کدی دارم میشه لطفا راهنمایی کنید مشکلش چیه؟ سپاسگزارم
۱۳۹۹/۰۶/۲۴

form سروش
در:
سلام . من اطلاعات را از دیتابیس دریافت میکنم و در جدول میبینم . میخوام مثلا 6 مورد آخر را در یک ردیف ببینم و...
۱۳۹۹/۰۶/۲۳

form Behdad kanani
در:
سلام اصلا نمی شه اینکارو انجام داد
۱۳۹۹/۰۶/۲۲

form جعفری
در:
سلام قبل از تبدیل تاریخ نوشتید مثلا خب این مقدار تاریخ برای من در دیتابیس در جدولی بنام startedtm بصورت یونیکس...
۱۳۹۹/۰۶/۲۰
form احمد
در:
با عرض سلام و خسته نباشید ببخشید برای فایل دانلودی باید از چه دستوری استفاده کنم فایل با پسوند pdf رو میخوام بزارم اگر امکانش...
۱۳۹۹/۰۶/۲۰
form شیما
در:
سلام آیا وقتی در قسمت وبلاگ دوستان وبلاگی رو ثبت میکنیم صاحب وبلاگ با استفاده از برنامه های خاصی میتونه متوجه بشه ؟
۱۳۹۹/۰۶/۱۹
form mahtab
در:
سلام خسته نباشین من نمیدونم چرا مدیریت وبم برام باز میشه اما وقتی میزنم مشاهده وب رو میزنم نمیاره واسم فقط امیدوارم هک...
۱۳۹۹/۰۶/۱۸
form ساناز محمدی
در:
سلام دوباره این ساب دامین بنده هست اگر یکی از مطالب را مشاهده کنید هر محصولی که ارسال شده داخل از طریق مدیریت یک...
۱۳۹۹/۰۶/۱۷
form محسن
در:
سلام و عرض ادب مجدد کد زیر هم کار نمیکنه مشکل چی میتونه باشه ؟!
۱۳۹۹/۰۶/۱۶
form ساناز محمدي
در:
سلام بنده یه ساب دامین دارم با دامنه شخصی حالا داخل این ساب دامین طرف آدرس سایت خودش رو داخل ساب دامین بنده میذاره مثلآ...
۱۳۹۹/۰۶/۱۶
form محسن
در:
سلام و عرض ادب لطفا راهنمایی کنید مشکل کد زیر چیه
۱۳۹۹/۰۶/۱۶
form احمد
در:
با عرض سلام ببخشید من با دستور append میخوام یه سطری رو به سبدم اضافه کنم ولی چطوری باید داخل append تگ ها رو بنویسم...
۱۳۹۹/۰۶/۱۵
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید طبق فرمایش شما من قبل از دستور else دستور if را نوشته بودم تا جایی که اطلاع...
۱۳۹۹/۰۶/۱۴
form احمد
در:
با سلام ببخشید طریقه استفاده از دستور else در ایجکس به چه صورت هست ایا باید دوباره فانکشن دان رو در هنگام شرط گذاشتن بزارم....
۱۳۹۹/۰۶/۱۳
form مجتهد
در:
سلام ابتدائا از سایت مفیدتون تشکر می کنم. من خیلی از آموزه هام رو از سایت شما یاد گرفتم. یه سوال دارم...
۱۳۹۹/۰۶/۱۳
form محمد حسین
در:
سلام لینک های من وقتی کلیک شوند اررور 404 تولید میکنند. علت چیست؟
۱۳۹۹/۰۶/۱۱
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.