Ajax که ترکیبی از HTML، تکنولوژی جاوا اسکریپت، DHTML و DOM است، یک روش عالی است که به شما کمک می کند تا UI های سنگین وب را به برنامه های Ajax اینترکتیو تبدیل نمایید. نویسنده در این سری مقالات نشان می دهد که چگونه این تکنولوژی ها با هم کار می کنند - از مقدمه تا یک نگاه دقیق - تا توسعه وب به صورت مؤثر به یک واقعیت آسان تبدیل شود. وی همچنین مفاهیم پایه Ajax شامل شئ XMLHttpRequest را تشریح می کند.

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

Ajax بسیار فراتر از یک مد زود گذر است؛ در واقع یک روش قدرتمند برای ساختن وب سایت ها است که یادگیری آن به عنوان یک زبان جدید خیلی سخت نیست.

قبل از اینکه وارد این بحث شوم که Ajax چیست، بیایید چند دقیقه ای به این موضوع بپردازیم که Ajax چه کاری را انجام می دهد. امروزه هنگامیکه می خواهید یک برنامه بنویسید، شما دو انتخاب اصلی دارید:

برنامه های Desktop
برنامه های وب
هر دو اینها آشنا هستند؛ برنامه های desktop معمولا بر روی یک CD (یا بعضی اوقات قابل دانلود شدن از وب سایت) هستند و به صورت کامل بر روی کامپیوتر شما نصب می شوند. آنها ممکن است جهت به روز رسانی از اینترنت هم استفاده کنند اما کدی که برنامه را اجرا می کند بر روی کامپیوتر شما باقی می ماند. برنامه های وب جایی بر روی یک سرور اجرا می شوند و شما با استفاده از browser تان می توانید به آنها دسترسی داشته باشید.

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

در عوض برنامه های وب معمولا در هر لحظه به روز هستند و سرویس هایی را ارائه می دهند که هرگز نمی توانید بر روی desktop تان داشته باشید (Amazon.com و eBay را تصور کنید). اما به همراه توانایی های وب، انتظار نیز آمده است - انتظار برای پاسخ سرور، انتظار برای refresh شدن صفحه، انتظار برای اینکه یک درخواست فرستاده شود و صفحه جدیدی تولید شود.

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

خوب، منتظر چه هستید؟ به Ajax نگاه کنید و ببینید که چگونه UI های سنگین شما را به برنامه های پاسخی Ajax تبدیل می کند.

تکنولوژی قدیم، مهارت جدید

واقعیت این است که به همراه Ajax تکنولوژی های متعددی هم آمده است - برای اینکه از مبانی پایه فراتر بروید، نیاز دارید که وارد جزئیات تکنولوژی های مختلف شوید (و این دلیلی است که من چند مقاله اول خود را به تفکیک درباره هرکدام از آنها نوشته ام). خبر خوش این است که شما ممکن است در حد مناسبی با بعضی از این تکنولوژی ها آشنا باشید و از این بهتر اینکه یادگیری بیشتر این تکنولوژی ها آسان است. قطعا به سختی یک زبان کامل نظیر Java یا Ruby نیست.

تکنولوژی های پایه موجود در برنامه های Ajax عبارتند از:

HTML که به منظور ساختن فرم های وب و شناسایی فیلد های مورد استفاده در برنامه استفاده شده است.
کدهای جاوا اسکریپت که کدهای هسته اجرایی برنامه های Ajax هستند و در تسهیل برقراری ارتباط با برنامه های سمت سرور کمک می کنند.
DHTML یا HTML داینامیک به شما کمک می کند تا به صورت داینامیک فرم هایتان را update نمایید. شما از div، span و سایر المانهای HTML داینامیک به منظور علامت گذاری سند HTML تان استفاده می کنید.
DOM یا Document Object Model (از طریق کد جاوا اسکریپت) به منظور کار با ساختار HTML شما و (در بعضی موارد) XML برگشتی از سمت سرور مورد استفاده قرار می گیرد.
بیایید اینها را تقسیم بندی کنیم و ببینیم هرکدام چه کار می کنند. من در مقالات بعدی خود، هرکدام از آنها را تشریح خواهم کرد؛ اکنون بر روی آشنایی با این کامپوننت ها و تکنولوژی ها تمرکز می کنیم. هر قدر شما با این کد بیشتر آشنا شوید، حرکت از دانش موقتی درباره این تکنولوژی ها به سوی حرفه ای شدن در هر کدام از آنها آسان تر خواهد بود.

