eshpilen
شنبه 02 مرداد 1389, 14:04 عصر
var XMLHttpRequestObject = false;
این متغییر رو خارج از تمام توابع رزرو کنیم تا گلوبال باشه. یعنی در تمام توابع بهش دسترسی داشته باشیم و مشترک بین تمام کدها باشه. ضمنا مقدارش رو ابتدا برابر false قرار میدیم تا بعدا بتونیم با یک if چک کنیم که آیا شیء ای با موفقیت ایجاد شده و بهش اختصاص داده شده یا نه (قرار یک شیء HttpRequest در اون ذخیره بشه)
if (window.XMLHttpRequest)
اگر مرورگر از شیء XMLHttpRequest که برای اجاکس هست پشتیبانی میکنه...
XMLHttpRequestObject = new XMLHttpRequest();
پس یدونه از این شیء ایجاد کن و به اون متغییر گلوبال ما اختصاص بده.
} else if (window.ActiveXObject) {
وگرنه اگر مرورگر احتمالا از شیء ActiveXObject پشتیبانی میکنه (اینترنت اکسپلورر)
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
یدونه از اون رو ایجاد کن.
function getData(dataSource, divID)
تابعی تعریف میکنیم که آدرس یک اسکریپت php رو بگیره و یک آیدی یکی از عناصر صفحه رو.
if(XMLHttpRequestObject)
برای اجرای این تابع میگیم که اگر شیء اجاکس ما ایجاد شده بود (مرورگر ساپورت میکنه) بقیهء عملیات رو انجام بده. وگرنه هیچ کاری انجام نشه.
var obj = document.getElementById(divID);
با این کد شیء html ای رو که آیدی مورد نظر رو داره نشون میکنیم (تا بعدا پاسخی رو که از اسکریپت php دریافت کردیم در اون درج کنیم).
XMLHttpRequestObject.open("GET", dataSource);
حالا یه درخواست از نوع GET به اون آدرس که به این تابع پاس شده (data.php) تنظیم میکنیم.
درخواست GET همون نوعی هست که وقتی شما آدرس رو بصورت مستقیم در کادر آدرس مرورگر وارد میکنید یا وقتی روی یک لینک کلیک میکنید، ارسال میشه.
درخواست POST اون نوعی هست که وقتی فرمی رو با کلیک روی دکمهء submit ارسال میکنید انجام میشه.
اینجا ما برای سادگی و اختصار و صرفا نمایش اصول کارکرد اجاکس از روش استاندارد و سادهء GET استفاده کردیم.
حالا که ما درخواست GET رو به سرور ارسال کردیم، این عملیات در پشت پرده انجام میشه. یعنی مثل اینکه شما اون آدرس رو در مرورگر تایپ کرده باشی و اینتر رو زده باشی. اما تمام این عملیات بصورت نامشهود در پشت پرده انجام میشه. و متنی که از سرور برمیگرده در پنجرهء مرورگر نمایش داده نمیشن، بلکه توسط تابعی که تعیین میکنیم دریافت میشن.
XMLHttpRequestObject.onreadystatechange = function()
{
این خط یک تابع رو بصورت درجا تعریف میکنه که نتایج دریافت شده حاصل از درخواست AJAX رو بخونه و استفاده کنه. البته این تابع در مراحل مختلفی از عملیات اجرا میشه.
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
بنابراین چک میکنیم که انجام عملیات در مرحلهء مناسب باشه (وضعیت 4 که به معنای دریافت کامل پاسخ درخواست از سرور و به معنای پایان کامل عملیات پشت صحنه هست) و بعدش چک میکنیم که جواب سرور هم از نوع جواب موفقیت آمیز (که کدش 200 هست) بوده باشه. کد دیگری، 404 مثلا یعنی که فایل مورد نظر (data.php) روی سرور وجود نداشته و غیره.
obj.innerHTML = XMLHttpRequestObject.responseText;
حالا میتونیم با خیال راحت متن دریافت شده از درخواست AJAX رو بعنوان محتویات شیء html خودمون تعیین کنیم تا در صفحه نمایش داده بشه.
XMLHttpRequestObject.send(null);
این خط عملیات ارسال درخواست و دریافت نتایج رو شروع میکنه (تاحالا عملا چیزی استارت نشده بود و فقط تنظیمات و تعریفهای مربوطه رو انجام داده بودیم).
اگر دیتایی در بدنهء درخواست ارسالی داشتیم که میخواستیم ارسال کنیم (در درخواست های POST) اون دیتا رو بعنوان پارامتر این متد پاس میکردیم. ولی الان درخواست ما از نوع GET هست و دیتایی برای ارسال نداره که بتونیم بعنوان آرگومان این تابع قرار بدیم و بنابراین از null به معنی هیچ بعنوان آرگومان استفاده کردیم.
<input type = "button" value = "Display Message"
onclick = "getData('data.php', 'targetDiv')">
ما این دکمه رو تعیین میکنیم تا با فشار دادنش تابع اجاکس ما با پارامترهای مورد نظر فراخوانی بشه.
<div id="targetDiv">
این عنصر html و در واقع ظرف و جای رزروی در صفحهء ما هست که پاسخ دریافت شده از درخواست AJAX در اونجا درج خواهد شد.
-------------
این توضیحات رو تاجایی که دانش و تجربه داشتم گفتم و ممکنه زیاد دقیق و کامل نباشه یا اشتباهی توش باشه. ولی تاجایی که من میدونستم و الان هم سرکی به منابع زدم باید درست باشه و کلیتش هم همینه.
ولی کار کردن با AJAX بخصوص که بدون استفاده از فریمورک باشه، نکات فنی و امنیتی بیشتری داره که از حوصله این تاپیک خارجه و فرد باید دانش و مهارت لازم رو داشته باشه.
این توضیحات فقط ساختار کلی رو نشون میداد و یک نمونهء عملی خیلی ساده و مختصر.
ضمنا معمولا کسی خط به خط کد توضیح نمیده و این انتظار بیجایی هست.
باید در هر مورد خودت تحقیق کنی و نهایتا اون قطعه کدهای محدودی رو که مشکل داری بپرسی، یا مهمترین و اساسی ترین کدها و مواردی رو که از همه بیشتر برات مبهم هستن.
بهرحال من پاسخت رو دادم چون آدم گاهی احساس میکنه باید کمک و انجام وظیفه ای درحد تجربه و موفقیت خودش به دیگران بکنه.
دعا فراموش نشه :لبخند: