این آموزش در تاریخ ۱۴۰۰/۰۶/۲۳ آپدیت شده است.

آموزش Ajax یا آجاکس در جاوا اسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش Ajax یا آجاکس در جاوا اسکریپت با من همراه باشید.

آموزش Ajax یا آجاکس در جاوا اسکریپت

Free-Learn

آموزش Ajax یا آجاکس در جاوا اسکریپت

آجاکس یا ایجکس یا آژاکس یا Ajax ( اَیییی خِدا … اسم های اینو بزاریم کجای دلمون  ) که میشه مخفف Asynchronous JavaScript And XML ، یکی از باحال ترین تکنولوژی های طراحی وب می باشد.

پس حواستون باشه ایجکس یا آجاکس یک زبان برنامه نویسی نیست بلکه صرفا یک تکنولوژی می باشد، که ما با استفاده از این تکنولوژی میتونیم داده هارو ارسال و دریافت کنیم بدون اینکه صفحه رفرش بشه، فقط همین و تموم شد رفت.

پس دیگه در یه کلام، آجاکس یا Ajax یعنی ارسال و دریافت داده ها در پس زمینه صفحه ( پشت صفحه که کسی نمیبینه ) بدون اینکه صفحه رفرش ( یا Refresh ) شه، همین تموم شد رفت.

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

Free-Learn

روش کار Ajax چگونه است؟

در آموزش Ajax یا آجاکس در جاوا اسکریپت میخوایم با روش کار آجاکس یا آیجکس یا Ajax آشنا بشیم، خب کلی بخوام بگم خیلی سادس، میتونم بگم کل کار آجاکس در قدم های زیر انجام میشه :

  • قدم اول » ارسال درخواست از سمت صفحه مبدا به بسمت سرور ( که میشه صفحه مقصد )
  • قدم دوم » دریافت درخواست توسط سرور
  • قدم سوم » انجام پردازش بروی درخواست دریافت شده توسط سرور
  • قدم چهارم » آماده کردن نتیجه پردازش انجام شده توسط سرور
  • قدم پنجم » ارسال نتیجه ی آماده شده به سمت صفحه مبدا ( همون صفحه ای که درخواست رو ارسال کرده ) توسط سرور
  • قدم ششم » نمایش نتیجه ی ارسال شده از سمت سرور در صفحه مبدا با استفاده از جاوااسکریپت
  • و همه این کارها بدون اینکه صفحه رفرش بشه انجام میشه ( همانند این مثال )

Free-Learn

نامتقارن یا ناهمزمان یا Asynchronous در آجاکس

آجاکس یا ایجکس ( از این به بعد دیگه خودمون میگیم آجاکس ) روش اصلی کارش بر پایه Asynchronous ( یا ناهمزمان یا نامتقارن ) می باشد.

در یه کلام یعنی بدون ناهماهنگی یا ناهمزمان با سرور اجرا میشه، یعنی دیگه منتظر نمیمونه که بخواد دونه به دونه سرور بهش پاسخ بده، بلکه بصورت ناهمزمان اجرا میشه.

بصورت پیش فرض جاوااسکریپت درخواست هارو بصورت ناهمزمان ارسال میکنه ولی خب ما خودمونم میتونیم مشخص کنیم که ناهمزمان باشه یا همزمان. [ در بخش های بعدی یاد میگیرید که چجوری یک درخواست رو بصورت همزمان ارسال کنید ]

یه مثال میخوام بزنم که قشنگ دیگه متوجه کار آجاکس بشید، در این مثال از نقش های زیر استفاده کردم :

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

خب فرض میکنیم صف نونوایی ۵۰ تا زن و مرد وایساده، و نونوایی داره نون میده دست مردم، یعنی مردها و زن ها رو صف قرار دارند و دونه به دونه دارن میرن جلو و نون میگیرن، پس این مردها و زن ها میشه درخواست ها و گفتیم خوده نونوایی هم میشه سرور

