استفاده از ajax با جاوا اسکریپت
استفاده از AJAX با جاوا اسکریپت
برای ارسال یک درخواست AJAX روش های متفاوتی وجود دارد. اولین حالت ممکن استفاده از اشیاء جاوا اسکریپتی است.
مزیت این روش این است که نیاز به هیچ کتابخانه اضافه تری نخواهید داشت! اما شاید مقداری سخت تر و گیج کننده تر نسبت به سایر روش های معمول باشد.
قطعه کد زیر یک درخواست POST را به صورت ایجکس به فایل contact.php ارسال میکند.
کد:
var ajx = new XMLHttpRequest();
ajx.onreadystatechange = function() {
if(ajx.readyState === 4 && ) {
if(ajx.status === 200) {
alert(ajx.responseText);
} else if (ajx.status === 404) {
alert("صفحه مقصد وجود ندارد");
} else {
alert('Error Message: ' + ajx.statusText);
}
}
}
ajx.open('POST', 'contact.php');
ajx.send("name=Omid&age=21");
همانطور که در قطعه کد بالا می‌بینید، این عمل از سه بخش اصلی ایجاد شده است.
- در ابتدا یک شئ XMLHttpRequest ایجاد میکنیم.
- سپس با استفاده از تابع onreadystatechange() مشخص میکنیم در هنگام تغییر وضعیت درخواست چه اتفاقاتی رخ دهد.
- در پایان نیز با متد open() نوع درخواست و مقصد آنرا مشخص کرده و با تابع send() درخواست را ارسال میکنیم.
برای ارسال پارامترهای مورد نیاز، می بایست آنها را به صورت رشته اطلاعاتی (Data String) و به عنوان ورودی send() بدهیم.
شئ درخواست (XMLHttpRequest) دارای یک ویژگی با نام readyState می باشد. این متغیر مشخص کننده وضعیت فعلی درخواست است. چهار مقدار مختلف برای این متغیر در نظر گرفته میشود:
- وضعیت 1 یا OPENED : هنگامی که شئ ایجاد میشود در این وضعیت قرار داریم.
- وضعیت 2 یا HEADERS_RECEIVED : هنگامی که سرآیندهایی برای درخواست تعریف شده است.
- وضعیت 3 یا LOADING : درخواست به سرور ارسال شده و منتظر دریافت پاسخ هستیم.
- وضعیت 4 یا DONE : درخواست ارسال شده و پاسخ دریافت شده است.
در کد بالا ابتدا بررسی کردیم که در وضعیت 4 قرار داشته باشیم، یعنی پاسخ را دریافت کرده ایم. حال با بررسی وضعیت درخواست (کد درخواست) میتوان حالت های ممکن برای یک درخواست را مورد بررسی قرار داد.
با توجه به هر حالت، خواهیم توانست واکنش مختلفی نشان دهیم
