تلفیقی جذاب از دو فناوری جالب

هر وقت شما صفحه‌ای را درخواست می‌کنید (به این معنی که نشانی آن صفحه را در مرورگر خود وارد می‌کنید)، یک درخواست HTTP برای سرور فرستاده می‌شود و جواب آن که به صورت HTML است، توسط مرورگر شما رندر و به شما نمایش داده می‌شود. حال فرض کنید صفحه شما بسیار سنگین باشد و المان‌های مختلفی را در بر گیرد و سرعت اینترنت هم کند باشد و شما بخواهید در سایت خود جستجو کنید یا وارد سایت شوید. در این صورت آیا به نظر شما نیاز است که تمام صفحه توسط درخواست‌تان برای سرور شما ارسال شود؟ آیا تمام المان‌های موجود در صفحه را نیاز دارید؟

جواب این سوال‌ها خیر است، اما راه‌حل چیست؟ مگر می‌شود بدون این که تمام صفحه دوباره درخواست شود اطلاعات را به سمت سرور فرستاد؟

جواب بله است. شما با استفاده از فناوری AJAX (ایجکس) که سرواژه عبارت (Asynchronous Javascript XML) است این کار را انجام دهید.

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

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

اما این که این تکنولوژی چگونه به خدمت وب در آمده و امروز خیلی از سایت‌ها برای بهبود کارایی و راحتی کار کاربران خود از آن استفاده می‌کنند، از حوصله این بحث خارج است.

در ادامه به نحوه استفاده از AJAX توسط jQuery می‌پردازیم، در شماره‌های قبلی با jQuery آشنا شده‌ایم.

برای استفاده از AJAX در jQuery باید از تابع ajax استفاده کرد، الگوی اصلی این تابع به صورت زیر است

$.ajax({name:value, name:value, ... })

همان طور که در کد بالا مشخص است، پارامتر‌های ورودی این تابع از key‌/‌value هستند، یعنی به صورت 2 مقداری که یک مقدار نام متغیر و دیگری مقدار متغیر را مشخص می‌کند.

پارامتر‌های اصلی این تابع چه چیزهایی هستند؟

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

Type: نوع درخواست را مشخص می‌کند، می‌تواند get یا post یا... باشد.

Username: نام کاربری را مشخص می‌کند در صورتی که برای پاسخگویی به درخواست نیاز به احراز هویت وجود داشته باشد.

Password: رمز عبور را مشخص می‌کند، که همراه با پارامتر Username معنا پیدا می‌کند.

data: داده‌هایی را که قرار است برای سرور ارسال شود مشخص می‌کند، مثلا در همان مثال فرم ورود، مقدار username و password داده‌هایی هستند که قرار است برای سرور ارسال شوند.

dataType: نوع داده‌ای را که قرار است سرور به عنوان خروجی به شما جواب دهد، مشخص می‌کند.

Success: تابعی است که وقتی عملیات با موفقیت انجام شد اجرا می‌شود، به طور مثال در همان مثال فرم ورود نمایش پیغام خوشامدگویی یا نمایش پیغام‌های شما در این تابع نوشته می‌شوند.

Error: اگر در ارسال اطلاعات یا دریافت اطلاعات با مشکلی مواجه شویم این تابع به جای تابع success فراخوانی می‌شود.

Complete: تابعی است که بعد از 2 تابع بالا فراخوانی می‌شود.

تا اینجای کار تا حدودی با تابع ajax آشنا شدیم، حال برای نمونه یک مثال در زیر آورده‌ایم که بیشتر با این تابع و نحوه استفاده از آن آشنا خواهید شد.

«html»

«head»

«script type=»text/javascript» src=»jquery.js»»«/script»

«script type=»text/javascript»»

$(document).ready(function(){

$(«button»).click(function(){

$.ajax({url:»http://sample.com»,

error:function(){

alert(‘error’);

},

success:function(result){

alert(‘success’);

}});

});

});

«/script»

«/head»

«body»

«button»Change Content«/button»

«/body»

«/html»

در کد بالا با زدن دکمه یک درخواست برای نشانی http:‌/‌‌/‌sample.com فرستاده می‌شود، اگر این عمل با موفقیت انجام شود پیغام success و اگر با مشکل مواجه شد، پیغام error در خروجی درج می‌شود.

امیربهاءالدین سبط‌الشیخ