پارت یک : آشنایی مختصری با AJAX برای طراحان Front-End

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

قبل از شروع: در این سری فرض بر این است که شما با موضاعات اصلی در حوزه تکنولوژی فرانت اند مانند HTML و CSS آشنا هستید.

 

ایجکس چیست؟

ایجکس مخفف عبارت Asynchronous JavaScript and XML است. این یک تکنیک ساده و واحد و یا جدیدی نیست, درحقیقت مجموعه ای از ابزار های موجود مانند HTML, CSS, JavaScript, XML و غیره است که با هم برای ساخت برنامه های وب استفاده می شوند.

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

بیایید معنی تک تک کلمات واژه AJAX را بررسی کنیم.

-Asynchronous یعنی وقتی یک کلاینت از سرور سایت درخواست اطلاعات می کند تا زمان دریافت پاسخ به حالت فریز در نمی آید و در عوض کاربر در طول این مدت می تواند از صفحه وب استفاده کند. به محض ارسال پاسخ از طرف سرور, یک تابع مشخص تغییرات لازم را در صفحه سایت انجام می دهد.

-JavaScript یک زبان وب نویسی است که یک درخواست ایجکس را ایجاد کرده, پاسخ ایجکس مربوطه را تجزیه و تحلیل کرده و در نهایت DOM (ساختار صفحه وب) را به روز رسانی می کند.

