معرفی AJAX برای طراحان Front-End

این مقاله آموزشی با هدف آشنایی طراحان front-end و طراحان تازه کار  با AJAX می باشد که یک تکنیک front-end اولیه ضروری است.

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

• دقیقا یاد بگیریم که AJAX چیست
• چگونه کار می کند
• محدودیتی ندارد

توجه: در این مقاله فرض می شود که شما با فناوری های اصلی هسته ای - مانند HTML و CSS - آشنا هستید.

AJAX چیست؟

برای پاسخ به سوال AJAX چیست ابتدا باید بگوییم :

AJAX مخفف "Asynchronous JavaScript and XML" است.

AJAX  تنها یک تکنولوژی جدید نیست. در حقیقت ، AJAX یک گروه از تکنولوژی های موجود (یعنی HTML ، CSS ، جاوا اسکریپت ، XML و غیره) است که برای ساختن برنامه های کاربردی وب مدرن به کمک شما می آیند.

با AJAX ، یک مشتری یا client (که همان مرورگر است ) با یک سرور وب ارتباط برقرار می کند و از داده ها می پرسد. سپس، پاسخ سرور را پردازش می کند و بدون بارگزاری مجدد آن را تغییر می دهد.

بیایید محدودیدت های AJAX را از بین ببریم :

• "ناهمگام یا Asynchronous" به این معنی است که وقتی یک مشتری اطلاعات را از یک وب سرور درخواست می کند، تا زمانی که سرور پاسخ ندهد، فعالیت آن را متوقف نمی کند. برعکس، کاربر هنوز می تواند صفحات را هدایت کند . به محض اینکه یک سرور یک پاسخ را باز می کند، یک تابع مربوط داده ها را پشت صحنه باز می کند.

• "جاوا اسکریپت" زبانی است که یک درخواست AJAX را ایجاد می کند، پاسخ AJAX مربوطه را تجزیه می کند، و در نهایت DOM را به روز می کند.

• یک مشتری (client) از XMLHttpRequest یا XHR API برای درخواست به یک سرور استفاده می کند.از API به عنوان مجموعه ای از متد هایی که قوانین ارتباط بین دو طرف ذینفع را مشخص می کنند،استفاده  کنید. با این حال، توجه داشته باشید که داده های ورودی از AJAX request می تواند در هر قالب ( نه فقط در فرمت XML) باشد.

چگونه AJAX کار می کند :

برای دریافت ایده اولیه ای در مورد چگونگی کار AJAX ، نگاهی به مورد زیر می اندازم :

این تصویر یک سناریوی مبتنی بر AJAX را تشریح می کند:

• کاربر میخواهد مقالات بیشتری را ببیند، بنابراین روی دکمه ی هدف کلیک می کند. این event باعث فراخوانی AJAX می شود.

• یک درخواست (request) به سرور ارسال می شود. همراه با درخواست، داده های مختلف ممکن است منتقل شوند. درخواست (request) می تواند به یک فایل استاتیک (به عنوان مثال example.json ) که در سرور ذخیره می شود اشاره کند. همچنین ممکن است یک اسکریپت پویا (مثلا functions.php ) اجرا شود که در آن نقطه اسکریپت برای بازیابی داده ها با پایگاه داده (یا سیستم دیگر) تعامل برقرار می کند.

• پایگاه داده مقادیر درخواست شده را به سرور ارسال می کند. بعد، سرور آن ها را به مرورگر می فرستد.

• جاوا اسکریپت پاسخ و به روز رسانی بخش های خاصی از DOM (ساختار صفحه) را تجزیه می کند .برای مثال، در اینجا، فقط نوار کناری به روز می شود. بخش های دیگر صفحه تغییری نمی کنند.

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

مثال های زنده AJAX :

AJAX در همه جا هست !
 برای اثبات این جمله ، بیایید به طور خلاصه چند سایت محبوب که اکثرا همه از آن استفاده می کنیم ، اشاره کنیم.

اول، فیس بوک و توییتر را بررسی کنید.
با حرکت به پایین، محتوای جدید به لطف AJAX ظاهر می شود. دوم، هنگامی که شما یک سوال یا پاسخ را در Overflow Stack فرا می گیرید ، یک فراخوانی AJAX فعال می شود. در نهایت، به زودی به عنوان چیزی که در Google یا یوتیوب جستجو می کنید ، چند درخواست AJAX اجرا می شود.

علاوه بر این، اگر ما بخواهیم ، ​​می توانیم در خواست ها را کنترل کنیم. برای مثال، در کنسول کروم، این کار را با راست کلیک کردن و بررسی گزینه Log XMLHttpRequests  انجام می دهیم.

درخواست ها :

همانطور که در بالا ذکر شد، برای تنظیم درخواست های AJAX ، از XMLHttpRequest API استفاده می کنیم. علاوه بر این، jQuery ، محبوب ترین کتابخانه ی جاوا اسکریپت ، چندین توابع و روش های مرتبط با Ajax را ارائه می دهد.

در طول این مقاله ، ما از نمونه های مختلفی استفاده می کنیم که از جاوا اسکریپت و jQuery ساده برای ارسال یک درخواست به یک سرور استفاده می کنند.

دستکاری پاسخ ها (Making Requests) :

وقتی داده ها را از یک وب سرور بازیابی می کنیم، می توان آن ها را در فرمت های مختلف قرار داد. XML ، JSON ، JSONP ، plain text و HTML فرمت های امکان پذیر داده هستند.

XML :

XML (زبان نشانه گذاری قابل انعطاف) یکی از محبوب ترین فرمت ها برای تبادل اطلاعات بین برنامه ها است. همانند HTML، XML از تگ  ها برای تعریف ساختار آن استفاده می کند. با این حال، توجه داشته باشید که XML با هیچ تگ پیش فرض مشخص نمی شود، در واقع ما با تعیین تگ های خودمان یک سند XML ایجاد می کنیم. یک مثال از ساختار آن در زیر نشان داده شده است:

<person>
    <name>Mike</name>
    <surname>Mathew</surname>
    <nationality>Australian</nationality>
    <languages>
        <language>English</language>
        <language>Spanish</language>
        <language>French</language>
        <language>Russian</language>
    </languages>
</person>

تعدادی از ادیتور های آنلاین وجود دارد که می توانید از آن ها برای ایجاد اسناد XML استفاده کنید. ویرایشگر مورد علاقه من:

• XMLGrid.net .

بر اساس این ویرایشگر، مثال ما به صورت زیر نمایش داده می شود:

JSON:

JSON (جاوا اسکریپت  شی گرا) یکی دیگر از فرمت های محبوب data-interchange است.
 با استفاده از JSON، ساختار فوق ذکر شده به شکل زیر می باشد:

{
  "name"        : "Mike",
  "surname"     : "Mathew",
  "nationality" : "Australian",
  "languages"   : ["English", "Spanish", "French", "Russian"]
}

باز هم می توانید بسیاری از ادیتور های آنلاین JSON را در سراسر وب پیدا کنید. در اینجا ادیتور هایی هستند که دوست دارم از آن ها استفاده کنم:

• JSON Generator
• JSON Editor Online

بر اساس ابزار JSON Editor Online ، مثال قبلی به صورت زیر است:

محدودیت های AJAX Requests :

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

ابتدا، خطای زیر را که در کنسول Chrome ظاهر می شود را در نظر بگیرید:

این خطا زمانی رخ می دهد که درخواست (Request) ما به یک فایل محلی اشاره کند . در اینجا سعی شده دسترسی به اطلاعات ذخیره شده در یک فایل محلی (یعنی Demo.json ) و نه در یک سرور داشته باشیم. برای غلبه بر این مشکل، می توانیم یک سرور محلی را نصب کنیم (به عنوان مثال XAMPP را به عنوان محیط توسعه محلی تنظیم می کنیم) و فایل مقصد را در آن ذخیره می کنیم.

دوم، به پیغام خطا زیر نگاه کنید:

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

یک راه حل این است که از مکانیزم پیشنهاد شده توسط W3C از CORS (به اشتراک گذاری منبع متقابل) استفاده شود. توجه داشته باشید که این مکانیزم ما را مجبور به تغییر چندگانه در فایل های پیکربندی سرور ما می کند. 

یکی دیگر از راه حل ها  این است که از روش JSONP )JSON با Padding) استفاده کنید.

نتیجه :

این مرور باید به شما یک دیدگاه مطلوب راجع به :

• AJAX چیست 
• با AJAX قبلا چه جاهایی مواجه شده اید
• محدودیت هایش قابل حل است

همچنین سریع ترین و محبوب ترین فرمت های تبادل اطلاعات را مورد بررسی قرار داد. 

بیشتر بخوانید :

اگر می خواهید بیشتر در مورد AJAX و Codepen بدانید، مطمئن شوید که منابع زیر را بررسی کنید:

• AJAX و Codepen
• CrossOrigin.me