شیئ XMLHttpRequest

اولین شیئی که قرار است یاد بگیرید احتمالا جدید ترین آنهاست؛ که XMLHttpRequest نامیده می شود. این شیئ یک آبجکت جاوا اسکریپت است که به همان سادگی که در لیست زیر نشان داده شده است، ایجاد می شود:

لیست 1- ایجاد یک شیئ جدید XMLHttpRequest

کد:
<script language="JavaScript" type="text/JavaScript">
var xmlHttp = new XMLHttpRequest();
</script>
من در مقاله بعدی خودم درباره این شیئ بیشتر توضیح خواهم داد، اما برای اکنون توجه داشته باشید که این آبجکتی است که همه ارتباطات سمت سرور شما را مدیریت می کند. قبل از اینکه ادامه دهید، مکث کرده و درباره آن فکر کنید. این تکنولوژی جاوا اسکریپت است که از طریق شیئ XMLHttpRequest با سرور ارتباط برقرار می نماید. چنین چیزی جزء جریان معمول برنامه نیست و جایی است که Ajax جادوی خود را بیشتر نمایان می کند.

در یک برنامه معمولی وب، کاربران فیلد های فرم را پر کرده و بر روی دکمه ارسال کلیک می کنند. سپس کل فرم به سرور فرستاده می شود، سرور اسکریپتی را پردازش می کند (معمولا PHP یا Java یا شاید یک پروسه CGI یا کارهای مشابه)، و زمانیکه اسکریپت اجرا شد، سرور یک صفحه کاملا جدید را پس می فرستد. آن صفحه می تواند HTML با یک فرم به همراه داده های پرشده یا یک تایید یا شاید صفحه ای با گزینه های انتخاب شده بر اساس داده های ارسال شده در فرم اصلی باشد. البته زمانیکه اسکریپت یا برنامه در سمت سرور در حال پردازش و فرستادن فرم جدید است، کاربران مجبورند صبر نمایند. صفحه نمایش خالی می شود و زمانیکه داده ها از سمت سرور برگشت داده شدند، صفحه دوباره ترسیم می شود. این همان جایی است که تعامل پایین نمود پیدا می کند --کاربران بازخورد فوری دریافت نمی کنند و بدون شک همانند کار با برنامه های desktop راحت نمی باشند.

Ajax ذاتا تکنولوژی جاوا اسکریپت و شیئ XMLHttpRequest را ما بین فرم های وب شما و سرور قرار می دهد. هنگامی که کاربران فرم ها را پر می کنند، آن داده ها مستقیما به سرور فرستاده نمی شوند بلکه به کدهای جاوا اسکریپت فرستاده می شوند. در عوض کدهای جاوا اسکریپت داده های فرم را گرفته و یک درخواست به سرور ارسال می کنند. وقتی چنین چیزی اتفاق می افتد، دیگر فرم نمایش داده شده به کاربر، رفت و برگشت ندارد و پنهان و پیدا نمی شود. به عبارت دیگر، کد جاوا اسکریپت درخواست را در پس زمینه ارسال می کند؛ کاربر حتی متوجه نمی شود که ارسال درخواست شروع شده است. به عبارتی بهتر، درخواست به صورت غیر همزمان (Asynchronously) ارسال شده است، به این معنی که کد جاوا اسکریپت شما (و کاربر) منتظر پاسخ سرور نمی مانند. بنابراین کاربران می توانند به ادامه ورود اطلاعات، مرور صفحه و استفاده از برنامه بپردازند.

سپس سرور داده هایی را به کد جاوا اسکریپت شما (که همچنان جانشین وب فرم است) پس می فرستد. کد جاوا اسکریپت تصمیم می گیرد که با آن داده ها چه کند. می تواند فیلدهای فرم را همان موقع update کند، که به برنامه شما احساس آنی بودن می دهد --کاربران بدون اینکه فرمشان را ارسال یا refresh کرده باشند، داده های جدیدی دریافت می کنند. کد جاوا اسکریپت حتی می تواند داده ها را دریافت کرده، محاسباتی بر روی آن انجام داده و درخواست دیگری را ارسال کند، و همه اینها بدون دخالت کاربر است. چنین چیزی قدرت XMLHttpRequest است که می تواند هر آنچه را که می خواهد در سمت سرور یا کلاینت، با سرور مبادله نماید، حتی بدون آنکه کاربر از اتفاقاتی که درحال انجام است باخبر شود. نتیجه، تجربه ای دینامیک، پاسخگو، با تعامل بالا، شبیه یک برنامه desktop است، اما همه با نیروی اینترنت پشت آن.

افزودن چند خط جاوا اسکریپت

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

دریافت داده های فرم: کد جاوا اسکریپت، بیرون کشیدن داده ها از فرم HTML شما و فرستادن آنها به سرور را آسان می نماید.

تغییر مقادیر بر روی فرم: کد جاوا اسکریپت همچنین به روز رسانی یک فرم، از ست کردن مقادیر فیلدها تا جایگزین کردن تصاویر را آسان می نماید.

تجزیه (Parse) کردن HTML و XML: شما از کد جاوا اسکریپت به منظور دستکاری DOM (بخش بعد را ببینید) و کار با ساختار فرم HTML و هر داده XMLی که سرور بازگشت می دهد، استفاده خواهید کرد.

برای دو مورد اول، شما باید به خوبی با متد getElementById()، آنچنان که در لیست 2 نشان داده شده است، آشنا باشید.

لیست 2. گرفتن و ست کردن مقادیر فیلد با استفاده از کد جاوا اسکریپت

کد:
// Get the value of the "phone" field and stuff it in a variable called phone 
var phone = document.getElementById("phone").value; 

// Set some values on a form using an array called response 
document.getElementById("order").value = response[0]; 
document.getElementById("address").value = response[1];
عملا در اینجا هیچ چیز قابل توجهی وجود ندارد و این خوب است! شما باید درک کند که هیچ چیز پیچیده و ترسناکی درباره این وجود ندارد. زمانیکه شما XMLHttpRequest را خوب یاد گرفتید، بقیه برنامه Ajax شما کدهای ساده جاوا اسکریپت شبیه آنچه در لیست 2 نشان داده شده خواهد بود، که با کمی HTML، هوشمندانه مخلوط شده است. پس بعضی اوقات کمی DOM مؤثر واقع می شود... بیایید نگاهی به آن بیاندازیم.

نازک کاری با DOM

آخرین مورد از لحاظ ترتیب، DOM یا Document Object Model است. برای بعضی از شما، DOM کمی ترسناک به نظر می آید -- اغلب توسط طراحان HTML استفاده نمی شود و حتی برای کد نویسان جاوا اسکریپت کمی غیر معمول است، مگر اینکه شما وارد موارد حرفه ای برنامه نویسی شده باشید. جایی که شما DOM را در برنامه های سنگین Java و C/C++ خواهید یافت، در حقیقت همان جایی است که DOM در سختی و مشکل بودن یادگیری کمی شهرت پیدا کرده است.

خوشبختانه استفاده از DOM در تکنولوژی جاوا اسکریپت ساده و بیشتر قابل درک است. من به شما نشان خواهم داد که چگونه از DOM استفاده کنید یا حداقل چند نمونه کد به شما ارائه خواهم کرد، حتی اگر به نظر گمراه کننده آید. خواهید فهمید که می توانید بدون اینکه با DOM کار کنید، به خوبی وارد Ajax شوید و آن مسیری است که من قصد دارم به شما نشان دهم. من در مقالات بعدی دوباره به DOM می پردازم اما برای اکنون فقط بدانید که خارج از این بحث است. زمانیکه شما شروع به انتقال XML ما بین کد جاوا اسکریپت و سرور کرده و فرم HTML را تغییر دادید، دوباره در DOM عمیق می شوید. برای اکنون انجام بعضی پیشرفت های مؤثر Ajax بدون DOM ممکن است، پس فعلا آن را کنار بگذارید.

نوشته شده در تاریخ دوشنبه 14 بهمن 1387    | توسط: علیرضا حقده    | طبقه بندی: تکنولوژی ajax،     | نظرات()