-یک کاربر از XMLHttpRequest یا ای پی آی XHR استفاده کرده تا یک درخواست داده از سرور را ایجاد کند. به (API -(Application programming interface به چشم مجموعه ای از متد ها نگاه کنید که مشخص کننده قوانین ارتباطات بین دو بخش مرتبط به هم است. با اینحال توجه داشته باشید که داده های ورودی از یک درخواست ایجکس می تواند به فرمت های متفاوتی باشد و نه الزاما فرمتXML .

 

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

برای اینکه یک ایده ابتدایی درباره نحوه کارکرد آن بدست آورید به مثال زیر توجه کنید.

آشنایی با AJAX

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

-درخواست به سرور ارسال می شود. درون یک بسته ارسالی, اطلاعات متفاوتی ممکن است ارسال شود؛ این درخواست ممکن است به یک فایل استاتیک اشاره کند که بر روی سرور ذخیره شده است (example.json). ممکن است که یک اسکریپت داینامیک را اجرا کند(functions.php) که در آن درخواست اسکریپت را به پایگاه داده متصل کرده تا اطلاعات مورد نظر را دریافت کند.

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

-جاوا اسکریپت پاسخ دریافتی را تجزیه تحلیل کرده و قسمت های مشخصی از DOM را به روز رسانی می کند. برای مثال فقط قسمت sidebar صفحه تغییر کرده و بقیه اجزاء ثابت می مانند.

با در نظر گرفتن چنین قابلیتی , اهمیت ایجکس در مفهوم طراحی وب قابل درک است. با طراحی برنامه هایی که با این قابلیت ایجاد می شوند, ما قادر خواهیم بود تا میزان اطلاعاتی که از سرور دانلود می شوند را کنترل کنیم.

 

مثال هایی معروف از ایجکس

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

ابتدا نحوه کارکرد فیسبوک و توییتر را در نظر بگیرید. صفحه را که به بالا اسکرول می کنید, مطالب جدید ظاهر می شوند. نمونه دیگر وبسایت Stack Overflow است که وقتی به یک سوال رای مثبت یا منفی می دهید, یک درخواست ایجکس اجرا می شود. و مورد آخر به محض اینکه موضوعی را در گوگل یا یوتیوب سرچ می کنید چندین درخواست ایجکس اجرا می شود.

شما می توانید تمامی این درخواست ها را بصورت مستقیم مشاهده کنید. برای مثال در کنسول کروم  می توانید این کار را با راست کلیک کردن و انتخاب Log XMLHttpRequests انتخاب کنید.

 

ایجاد یک درخواست

همان گونه که در بالا اشاره شد, برای ایجاد یک درخواست ایجکس از ای پی آی XMLHttpRequest استفاده می کنیم. علاوه بر این, jQuery معروف ترین کتابخانه (library) جاوا اسکریپت, چندین تابع و متد مربوط به ایجکس را ارائه می دهد.

در طول این چند مقاله پیش رو, از چند مثال مختلف استفاده می کنیم که از JavaScript و jQuery  استفاده می کنند تا یک درخواست داده از سرور را اجرا کنند.

 

ایجاد تغییرات در نتایج درخواست ها

وقتی از سرور وب اطلاعات مورد نظرمان را دریافت می کنیم, این داده ها می توانند در فرمت های متفاوتی باشند.

 

XML

(XML (eXtensible Markup Language یکی از معروف ترین فرمت ها برای رد و بدل کردن اطلاعات بین اپلیکیشن ها است. مشابه XML, HTML برای تعیین ساختارش از تگ استفاده می کند. با این حال در نظر داشته باشید که XML هیچ تگ از پیش تعیین شده ای ندارد. در حقیقت ما با تعیین کردن تگ های خودمان یک فایل XML را ایجاد می کنیم. مثالی از این ساختار را در کد زیر مشاهده می کنید.

<person>

    <name>Mike</name>

    <surname>Mathew</surname>

   <nationality>Australian</nationality>

  <languages>

  <language>Spanish</language>

  <language>English</language>

  <language>Russian</language>

  </languages>

</person>

۰۱

۰۲

۰۳

۰۴

۰۵

۰۶

۰۷

۰۸

۰۹

۱۰

 

ویرایشگر های آنلاین بسیاری وجود دارند که شما می توانید با استفاده از آن ها فایل XML بسازید. یک نمونه بسیار خوب ویرایشگر XMLGrid.net است.در صورت استفاده ازین ویرایشگر مثال ما به شکل زیر خواهد بود:

آشنایی با AJAX

JSON

JavaScript Object Notation یک فرمت تغییر داده معروف دیگر است. با استفاده از JSON ساختار XML فوق الذکر بدین صورت خواهد بود.

{

“name” : “Mike”,

“surname”  : “Mathew”,

“nationality” : “Australian”,

“languages” : [“English”,”Spanish”,”French,”Russian”]

}

۰۱

۰۲

۰۳

۰۴

۰۵

۰۶

مجددا شما می توانید ادیتور های آنلاین JSON فراوانی را در اینترنت بیابید. برای مثال دو نمونه معروف آن JSON Generator و JSON Editor Online است.در صورت استفاده از JSON Editor Online مثال بالا بدین صورت خواهد بود:

آشنایی با AJAX

محدودیت های درخواست ایجکس

قبل از این که از ایجکس استفاده کنیم بسیار ضروری است که محدودیت هایش را بشناسیم. بطور دقیق به دو مورد رایج از این محدودیت ها اشاره می کنیم.

ابتدا نگاهی به ارور زیر که در کنسول کروم ظاهر می شود بیاندازید.

آشنایی با AJAX

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

مورد دوم نگاهی به ارور زیر بیاندازید:

آشنایی با AJAX

این مورد زمانی اتفاق می افتد که ما اطلاعاتی را درخواست می کنیم که بر روی یک لوکیشن با دامین یکسان(domain-relative) با صفحه وب ما قرار دارد.(معروف به same-origin policy restriction) قرار دارد. برای مثال اطلاعات در یک سرور لوکال ذخیره شده در حالی که صفحه وب بر روی یک سرور Codepen ذخیره شده است. خوشبختانه برای این مشکل هم راه حلی وجود دارد. یک راه حل این است که از مکانیزم CORS (Cross-Origin Resource Sharing) که توسط W3C پیشنهاد شده استفاده کنیم. البته در نظر داشته باشید که این مکانیزم ما را ملزم به ایجاد تغییراتی در فایل های پیکر بندی سرورمان می کند. راه دیگر این است که از تکنیک JSONP(JSON with Padding) استفاده کنیم.

 

جمع بندی

تا اینجا باید دیدگاه کلی مناسبی راجع به اینکه ایجکس چیست, تا به حال در جاهایی با آن مواجه شده اید و چه موضوعات و مسائلی در رابطه با آن وجود دارد بدست آورده باشید. علاوه بر آن مروری کوتاه بر معروف ترین فرمت های تغییر داده (data-interchange) کردیم. در قسمت های بعدی به بررسی یک نمونه کامل و واقعی می پردازیم.

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *