ایجکس (ajax) چیست و چگونه کار میکند؟

اگه به صورت حرفه ای در زمینه ی ایجاد و طراحی سایت کار کرده باشید باید کلمه ی ایجکس یا ajax به گوش شما رسیده باشه! ایجکس باعث میشه که صفحات ما دوباره لود نشن و فقط قسمتی از صفحه که مورد نیاز ما هست لود بشه 😀 در شیوه ی سنتی (معمولی) کل صفحه دوباره دریافت میشه و صفحه رفرش میشه (refresh) اما در حالتی که از ajax استفاده میکنیم فقط قسمتی از صفحه که دلخواه ما هست لود میشه.(پیش نمایش چیزی که در انتها میسازیم رو میتونید از اینجا ببینید – کلیک کنید)

نمیخوام وارد تاریخچه و توضیح تفسیر بشم! کاربرد و نحوه ی استفاده رو بدونید بهتر از تاریخچه هست 😀 خب بریم سراغ اینکه چجوری میشه از ایجکس ajax استفاده کرد , برای استفاده از ajax مراحل زیر رو باید انجام بدیم:

  • ایجاد صفحه یا فایلی در سرور که درخواست ها به اون ارسال بشه
  • ارسال درخواست از طریق ajax به صفحه یا فایلی که در سرور ساختیم
  • دریافت درخواست و انجام پردازش یا کاری که میخوام انجام بدیم

من ابتدا یک صفحه با php به صورت زیر ایجاد میکنم , این صفحه چندتا ادرس عکس رو میگیره و باهاشون تگ img میسازه :

در کد بالا من یه آرایه ساختم و توش چندتا ادرس عکس قرار دادم , بعدش اومدم و ادرس عکس ها رو از ارایه خوندم و به صورت تگ img در آوردم و در اخر echo کردم.

حالا میام و قسمت ajax رو میسازم به صورت زیر:

در دستورات یه لینک ساختیم که با کلیک کردن روی لینک قراره اطلاعات ما با ajax لود بشه 😀 بعدش میایم و یک تابع تعریف میکنیم و اون رو توی رویداد onclick لینکمون قرار میدیم تا با کلیک کردن روی لینک این تابع اجرا بشه.

حالا میایم توی تابع خودمون یک شی از روی XMLHttpRequest میسازیم , اما قبلش بررسی میکنیم اگه XMLHttpRequest موجود نبود یه شی از روی ActiveXObject میسازیم , توی مرورگرهای قدیمی تر XMLHttpRequest وجود نداره!.

بعدش میام رویداد onreadystatechange رو مقدار دهی میکنیم و توش بررسی میکنیم اگه به درخواست جواب داده شده بود یعنی readyState برابر با ۴ بود میایم مقداری که دریافت شده رو استفاده میکنیم 😀 به همین راحتی!

مقدار Status نیز نوع هدر پاسخ رو مشخص میکنه مثلا اگه ۴۰۴ باشه به معنی not found هست! اگه با هدرهای php اشنا باشید میدونید چی هست! اگه برابر با ۲۰۰ باشه یعنی OK همه چیز درسته 😀 اگه متوجه نمیشید چی میگم اینجا رو یه مطالعه کنید(کلیک کنید).

مقدار دریافت شده درون responseText قرار داره که میتونید ازش استفاده کنید 😀 من در مثال بالا مقدار دریافت شده رو درون یه تگ div قرار دادم تا عکس ها نمایش داده بشن , در اخر نیز یه return false میزارم تا وقتی که روی لینک کلیک میشه و درخواست ajax ارسال میشه لینک عمل نکنه و لینک باز نیشه.

در اینجا اصول ajax رو به صورت ساده بیان کردیم , در آموزش های بعدی وارد جزییات خواهیم شد و نکات بیشتری رو بیان خواهیم کرد , ajax میتونه خیلی ساده و یا خیلی پیچیده باشه! بستگی به نحوه ای استفاده داره.

دوستانی که سوال دارند میتونن از پایین همین پست در بخش نظرات مطرح کنند تا پاسخ بدیم. همچنین فایل های مربوط به این اموزش رو میتونید از پایین همین پست دانلود و استفاده کنید.

نمونه سورس کد نحوه ی استفاده از ایجکس ajax
97.4 KiB
8 Downloads
اطلاعات بیشتر
به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK

می‌خواهید دیدگاهتان را بیان کنید؟