AJAX (ایجکس) چیست؟

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

AJAX از عملکرد جاوا اسکریپت مشتق شده است تا تجربه تعاملی بیشتری داشته باشد. جاوا اسکریپت با نظارت بر محتوایی که نیاز به به روز رسانی در زمان واقعی دارد، ساختار پویا را ایجاد، اضافه و مدیریت می کند، در حالی که بازدیدکننده در حال دسترسی به یک وب سایت است.

در همین حال، Extensible Markup Language (XML) داده ها را بین وب سرور و مرورگر منتقل می کند. به غیر از XML، فرمت های دیگری مانند متن ساده و JSON اغلب برای تبادل داده استفاده می شود.

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

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

AJAX شامل فناوری های زیر است:

• XHTML و CSS - برای ارائه اطلاعات.
• Document Object Model (DOM) - برای داده های نمایشگر پویا و تعامل آن.
• XML، HTML و XSLT - برای تبادل و دستکاری داده ها. با این حال، بسیاری از توسعه دهندگان XML را با JSON جایگزین کرده اند، زیرا از جاوا اسکریپت منشا گرفته است.
• object XMLHttpRequest - امکان ارتباط ناهمزمان با وب سرور را فراهم می کند.
• جاوا اسکریپت - زبان برنامه نویسی که همه این فناوری های وب را به هم پیوند می دهد.

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

برای مقایسه مدل معمولی و مدل ایجکس یک برنامه وب، به جدول زیر نگاه کنید.

مطالعه بیشتر: انجام سئو برای سایت

کاربردهای ajax

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

• به روز رسانی صفحه کاربر
• ارسال فرم
• تکمیل خودکار
• دادن رتبه بندی به محتویات وب سایت
• اعتبارستجی فرم ها
• طراحی چت روم ها (اتاق گفتگو)
• رابط کاربری سبک تر (طراحی UI سایت)
• طراحی لایت باکس

نمونه های AJAX (ایجکس)

اگر بخواهم یک مثالی از ajax برای شما بیاورم که همه شما شاهد آن بوده اید، ویژگی auto fill در search box گوگل است. این ویژگی به کاربران کمک می کند تا هنگام تایپ در نوار جستجو، پرس و جوی جستجوی خود را تکمیل کنند. تغییرات در زمان واقعی اتفاق می‌افتند، اما صفحه وب ثابت می‌ماند.

ای جکس به لایه تبادل داده و ارائه اجازه می دهد تا بدون تداخل در عملکرد یکدیگر به طور همزمان کار کنند.

در اوایل دهه 90 که این فناوری جدید هنوز معرفی نشده بود، این مورد نبود. باید Google را دوباره بارگیری می‌کردید تا توصیه جدیدی روی صفحه نمایش شما ظاهر می‌شد.

در اینجا نمونه های مفیدتری از روش AJAX در زندگی روزمره ما آورده شده است:

• سیستم‌های رای‌گیری و رتبه‌بندی – هنگامی که روی یک دکمه rate یا رای کلیک می‌کنید، وب‌سایت به‌طور خودکار محاسبه را بدون بازخوانی صفحه به‌روزرسانی می‌کند.
• Chat Roomها و وب اپلیکیشن‌های چت – برخی از وب سایت ها یک اتاق گفتگوی داخلی پشتیبانی مشتری را در صفحه اصلی خود پیاده سازی می کنند. با استفاده از AJAX، می توانید در حین کاوش در وب سایت با یک نماینده پشتیبانی مشتری صحبت کنید. هر زمان که پیام جدیدی ارسال یا دریافت کردید، صفحه وب نیازی به بارگیری مجدد نخواهد داشت.
• رسانه های اجتماعی – بسیاری از برنامه های رسانه های اجتماعی مانند توییتر (آموزش توییتر) از AJAX برای به روز رسانی جدول زمانی کاربران خود استفاده می کنند. هنگامی که یک توییت جدید ارسال می کنید، سیستم داده ها را از سرور درخواست و بازیابی می کند. سپس، توییت جدید را در بالای جدول زمانی نمایش می دهد.

آیا یادگیری AJAX ضروری است؟

یادگیری AJAX نسبتا آسان است، به خصوص اگر دانش قبلی از HTML، XML، جاوا اسکریپت و CSS داشته باشید.

