foranyone
Well-Known Member
با سلام خدمت تمامی دوستان گلم ، من قبلا خیلی با جاوا اسکریپت و فریم ورک های آن کار کردم ولی ایجکس بلد نیستم!
امروز یه مثال ساده از اون رو بررسی کردم و درکی رو که از کد ها داشتم اینجا براتون نوشتم لطفا هرکجای کار اشتباه فکر می کنم راهنماییم کنین.
با تشکر
درک من :
و این هم قلب ایجکس:
با تشکر
درک من :
[FONT="]در سند [/FONT]HTML [FONT="] که کاربر باید اطلاعات را در آن وارد نماید [/FONT]ajax.js [FONT="] را [/FONT]include [FONT="] می کنیم[/FONT]:[FONT="] فایل [/FONT]ajax.js [FONT="] حاوی 2 تابع بسیار مهم با عناوین [/FONT]DoCallback[FONT="] (با آرگومان [/FONT]data[FONT="]) و [/FONT] [FONT="] [/FONT]processReqChange[FONT="] (بدون آرگومان) می باشند. تابع اول وظیفه ارسال اطلاعات را دارد و تابع دوم به محض پاسخ از سرور اجرا میشود و تابعی را که باید اجرا شود مشخص می کند.[/FONT][FONT="]فرم خود را طراحی میکنیم و برای تمامی اطلاعاتی که قرار است ارسال شوند [/FONT]ID [FONT="] و [/FONT]name[FONT="] در نظر میگیریم . این [/FONT]name [FONT="] ها قرار است در فایل [/FONT]php [FONT="] توسط [/FONT]$_post [FONT="] پردازش شوند. [/FONT][FONT="]نکته ی مهم این است که فرم نباید [/FONT]submit [FONT="] شود ، به عبارتی بهتر است از [/FONT]event [FONT="] هایی مثل [/FONT]onclick [FONT="] برای پردازش فرم استفاده نمائیم.[/FONT][FONT="]یک [/FONT]div [FONT="] هم طراحی می کنیم و [/FONT]display [FONT="]ا آنرا [/FONT]none [FONT="] میکنیم و تصویری را که دوست دارم موقع ارتباط با سرور لود شود در آن قرار می دهیم این [/FONT]Div [FONT="] هم باید [/FONT]id [FONT="] داشته باشد ، تا بتوانیم بعدا [/FONT]display [FONT="] آنرا [/FONT]block [FONT="] کنیم[/FONT][FONT="]موقع اجرای [/FONT]event [FONT="]، [/FONT]onclick [FONT="] باید یک تابع اجرا شود ، این تابع جاوا اسکریپتی واسطی بین فرم و توابع [/FONT]ajax [FONT="] می باشد که اطلاعات را دریافت کرده و پردازش ها ی خاص یا گاها تغیرات خاص را انجام داده و اطلاعات درست را به [/FONT]DoCallbak [FONT="] ارسال خواهد نمود. این تابع را از این به بعد تابع واسط می خوانیم.[/FONT][FONT="]این توابع باید قبل از [/FONT]include [FONT="]کردن فایل [/FONT]ajax.js [FONT="] نوشته شوند زیرا شاید در آنها از متغیرهایی استفاده نمائیم که توسط توابع [/FONT]ajax [FONT="] مورد استفاده قرار گیرند.[/FONT][FONT="]همچنین قبل از این تابع واسط باید متغیری با نام [/FONT]what [FONT="] با [/FONT]LoginStatus(req.responseText[FONT="]) مقداردهی شود تا هر وقت سرور خواست جواب ارسال کند این تابع به صورت هوشمند فراخوانی شوده و پاسخ مناسبی را صادر کند (نام این متغیر می تواند غیر از [/FONT]what[FONT="] نام دیگری باشد ولی حتما باید داخل تابع [/FONT]processReqChange[FONT="] نیز از همان نام استفاده شود )[/FONT][FONT="]، داخل تابع واسط باید مشخص شود که :[/FONT]·[FONT="] [/FONT][FONT="]درخواست ها باید به کدام فایل ارسال شود که باید داخل متغیری به نام [/FONT]url [FONT="] ذخیره شود . این نام نیز به شرطی می تواند نامی جز [/FONT]url [FONT="] باشد که در تابع [/FONT]DoCallback[FONT="] در قسمت [/FONT]reg.open [FONT="] از همان نام استفاده شود .[/FONT]·[FONT="] [/FONT][FONT="]قسمتس که قرار است تصویر [/FONT]loading [FONT="] را نمایش دهد ، باید[/FONT] [FONT="] به صورت [/FONT]object [FONT="] توسط [/FONT]getelElementById [FONT="] خوانده شده و در متغیری به نام [/FONT]loadBar[FONT="] (یا هر نام دیگر) ذخیره شود. همچنین باید [/FONT]object [FONT="] ، [/FONT]message [FONT="] (یا هر نام دیگر ) نیز که حاوی نتایج پردازش خواهد بود ، توسط تابع فوق خوانده شود در انهای تابع بدون توجه به نوع [/FONT]method [FONT="] فرم [/FONT] [FONT="]اطلاعات باید به صورت زوج مقدار [/FONT]= [FONT="] [/FONT]value [FONT="] که توسط [/FONT]& [FONT="] از هم جدا شده اند ، به تابع [/FONT]DoCallback [FONT="] ارسال شوند حال اطلاعات به سرور ارسال شده است .اطلاعات در ظاهر به صورت [/FONT]GET [FONT="] ارسال شده است ولی چیزی که مهم است متدی است برای فرم تعین کرده ایم که اگر از [/FONT]method [FONT="] پست استفاده کرده باشیم حتما باید با [/FONT]$_POST [FONT="] خوانده شوند .[/FONT][FONT="]وقت آن رسیده است که ما منتظر بمانیم پس باید تصویر [/FONT]loading [FONT="] برای کاربر نمایش داده شود پس بعد از فراخوانی [/FONT]Callback [FONT="] باید تصویر [/FONT]loading [FONT="] را با [/FONT]id [FONT="] انتخاب کنیم و [/FONT]style [FONT="] آنرا تغیر دهیم تا دیده شود.[/FONT][FONT="] [/FONT][FONT="]حال سرور جوابی را به کلاینت ارسال می کند که داخل متغیر [/FONT]reg.responseText [FONT="] ذخیره شده است. این متغیر در حقیقت نتیجه ی حاصل از اجرای فایل [/FONT]php [FONT="] می باشد که به جای اینکه مستقیم به خروجی برود و صفحه رفرش شود ، نتایج را به تابع مناسب جاوا اسکریپتی تحویل می دهد. حال ما باید نتایج حاصله را داخل یکی از [/FONT]div [FONT="] هایی که قبلا در نظر گرفته ایم مثل [/FONT]message [FONT="] نمایش دهیم ، همچنین باید لودینگ را حذف کنیم.[/FONT]
و این هم قلب ایجکس:
کد:
function DoCallback(data) {
alert(data);
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open('POST', url, true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(data);
// branch for IE/Windows ActiveX version
}
else if (window.ActiveXObject) {
req = new ActiveXObject('Microsoft.XMLHTTP');
if (req) {
req.onreadystatechange = processReqChange;
req.open('POST', url, true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(data);
}
}
}
function processReqChange() {
// only if req shows 'loaded'
if (req.readyState == 4) {
// only if 'OK'
if (req.status == 200) {
eval(what);
} else {
alert('مشكل در برقراري ارتباط با سرور: ' + req.responseText);
}
}
} // JavaScript Document