AJAX ِیک نوع برنامه نوِیسِی است که در سال 2005 توسط گوگل به طور عمومِی اِیجاد شد.باAJAX مِی توانِید Web Application هاِی بهتر , سرِیعتر و بسِیارکاربر پسند اِیجاد کنِید.
Ajax راهی برای تقسیم کردن صفحات وب به قسمتهای قابل Update است به طوریکه Update کردن بخشی از صفحه کل صفحه را Update نکند.در واقع Ajax پاسخی به مشکلات Web Application ها در چند سال گذشته است.
کافی است یکبار یک سایت طراحی کنید تا بفهمید که Postback های اضافی و بی مورد و load شدن های وحشتناک آن هم به خاطر تغییر، مثلا تاریخ در یک تقویم چه دردسری را برای طراح و کاربر ایجاد میکند.وقتی صحبت از انداختن بار CPU از سرور به کامپیوتر کاربر میشود, یعنی از java script استفاده شده است.
در واقع سیستم استفاده از script که به دلیل ناامنی به کناری گذاشته شده بود با تلفیق جدید دوباره احیا شد.AJAX مبتنِی برجاوا اسکرِیپت و HTTP Request است.
معرفِی AJAX :
آجاکس ِیک زبان برنامه نوِیسِی جدِید نِیست بلکه ِیک تکنِیک جهت اِیجاد Web application هاِی بهتر و سرِیعتر و بسِیار تعاملِی است.
با آجاکس , جاوا اسکرِیپت مِی تواند مستقِیما با سرور ارتباط برقرار کند, و از شِی جاوا اسکرِیپتِی XMLHttpRequest استفاده کند.
با اِین شِی , جاوا اسکرِیپت مِی تواند داده را با ِیک Web server , بدون لود مجدد صفحه , مبادله کند.
آجاکس از انتقال ناهمزمان داده ها(درخواستهاِی HTTP) در بین browser و web server استفاده مِی کندو اجازه مِی دهد صفحات وب به جاِی درخواست کل صفحه, اطلاعات کمِی را از سرور درخواست کنند.
تکنِیک آجاکس, application هاِی اِینترنت را کوچکتر و سرِیعترو بسِیار کاربرپسند مِی کند.
آجاکس ِیک تکنولوژِی browser وابسته به نرم افزار web server است و مبنِی بر استانداردهاِی وب است.در ادامه لیستی از این استانداردها را می بینید:
• JavaScript
• XML
• HTML
• CSS
استانداردهاِی وبِی که آجاکس مبنِی بر آنها است , به خوبِی تعرِیف شده اند و توسط browser هاِی زِیادِی پشتِیبانِی مِی شوند.
Application هاِی آجاکس و browser و platform بهم وابسته اند.
Web application ها مزاِیاِی بیشتری نسبت به application هاِی دِیگر دارند.
آنها مِی توانندبه داده ی بیشترِی دستِ یابندونصب و پشتِیبانِی آنها بسِیار آسان است وجهت توسعه راحترند.به هر حال , application هاِی اِینترنتِی همانند desktop application هاِی سنتِی همِیشه غنِی و کاربرپسند نِیستند.با آجاکس , internet application ها مِی توانند غنِی تر و کاربرپسندتر ایجاد شوند.
Httprequest آجاکس (ajax httprequest)
در کد گذارِی سنتِی جاوا اسکرِیپت, اگر اطلاعاتِی از یک دِیتابِیس یا یک فاِیل در سرور مِی خواستِیدویاجهت ارسال اطلاعات کاربر به یک سرور، مِی بایست یک فرم HTML درست مِی کردِیدو داده ها را به سرور مِی فرستادِیدِPOST)) یا از آن مِی گرفتِید(GET).
کاربر جهت درِیافت ِیا ارسال اطلاعات باِید روِی دکمه ی “Submit” کلِیک مِی کرد, منتظر پاسخگوِیِی سرور مِی ماند, سپس یک صفحه ی جدِید با نتِیجه لود مِی شد.سرور در هر بار که کاربر ورودِی را ارائه کند,ِیک صفحه ِی جدِید برمِی گرداند, وب application هاِی سنتِی خِیلِی کند اجرا و کمتر کاربرپسند هستند .
با آجاکس , جاوا اسکرِیپت در مِیان شِی JavaScriptXMlHttpRequestمستقِیما با سرور در ارتباط است .
با ِیک درخواست HTTP , صفحه ِی وب مِی تواند ِیک درخواست به سرور درست کند, و پاسخِی از ِیک وب سرور,بدون لود مجدد صفحه , درِیافت کند.
کاربر در همان صفحه مِی ماند, و به درخواستهاِی اسکرِیپتِی صفحات توجهِی ندارد.
مثالِی از AJAX
براِی درک چگونگِی کار آجاکس , بِیاِیِید ِیک Ajax application کوچک اِیجاد کنِیم.
ابتدا، ِیک فرم HTML ساده با دو متن اِیجاد مِی کنِیم : username وtime .
فِیلد username با کاربر پر مِیشود و فِیلد time با استفاده از آجاکس پر مِی شود.
فاِیل HTML را testajax.htm بنامِید .
قطعه کد لازم در زِیر نشان داده شده است.
توجه کنِید که اِین فرم HTML دکمه ِی submit ندارد.
فاِیل HTML را testajax.htm بنامِید .
توجه کنِید که اِین فرم HTML دکمه ِی submit ندارد.
بخش بعدِی در مورد keystone هاِی آجاکس توضِیحِی مِی دهد.
پشتِیبانِی Browser از آجاکس Keystone هاِی آجاکس , شِی XMLHttpRequest است.
Browserهاِی مخــتلف , ازمــــتدهاِی مختلفِی جهت اِیجاد شِی XMLHttpRequest استفاده مِی کنند.
Internet Explorer از ِیک شِی ActiveX استفــــاده مِی کند, در حالِی که browser هاِی دِیـــگر از شِی توکار JavaScript فراخوانده شده در XMLHttpRequest استفاده مِی کنند.
براِی اِیجــاد اِین شِــی , و تبادل با browser هاِی مختلف , از عبارت “try …catch” استفاده مِی کنِــیم.
بـــِیاِیِید فاِیلtestAjax.htm را با با جاوا اسکرِیپتِی که شِی XMLHttpRequest را اِیجاد مِیکند, به روز کنِیم: دراِین مثال ابتدا ِیک متغِیر xmlHttp جهت نگه داشتن ِیک شِی XMLHttpRequest اِیجاد مِی کنِیم.
سپس سعِی مِی کند با دستور () xmlHttp=new XMLHttpRequestِیک شِی اِیجاد کند.اِین براِی browser هاِی Fierfox,Opera و Safari است.
اگر آن ممکن نبود, براِی Internet Explore 6.0 سعِی مِی کند با دستور xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”) ِیک شِی اِیجادکند، و اگر آنهم ممکن نبود، براِی Internet Explorer 5.5 سعِی مِی کند با دستور xmlHttp=new ActiveXObject(“Microsoft.XMlHTTP”) ِیک شِی اِیجاد کند.
اگر هِیچ کدام از اِین سه متد کار نکند , کاربر ِیک browser بسِیار قدِیمِی دارد و ِیک اخطار مبنِی براِینکه browser اش آجاکس را پشتِیبانِی نمِی کند, مِی بِیند.
توجه: کد وِیژه ِی browser بالا طولانِی ونسبتا پِیچِیده است.
اما شما مِی توانِید هر زمان که خواستِید ِیک شِی XMLHttpRequest اِیجاد کنِید , آن را کپِی کنِید.
شِی XMLHttpRequest با استفاده از شِی XMLHttpRequest ,برنامه نویس مِی تواند ِیک صفحه داراِی داده از سرور را بعد از لود صفحه , به روز کند.آجاکس به طور عمومِی در سال 2005 توسط Google sugestایجاد شد.
Google Suggest از شِی XMLHttpRequest براِی اِیجاد ِیک رابط وب پوِیا , استفاده مِی کند.زمانِی که مطلبِی را جهت جستجو در google تاِیپ مِیکنِید، جاوا اسکرِیپت،متن شما را به ِیک سرور ارسال مِی کند و سرور لِیست پِیشنهادهاِیش را بر مِی گرداند.
مرورگرهاِی 5.0IE Safari 1.2, , 8 opera , Mozila 1.0/Firefox و Netscape 7 , شِی XMLHttpRequest را پشتِیباتِی مِی کند.
قبل از فرستادن داده ها به سرور , مِی باِیست سه خصوصِیت مهم شِی XMLHttpRequest را بدانِیم.
خصوصِیت onreadystatechange بعد از ِیک تقاضا به سرور , نِیازمند تابعِی هستِیم که بتواند داده ای که توسط سرور برگردانده مِی شود را درِیافت کند.خصوصِیت onreadystatechange , تابعِی را که پاسخ ِیک سرور را پردازش مِی کند, ذخِیره مِی کند.
کدِی که در زِیر نوشته شده است ِیک تابع خالِی تعرِیف مِی کند و خصوصِیت onreadystatechange را در ِیک زمان تنظِیم مِی کند: خصوصِیت readyState خصوصِیت readyState وضعِیتهاِی پاسخ سرور را نگه مِی دارد.
هر بار که readyState تغِیِیر مِی کند, تابع onreadystatechange اجرا خواهد شد.
در زِیر مقدار هاِی مجاز خصوصِیت readystate آورده شده است: براِی آزمودن اِینکه آِیا پاسخ کامل است(به اِین معنا که مِی توانِیم داده هاِیمان را بگِیرِیم)، باِید ِیک عبارت if به تابع onreadychange بِیفزاِیِیم.
خصوصِیت responseText داده ِی برگشتِی از سرور با خصوصِیتresponseText قابل بازِیابِی است.
در کد زِیر , ما مقدار فِیلد “time” را مساوِی با responseText تنظِیم کرده اِیم: بخش بعدِی نشان مِی دهد که چگونه بعضِی از داده ها را ازسرور درخواست کنِیم.
ارسال ِیک درخواست به سرور جهت بدرقه ِی ِیک درخواست به سرور, از متدهاِی open() و send() استفاده مِی کنِیم.
متد open() سه آرگومان مِی پذِیرد.
آرگومان اول براِی تعِیِین متد(GET ِیا POST) جهت ارسال درخواست استفاده شود.
آرگومان دوم URL اسکرِیپت سمت سرور را مشخص مِی کند.آرگومان سوم مشخص مِی کند که درخواست باِید به طور ناهمزمان کنترل(handled) شود ِیا نه.متد send() , درخواست را به سرور همراهِی و بدرقه مِی کند .با فرض اِینکه فاِیل HTML وASP در ِیک مسِیر هستند, کد به صورت زِیر است: اکنون باِید در مورد زمان اجرا ِی تابع آجاکس تصمِیم گِیرِی کنِیم.
براِی مثال هنگامِی که کاربر در فِیلد username متنِی را تاِیپ مِی کند , اجازه دهِیم تابع در"پشت صحنه " اجرا شود.مانند زِیر: فاِیل testAjax به روز شده با قطعه کد با لا به صورت زِیر است: در بخش بعدِی AJAX application را با اسکرِیپت"time.asp" کامل مِی کنِیم.
اسکرِیپت سمت سرور ASP اکنون قصد دارِیم اسکرِیپتِی اِیجاد کنِیم که زمان جارِی سِیستم را نماِیش دهد.
خصوصِیت responceText (که در بخشهاِی قبلِی توضِیح داده شد)، داده ِی بازگشتِی از سرور را ذخِیره مِی کند .
در اِینجا مِی خواهِیم زمان جارِی را برگردانِیم.کد نوشته شده در time.asp به صورت زِیر است: توجه: با استفاده خصوصِیت Expire مدت زمان cache ِیک صفحه قبل از منقضِی شدن آن درِیک browser را تنظِیم مِی کند.اگر کاربر صفحه ِی مشابهِی را قبل از زمان انقضا بر گرداند، نسخه ِی cache شده نشان داده مِی شود.
براِی اِینکه صفحه هرگز cache نشود، باِید Response.Expire=-1 باشد.
اجراِی AJAX Application با تاِیپ متنِی در textbox مربوط بهName وسپس کلِیک در داخل text box مربوط به time نتِیجه را خواهِید دِید.
Text box مربوط به time بدون لود دوباره ِی صفحه، زمان سرور را از فاِیل time.asp مِی گِیرد.
مثالهاِی دِیگر آجاکس دِیدِیم که براِی اِیجاد چندِین application تعاملِی مِی توان از آجاکس ا استفاده نمود .در مثالهاِی آجاکسِی که در زِیر آمده است به توضِیح چگونگِی ارتباط ِیک صفحه ِی وب با ِیک وب سرور online مِی پردازِیم.
مثال 2: AJAX Database از آجاکس جهت اِیجاد ارتباطات تعاملِی و محاوره اِی با ِیک دِیتابِیس نِیزمِی توان استفاده نمود.در مثال زِیرقصد دارِیم نشان دهِیم چگونه ِیک صفحه ِی web اطلاعات را ازِیک دِیتابِیس با استفاده از تکنولوژِی آجاکس واکشِی (fetch)مِی کند.در اِین مثال با کلِیک روِی dropdown list اطلاعات مشترِی لِیست مِی شود.
توضِیح مثال: مثال بالا شامل ِیک فرم HTML ساده وِیک لِینک به ِیک فاِیل JavaScript است : همان طور که مِی بِینِید اِین ِیک کد ساده HTML است که ِیک drop down list با نام "customers" دارد.
پاراگراف پاِیِین فرم ِیک تگ div با نام "txtHint" دارد.در اِین مثال،از divهمچون مکانِی براِی نگهدارِی اطلاعات بازِیابِی شده ازِیک web server استفاده مِی شود.
هنگامِی که کاربر داده اِی را انتخاب مِی کند،تابعِی بانام "showCustomer()" فراخوانِی مِی شود.روِیداد”onchange” ،راه اندازِی براِی اجراِی اِین تابع است.به عبارت دِیگر : هر بار که کاربر مقدار باکس drop down list را تغِیِیر مِی دهد, تابع “showCustomer” فرا خوانِی مِی شود.
JavaScript آجاکس در زِیر کد جاوا اسکرِیپت نشان داده شده است.اِین کد در فاِیل "selectcustomer.js" ذخِیره شده است.
Server Page صفحه ِی سرورِی که توسط جاوا اسکرِیپت فراخوانِی شده است، ِیک فاِیل ASP به نام "getcustomer.aspx" است.
اِین کد به زبان C# نوشته شده است و نتِیجه را مانند ِیک جدول HTML بر مِی گرداند.
مثال 4: AJAX XML آجاکس مِی تواند ارتباط تعاملِی و محاوره اِی با ِیک فاِیل XML داشته باشد.در مثال زِیرقصد دارِیم نشان دهِیم چگونه ِیک صفحه ِی web مِی تواند اطلاعات را از ِیک فاِیل XML با استفاده از تکنولوژِی آجاکس واکشِی (fetch)کند.
توضِیح مثال: مثال بالا شامل ِیک فرم HTML وِیک لِینک به ِیک فاِیل JavaScript است.
همانطور که مِی بِینِید اِین ِیک فرم HTML با ِیک drop dpwn list به نام"cds" است .
پاراگراف پاِیِین فرم شامل ِیک تگ div به نام "txtHint" است.
در اِین مثال, از divهمچون مکانِی براِی نگهدارِی اطلاعات بازِیابِی شده از ِیک web server استفاده مِی شود.
وقتِی کاربر داده اِی را انتخاب مِی کند, تابعِی با نام "showCD" فرا خوانِی مِی شود.
روِیداد "onchange" راه اندازِی براِی اجراِی اِین تابع است.به عبارت دِیگر: هر بار که که کاربر مقدار باکس drop down list را تغِیِیر دهد، تابع showCD فراخوانِی مِی شود.
JavaScript آجاکس در زِیر کد جاوا اسکرِیپت نشان داده شده است .
اِین کد در فاِیل "select.js" ذخِیره شده است: Server Page صفحه ِی سرورِی که توسط چاوا اسکرِیپت فراخوانِی مِیشود, ِیک فاِیل ASP به نام "getcd.aspx" است.
بدون استفاده از تکنولوژِی آجاکس, اِین فاِیل ِیک فاِیل XML را اجرا مِی کرد .اما با بکارگِیرِی اِین تکنولوژِی به جاِی اجراِی فاِیل XML ، یک query را اجرا مِی کند ونتِیجه را به صورت HTML بر مِی گرداند.
اِین کد به زبان C# نوشته شده است: مثال 4: AJAX ResponseXML همانطور که responseText , ِیک پاسخHTTP رااز نوعstring برمِی گرداند, responseXML پاسخ را از نوع XML بر مِی گرداند .
خصوصِیت ResponseXML ِیک شِی XML document برمِی گرداند.قصد دارِیم در اِین مثال نشان دهِیم که چگونه ِیک web page ،اطلاعات را از ِیک دِیتابِیس با استفاده از تکنولوژِی آجاکس واکشِی مِی کند.اِین بار داده ِی انتخاب شده از دِیتابِیس به ِیک XMl document تبدِیل مِی شود و مِی توانِیم از DOM براِی استخراج مقدار جهت نشان دادن استفاده کنِیم.
مثال4: توضِیح مثال: مثال بالا شامل ِیک فرم HTML است که چندِین عنصر(تگ) جهت نگهدارِی داده و ِیک لِیِیک جاوا اسکرِیپت است.
اِین فرم HTML ِیک Drop Down Box به نام "customers" دارد.
هنگامِی که کاربر ِیک مشترِی را از drop down boxانتخاب مِی کند, تابعِی به نام "showCustomer()" اجرا مِی شود.روِیداد"onchange" باعث راه اندازِی اجراِی اِین تابع مِی شود.
به عبارت دِیگر: هر بار که کاربر مقدار داخلdrop down box را تغِیِیر دهد, اِین تابع فراخوانِی مِی شود.
آجاکسJavaScript در زِیر کد جاوا اسکرِیپت نشان داده شده است