برای توسعه‌دهندگان پیشرفته، درک ایجکس تنها یک یا دو ساعت طول می‌کشد، زیرا این تکنیک مهارت‌های توسعه‌ای را که قبلاً بر آن مسلط شده‌اید پیاده‌سازی می‌کند.

اگر مبتدی هستید، معمولاً یک ساعت طول می کشد تا اصول اساسی را یاد بگیرید و یک یا دو روز برای درک سینتکس XMLHttpRequest - کلید AJAX - طول می کشد.

چه یک توسعه‌دهنده پیشرفته یا جدید باشید، توصیه می‌کنیم برای تسلط بر این تکنیک از نمونه‌های واقعی استفاده کنید.

در اینجا چهار مرحله برای یادگیری AJAX وجود دارد:

1. با جاوا اسکریپت، HTML، XML و CSS آشنا شوید – این زبان ها پیش نیازهای یادگیری AJAX هستند.
2. در مورد نحوه استفاده از AJAX تحقیق کنید - یاد بگیرید که چگونه ایجکس در برنامه های وب و تکنیک های مورد استفاده برای توسعه آنها اعمال می شود. به عنوان مثال، نقشه های گوگل را مطالعه کنید که AJAX را برای بازیابی داده های نقشه جدید اجرا می کند.
3. jQuery – بسیاری از برنامه های کاربردی وب که از AJAX استفاده می کنند نیز jQuery را اجرا می کنند. بنابراین، توصیه می کنیم اصول اولیه jQuery را برای نوشتن برنامه های پیشرفته ایجکس یاد بگیرید.
4. یک پروژه با استفاده از AJAX ایجاد کنید - دانش و مهارت های توسعه خود را در عمل به کار ببرید.

AJAX تکنیکی است که به طور جهانی مورد استفاده قرار می گیرد و بخش اساسی توسعه front-end است و آن را به یکی از مهارت های مورد تقاضا تبدیل می کند. طبق گفته‌های Glassdoor، میانگین حقوق یک توسعه‌دهنده فرانت‌اند حدود 102000 دلار در سال است.

توسعه دهندگان با کمتر از یک سال تجربه حدود 100000 دلار در سال درآمد دارند. از سوی دیگر، توسعه دهندگان ارشد ممکن است حقوق متوسطی بیش از 120000 دلار در سال دریافت کنند.

مزایای ایجکس

• به مرورگر اجازه می‌دهد تا بخش‌هایی از محتوا را بدون بارگیری مجدد یا باز کردن صفحه جدید به‌روزرسانی کند.
• با اجازه دادن به برنامه های کاربردی وب برای ارائه بدون داده، ترافیک سرور را کاهش می دهد.
• از پهنای باند کمتری استفاده می کند زیرا محتوای کمی را دریافت می کند.
• به مرورگرها اجازه می‌دهد بدون بارگیری مجدد کل صفحه، تماس‌های ناهمزمان با سرور وب برقرار کنند.
• object XMLHttpRequest در AJAX یک ارتباط مستقل بین سرور وب سایت و ماشین سمت سرویس گیرنده برقرار می کند.
• تعاملات پاسخگو ایجاد می کند. حرکات ماوس که جزو کلیک کردن کاربر محسوب نمی‌شوند نیز می توانند رویدادها را تحریک کنند.

معایب ایجکس

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

مطالعه و آشنایی بیشتر : طراحی سایت اختصاصی

نمونه کد ajax

در زیر چند نمونه کد از مثال های ajax را برای شما آورده ایم که با هم بررسی کنیم.

ارسال کد 4 رقمی و چگونگی درخواست آن از سرور

در این کد، برنامه ورودی فرم را برای ورود شماره موبایل بررسی می کند. در مرحله بعد آردس url که قرار است کد به آن ارسال شود هم بررسی می شود. بعد در صورت صحیح بودن شماره موبایل، کد درخواست شده ارسال می شود.

function sendcode(){
    mobile=$('.form-account #mobile').val();
    url=$('#code_send' ).attr('data-url');
    if (mobile.length != 11)
    {
        alert('شماره تماس 11 رقمی باید باشد');
    }else {
        $.ajax({
            type: 'GET',
            url: url + '/' + mobile,
            success: function(data) {
                $('#code_send').toggleClass("d-none");
                $('#code_input').toggleClass("d-none");
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(JSON.parse(xhr.responseText));
            }
        });
    }
}

loading بارگذاری تصاویر در ajax

