این آموزش در تاریخ ۱۴۰۰/۰۶/۲۳ آپدیت شده است.
آموزش Ajax یا آجاکس در جاوا اسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش Ajax یا آجاکس در جاوا اسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
آموزش Ajax یا آجاکس در جاوا اسکریپت
آجاکس یا ایجکس یا آژاکس یا Ajax ( اَیییی خِدا … اسم های اینو بزاریم کجای دلمون ) که میشه مخفف Asynchronous JavaScript And XML ، یکی از باحال ترین تکنولوژی های طراحی وب می باشد.
پس حواستون باشه ایجکس یا آجاکس یک زبان برنامه نویسی نیست بلکه صرفا یک تکنولوژی می باشد، که ما با استفاده از این تکنولوژی میتونیم داده هارو ارسال و دریافت کنیم بدون اینکه صفحه رفرش بشه، فقط همین و تموم شد رفت.
پس دیگه در یه کلام، آجاکس یا Ajax یعنی ارسال و دریافت داده ها در پس زمینه صفحه ( پشت صفحه که کسی نمیبینه ) بدون اینکه صفحه رفرش ( یا Refresh ) شه، همین تموم شد رفت.
والا یه عده میگن آجاکس تکنولوژی هست ، یه عده میگن اصلا ربطی نداره و تکنولوژی نیست، ولی اینو مطمعن باشید که آجاکس یک زبان برنامه نویسی نیست ، یه چارتا خط کد مال جاوااسکریپت هست که با استفاده از اون میتونیم داده هارو در پس زمینه صفحه ارسال و دریافت کرد بدون اینکه صفحه رفرش بشه.
Free-Learn
روش کار Ajax چگونه است؟
در آموزش Ajax یا آجاکس در جاوا اسکریپت میخوایم با روش کار آجاکس یا آیجکس یا Ajax آشنا بشیم، خب کلی بخوام بگم خیلی سادس، میتونم بگم کل کار آجاکس در قدم های زیر انجام میشه :
- قدم اول » ارسال درخواست از سمت صفحه مبدا به بسمت سرور ( که میشه صفحه مقصد )
- قدم دوم » دریافت درخواست توسط سرور
- قدم سوم » انجام پردازش بروی درخواست دریافت شده توسط سرور
- قدم چهارم » آماده کردن نتیجه پردازش انجام شده توسط سرور
- قدم پنجم » ارسال نتیجه ی آماده شده به سمت صفحه مبدا ( همون صفحه ای که درخواست رو ارسال کرده ) توسط سرور
- قدم ششم » نمایش نتیجه ی ارسال شده از سمت سرور در صفحه مبدا با استفاده از جاوااسکریپت
- و همه این کارها بدون اینکه صفحه رفرش بشه انجام میشه ( همانند این مثال )
Free-Learn
نامتقارن یا ناهمزمان یا Asynchronous در آجاکس
آجاکس یا ایجکس ( از این به بعد دیگه خودمون میگیم آجاکس ) روش اصلی کارش بر پایه Asynchronous ( یا ناهمزمان یا نامتقارن ) می باشد.
در یه کلام یعنی بدون ناهماهنگی یا ناهمزمان با سرور اجرا میشه، یعنی دیگه منتظر نمیمونه که بخواد دونه به دونه سرور بهش پاسخ بده، بلکه بصورت ناهمزمان اجرا میشه.
بصورت پیش فرض جاوااسکریپت درخواست هارو بصورت ناهمزمان ارسال میکنه ولی خب ما خودمونم میتونیم مشخص کنیم که ناهمزمان باشه یا همزمان. [ در بخش های بعدی یاد میگیرید که چجوری یک درخواست رو بصورت همزمان ارسال کنید ]
یه مثال میخوام بزنم که قشنگ دیگه متوجه کار آجاکس بشید، در این مثال از نقش های زیر استفاده کردم :
- نانوایی در نقش سرور
- افراد قرار گرفته در صف نانوایی در نقش درخواست های ارسال شده به سرور
- مهندس آجاکس در نقش فردی که وقتی میاد رو صف پارتی بازی میکنن و بهش نون میدن خخخ
خب فرض میکنیم صف نونوایی ۵۰ تا زن و مرد وایساده، و نونوایی داره نون میده دست مردم، یعنی مردها و زن ها رو صف قرار دارند و دونه به دونه دارن میرن جلو و نون میگیرن، پس این مردها و زن ها میشه درخواست ها و گفتیم خوده نونوایی هم میشه سرور
پس سرور دونه به دونه داره به درخواست ها پاسخ میده، ولی همینجا هس که مهندس آجاکس یه دفعه ای میاد آخر صف وایمیسه و البته اصلا تو صفت وایسادنش طول نمیکشه ، وقتی میبینن مهندس اومده دیگه سریع احترامش میکنن و میگن بیا اول صف و نون بردار ببر ( به این میگن ناهمزمان )
پس نتیجه اخلاقی میگه پارتی بازی نکنید ولی همیشه به مهندس ها احترام بزارید واااالا
Free-Learn
خب یعنی چی صفحه رفرش نمیشه !
خب بصورت عادی وقتی از آجاکس استفاده نکرده باشیم ، وقتی میخوایم بروی دکمه ارسال داده ( مثلا فرم تماس، فرم سفارش گیری ، فرم ثبت مشتری و… ) کلیک کنیم خب همزمان که داده ها ارسال میشن صفحه هم رفرش میشه ( یعنی صفحه میپره میره جای دیگه )
حال آجاکس یعنی اینکه دیگه صفحه رفرش نمیشه، همین تموم شد رفت، یعنی دیگه بصورت پس زمینه داده هارو ارسال میکنه و نتیجه شو هم دریافت میکنه و در همون صفحه نتیجه رو نشون میده بدون اینکه صفحه جابه جا بشه، باحاله مگه نه!؟
مثال شماره ۱ : بدون استفاده از آجاکس
|
1 2 3 4 5 6 7 8 9 10 11 |
<form action="files/get_1.php" method="post"> <div class="row"> <div class="col-100"> <input type="text" name="UserName" placeholder="نام شما"> </div> </div> <div class="row"> <br> <input type="submit" name="submit" value="ارسال"> </div> </form> |
مثال شماره ۲ : با استفاده از آجاکس ( دیگه صفحه رفرش یا جابه جا نمیشه )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> function MyLoad(){ const xhttp = new XMLHttpRequest(); var MyInput = document.getElementById("UserName").value; var result = document.getElementById("Result"); if(MyInput == ""){ result.innerHTML = "دیگه اومدی و نسازی، بی زحمت یه چیزی وارد کن"; }else{ xhttp.onload = function(){ result.innerHTML = this.responseText; } xhttp.open("GET", "files/get_2.php?UserName="+MyInput+""); xhttp.send(); } } </script> |
توجه داشته باشید، هم در مثال شماره ۱ و هم شماره ۲ ، داده ها بسمت سرور ارسال میشن، یعنی همیشه دیگه اینو بدونید داده ها از سمت سرور دریافت میشن و پردازش روشون انجام میشه بعدش نتیجه نهایی رو میفرسته بسمت اون صفحه ای که درخواست ارسال کرده.
پس در نتیجه فایل get_2.php یک فایل با زبان PHP هست که رو سرور قرار داره و این فایل هست که داده هارو میگیره و بعدش نتیجه رو میفرسته به خروجی.
دوستان عزیز میدونم الان پیش خودتون میگید پس کو کدهاش، کو کدهای فایل get_2.php و…
اصلا نگران نباشید، من این ۲تا مثال رو همینجوری زدم که فقط بدونید با آجاکس و بدون آجاکس چجوریه و صفحه رفرش نمیشه، فقط همین.
ایشالا در جلسات بعدی همه اون چیزایی که باید بدونید و ببینید رو بهتون میگم پس اصلا نگران نباشید و فقط در جلسات بعدی با من همراه باشید.