پس سرور دونه به دونه داره به درخواست ها پاسخ میده، ولی همینجا هس که مهندس آجاکس یه دفعه ای میاد آخر صف وایمیسه و البته اصلا تو صفت وایسادنش طول نمیکشه ، وقتی میبینن مهندس اومده دیگه سریع احترامش میکنن و میگن بیا اول صف و نون بردار ببر ( به این میگن ناهمزمان )

پس نتیجه اخلاقی میگه پارتی بازی نکنید ولی همیشه به مهندس ها احترام بزارید واااالا

Free-Learn

خب یعنی چی صفحه رفرش نمیشه !

خب بصورت عادی وقتی از آجاکس استفاده نکرده باشیم ، وقتی میخوایم بروی دکمه ارسال داده ( مثلا فرم تماس، فرم سفارش گیری ، فرم ثبت مشتری و… ) کلیک کنیم خب همزمان که داده ها ارسال میشن صفحه هم رفرش میشه ( یعنی صفحه میپره میره جای دیگه )

حال آجاکس یعنی اینکه دیگه صفحه رفرش نمیشه، همین تموم شد رفت، یعنی دیگه بصورت پس زمینه داده هارو ارسال میکنه و نتیجه شو هم دریافت میکنه و در همون صفحه نتیجه رو نشون میده بدون اینکه صفحه جابه جا بشه، باحاله مگه نه!؟

مثال شماره ۱ : بدون استفاده از آجاکس

امتحان کنید

توضیح مثال بالا :

در مثال بالا، شما اگه نامتون رو وارد نمایید و بعدش بروی دکمه ” ارسال ” کلیک کنید داده ها به سمت سرور ( به فایل get_1.php ) ارسال میشن.

یعنی وقتی بروی دکمه ” ارسال ” کلیک کنید، اگه توجه کنید صفحه رفرش ( یا جابه جا ) میشه، چون در حال ارسال داده ها هستش پس دیگه خودکار خودش صفحه رو رفرش میکنه.

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

 

مثال شماره ۲ : با استفاده از آجاکس ( دیگه صفحه رفرش یا جابه جا نمیشه )

امتحان کنید

توضیح مثال بالا :

در مثال بالا ما از آجاکس استفاده کردیم، اگه توجه کنید میبینید که وقتی بروی دکمه ارسال کلیک میشه، صفحه تکون نمیخوره ( یا اینجوری بگیم رفرش نمیشه یا جابه جا نمیشه ) و همین دیگه ، به این میگن آجاکس

یعنی بصورت پس زمینه که ما متوجه نمی شیم داده هارو ارسال میکنه بعدش نتیجه رو میگیره و در همون صفحه فعلی به نمایش درمیاره.

توجه داشته باشید، هم در مثال شماره ۱ و هم شماره ۲ ، داده ها بسمت سرور ارسال میشن، یعنی همیشه دیگه اینو بدونید داده ها از سمت سرور دریافت میشن و پردازش روشون انجام میشه بعدش نتیجه نهایی رو میفرسته بسمت اون صفحه ای که درخواست ارسال کرده.

پس در نتیجه فایل get_2.php یک فایل با زبان PHP هست که رو سرور قرار داره و این فایل هست که داده هارو میگیره و بعدش نتیجه رو میفرسته به خروجی.

دوستان عزیز میدونم الان پیش خودتون میگید پس کو کدهاش، کو کدهای فایل get_2.php و…
اصلا نگران نباشید، من این ۲تا مثال رو همینجوری زدم که فقط بدونید با آجاکس و بدون آجاکس چجوریه و صفحه رفرش نمیشه، فقط همین.
ایشالا در جلسات بعدی همه اون چیزایی که باید بدونید و ببینید رو بهتون میگم پس اصلا نگران نباشید و فقط در جلسات بعدی با من همراه باشید.

Free-Learn

دریافت PDF یا پرینت این مطلب