میخوایم در مثال زیر کاری کنیم که قبل از بارگذاری محتوا یک تصویر ( که مثلا بگه لطفا صبر کنید و از این حرفا ) نمایش بدیم.

در این کد اگر status code درخواست برابر با 200 باشد عکس مورد نظر نمایش داده می شود اما اگر مغایرت داشته باشد عکس Gif که در شرط else آمده است به نمایش در می آید.

<script>
 
function Load(){
 const MyRequest = new XMLHttpRequest();
 var Result = document.getElementById("Result");
 
 MyRequest.onreadystatechange = function(){
  if ( this.readyState == 4 && this.status == 200 ) {
   Result.innerHTML = this.responseText;
  }else{
   Result.innerHTML = "<div><img src='img/loading.gif' width='50'></div>";
  }
 };
 
 MyRequest.open("GET", "files/myfile-1.html");
 MyRequest.send();
}
 
</script>

ارسال داده های فرم ( نام و ایمیل ) به سرور با استفاده از متد GET در ajax

در این قطعه کد اطلاعات فرم باید وارد شود تا به صورت متد Get ارسال شود. در متد Get اطلاعات وارد شده به انتهای آدرس url اضافه می شود و به آدرس مورد نظر فرستاده می شود.

اما اگر اطلاعات وارد شده صحیح نباشد با پیغام های خطای مشخص شده به کاربر نشان داده می شود.

	
<script>
 
function MyLoad(){
 const xhttp = new XMLHttpRequest();
 var userName = document.getElementById("UserName").value;
 var userEmail = document.getElementById("UserEmail").value;
 var result = document.getElementById("Result");
 
 if( userName == "" && userEmail == "" ){
  result.innerHTML = "تا اطلاعات درست وارد نکنی نمیشه وارد شی !!!";
 }else if( userName == "" || userEmail == "" ){
  result.innerHTML = "لطفا موارد ضروری را تکمیل نمایید";
 }else{
 xhttp.onload = function(){
 result.innerHTML = this.responseText;
 }
 xhttp.open("GET", "files/get_4.php?UserName="+userName+"&UserEmail="+userEmail+"");
 xhttp.send();
 }
}
 
</script>

ارسال داده های فرم ( نام و ایمیل ) به سرور با استفاده از متد POST در ajax

در این قطعه کد اطلاعات فرم باید وارد شود تا به صورت متد POST ارسال شود. در متد POST اطلاعات وارد شده به انتهای آدرس url اضافه نمی شود بلکه کد می شوند و به آدرس مورد نظر فرستاده می شود.

اما اگر اطلاعات وارد شده صحیح نباشد با پیغام های خطای مشخص شده به کاربر نشان داده می شود.

<script>
 
function MyLoad(){
 const xhttp = new XMLHttpRequest();
 var userName = document.getElementById("UserName").value;
 var userEmail = document.getElementById("UserEmail").value;
 var result = document.getElementById("Result");
 
 if( userName == "" && userEmail == "" ){
  result.innerHTML = "تا اطلاعات درست وارد نکنی نمیشه وارد شی !!!";
 }else if( userName == "" || userEmail == "" ){
  result.innerHTML = "لطفا موارد ضروری را تکمیل نمایید";
 }else{
 xhttp.onload = function(){
 result.innerHTML = this.responseText;
 }
 xhttp.open("POST", "files/get_5.php");
 xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 xhttp.send("UserName="+userName+"&UserEmail="+userEmail+"");
 }
}
 
</script>

مسیر یادگیری ajax

برای یادگیری اصولی ajax شما نیاز به یک نقشه راه دارید چون این تکنولوژی پیش نیازهایی دارد که باید قبل از شروع یادگیری آن به آن ها تسلط نسبی داشته باشید.

1. یادگیری HTML و CSS بسیار ضروری است.
2. شما باید تسلط نسبی به زبان برنامه نویسی جاوا اسکریپت داشته باشید.
3. قبل از شروع یادگیری ajax، مقداری در رابطه با ajax تحقیق کنید.
4. شروع به یادگیری کنید و مفاهیم را بیاموزید
5. هیچ چیز بهتر از تمرین کردن به شما در یادگیری مفاهیم کمک نمی کند و این تمرین اگر پروژه محور باشد عالی است.
6. برای پیشرفته کار کردن Jquery را تا حدودی بیاموزید.

بیشتر بدانیم : دستور alert در جاوا اسکریپت