آموزش مقدماتی Ajax (ای جکس)

[eAmin]

سلام.
در این تاپیک به آموزش مقدماتی و بسیار پایه ای از Ajax می پردازیم.

همچنین، کتابهای مفید در رابطه با آموزش Ajax:

[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

[eAmin]

سلام.

این روزها کسانی که برنامه نویسی وب انجام می دهند در بین اونها شما کمتر کسی رو می بینید که با ای جکس آشنایی نداشته باشه.شاید شما هم دوست داشته باشید بدونید این ای جکس اصلا چی هست. پس اگر می خواین یاد بگیرید از اینجا به بعد رو کامل بخونید.

AJAX چیه؟

این تکنیک مخفف Asynchronous JavaScript And XML هست و به مفهوم استفاده نامتقارن Javascript و XML بوده که به صورت ای جکس تلفظ می شه(بعضی ها به اشتباه این رو آژاکس تلفظ می کنن.). جالبه که بدونید مقدمات استفاده از این تکنولوژی از سالهای پیش در مرورگرهای وب قرار داده شده بود، ولی با وجود استفاده ی مایکروسافت از این تکنیک به صورت محدود در نرم افزار Outlook کسی به موارد استفاده از اون به صورت همه گانی پی نبرده بود.در حقیقت تاریخچه ی واقعی AJAX به عنصری مخفی با نام IFrame در HTML بر می گرده که با استفاده از اون برنامه نویسان وب می تونستند کارایی شبیه به AJAX انجام بدند.

برای درک بهتر AJAX به عنوان مثال فرض کنید که در Inbox ایمل تون در GMail هستید. و در اون موقع یک ایمی جدید، بدون این که شما بر روی دکمه ای کلیک کنید، به شما خبر می ده که یک ایمیل جدید دریافت کردید. تا قبل از AJAX برای با خبر شدن از تغییرات اعمل شده در صفحه حتما باید صفحه رو Refresh می کردید.



مفهوم عملکرد AJAX.

برای نوشتن ساده ترین کد ای جکس باید با مفاهیم HTML, Javascript,DOM و یک زبان سمت سرور مثل : ASP,PHP,ASP.NET و... آشنایی داشته باشید. اگر چه برای گسترش یک صفحه AJAX پیچیده داشتن مکفی در رابطه با XML,CSS نیز از ملزومات است.

همونطور که همه ی برنامه نویسان وب با خبر هستند، هر مرورگر وب مثل : IE,FF,Opera و... دارای تعداد زیادی Object (شئی) درونی به صورت API در زمینه های مختلفی چون DOM,CSS,HTML,XML و.. می باشد.

شاید جالب باشه بدونید سناریوی اصلی AJAX، حول محور یک Object به اسم XMLHTTPRequest می چرخه که اونو به نام مخفف XHR مشناسند. این شئی نقش اول و تقریبا همه کاره ی کدهای AJAX هست. این Object در یک کد Clinet-Side و با استفاده از Javascript اجرا شده و سپس در یک زمان معین، یک کد Server-Side رو بدون متوجه شدن بازدید کننده سایت، اجرا می کنه و نتیجه ی اجرای کد رو از سرور می گیره و مجددا بدون Refresh شدن صفحه وب، در اختیار مرورگر قرار می ده و بعد جاوا اسکریپت نتیجه ی باز گشتی رو به دلخواه برنامه نویس، مورد استفاده قرار می ده و یا در قسمتی از صفحه ی مقابل کاربر ( بدون Refresh شدن صفحه ) می ده.

برای نوشتن کدها شما می تونید از Notepad استفده کنید و کدهاتون رو درونش بنویسید و اون رو به نام AJAX.HTM ذخیره کنید.

اول این کدها رو بنویسید یا کپی کنید. ( اگر بنویسید بهتر متوجه می شید )

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

[eAmin]

بررسی کدها:

اول برای گذاشتن یک کد جاوا اسکریپت در یک صفحه وب باید از تگهای <Script> برای شروع و </Script> به پایان می رسونید و با Language="Javascript" به مرورگر می فهمونیم که این اسکریپت از مسفر جاوا برای اجرا استفاده کنه. توجه کنید که کدهای جاوا اسکریپت به صورت Casesesitive هست و به کوچیک بزرگی حروف حساسه.

بعد یک تابع AJAX تعریف می کنیم که هیچ خروجی خاصی نداره، بعد شئی به نام XMLHttpRequest وجود داره که همه کارهای AJAX رو به عهده داره. در ابتدای تابع AJAX یک نمونه ( Instance ) از شئی اشاره شده گرفته می شه و از این به بعد با استفاده از نام XHR، از متدها و خصوصیات شئی XMLHttpRequest استفاده می شه.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

این قسمت از کد همون شرط بدون IF با علامتهای ؟ و : که همون مفهوم رو داره برای کوتاه شدن کد استفاده کردیم. ما برای این که مرورگرها از عدم وجود استاندارد بین مرورگرها، ما از دستورات شرطی یا شبیه به این استفاده می کنیم. خوب بعد از ایجاد یک Instance به اسم XHR حالا به بررسی قطعه کد زیر می پردازیم.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

در شئی مورد نظر، یک Property به نام onreadystatechange وجود داره که با استفاده از این ساختار به عنوان یک Event Handler مورد استفاده قرار می گیره. این رویداد، پس از فراخوانی یک کد Server-Side بلافاصله به طور خودکار صدا زده می شه و کدهای داخلش اجرا می شه. این شئی علاوه بر Property ذکر شده، یک Property دیگه داره به اسم ReadyState داره که از نوع عددی هست و نشون دهنده وضعیت عمل کرد Server در ارسال پاسخ است. در این Property عددی بین 0 تا 4 (به صورت خودکار) قرار میگیره که هر عدد مثل شکل زیر مفهوم خودش رو داره.

همونطور که می بینید، با استفاده از این Property، به راحتی وضعیت درخواست ارسالی به سرور، قابل پیگیری هست. در این مثال شرطی رو نوشتیم که به محض قرار گرفتن عدد 4 در خصوصیت ReadyState کد زیر برای قرار دادن نتیجه کار به داخل Textbox دوم استفاده می شه.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

شئی XMLHttpRequest یک Property دیگه داره به نام ResponseText و از نوع String است که نتیجه ی ارسالی از سرور، به طور خودکار توی اون قرار می گیره هم.نطور که می بینید سمت چپ علامت مساوی کد فوق از ساختار Document Object Model )DOM( استفاده شده که نتیجه ی ارسالی از سرور رو مستقیم در Textbox به نام time قرار می ده در فرم وبی به نام FormX از همین Document (صفحه ی وب) قرار می ده. حالا به بررسی دو متد مهم به نامهای open و send که عملیات ارسال درخواست به سرور رو انجام می ده می پردازیم.

متد open وظیفخ اعمال تنظیمات قبل از ارسال، و متد send وظیفه ارسال درخواست رو به عهده داره و با اینکه این دو خط کد، بعد از بلوک رویداد onreadystatechange قرار گرفتند، ولی تا زمانی که متد send شئی XHR فراخوانی شده، Event Handler فراخوانی نمی شه. ناگفته نمونه متد open دارای دو پارامتر ضروری ( دو پارامتر اول ) و یک پارامتر غیر ضروری ( پارامتر آخر ) است. در اولین پارامتر این متد، می تونید از دو مقدار GET و POST استفاده کرد، دومین پارامتر url ( نام و مسیر ) یک فایل Server رو تعیین می کنه که در مثال ما به نام time.asp توی همون پوشه ی فایل HTML است.

سومین پارامتر (که به صورت پیش فرض true است)، وضعیت نامتقارن بودن یا نبودن اجراری Event Handler مربوطه رو تعیین می کنه، در صورت قرار دادن مقدار true، پس از اجرای متد send بلافاصله رویداد onreadystatechange فراخوانی می شه، ولی در صورت false بودن، اول منتظر اتمام پردازش سرور رو ارسال پاسخ داده شده و سپس رویداد مورد نظر، فراخوانی مشه.

وحالا در نهایت متدی به نام send مقداری رو به صورت پارامتر به سمت سرور ارسال می کنه که در مثال ما، به دلیل عدم نیاز به ارسال مقادیری به سرور، از واژه null استفاده شده. حالا با تمام شدن توضیحات تقریبا کامل، حالا به توضیح فرم وب در کد Html می پردازیم.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

همونطور که می بینید فرمی به نام FormX با 2 عدد Textbox که اسم یکی از ونها time است تعریف شده. در رویداد onchange اولین Textbox تابع AJAX رو فراخوانی می کنه. حالا شما باید یه فایل جدید با نام time.asp درست کنید با Notepad و این کدها رو درونش قرار بدید.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

این کدها بسیار ساده است این کار رو که ساعت سرور رو از طریق تابع داخلی Time گرفته و به واسطه متد write توی خروجی نشون می ده. خوب کار ما تموم شد حالا باید فقط امتحانش کنید برای این کار شما باید این دوتا فایل AJAX.htm و time.asp رو درون یک پوشه ای که در یک سرور وب قرار بدید و فایل AJAX.htm رو اجرا کنید، بعد در Textbox سمت چپ یک کلمه رو تایپ کنید و بعد در Textbox سمت راست کلیک کنید می بینید که ساعت سرور به شما نشون داده می شه ولی بدون Refresh شدن صفحه. پایان

امیدوارم مورد قبول بوده باشه.

[Milad8]

سلام
حیفه به تاپیک به این مهمی توجه نشه
متاسفانه تکنولوژی Ajax هنوز جایگاه مطلوبی تو ایران نداره .
کتابهای مرجع به زبان فارسی هم تعدادشون کمه .
امین عزیز دستتون درد نکنه ... کارتون عالیه
اگه ممکنه آموزشو ادامه بدید.

[eAmin]

سلام
حیفه به تاپیک به این مهمی توجه نشه
متاسفانه تکنولوژی Ajax هنوز جایگاه مطلوبی تو ایران نداره .
کتابهای مرجع به زبان فارسی هم تعدادشون کمه .
امین عزیز دستتون درد نکنه ... کارتون عالیه
اگه ممکنه آموزشو ادامه بدید.

سلام.

مرسی

خوش اومدی

این آموزشی که من دادم خیلی مختصر بود یه E-Book فارسی هست، لینک دانلودش رو همین روزا می زارم آخه یکمی سرم شلوغه. توی همین انجمنها پیداش کردم و الان یادم نیست که از کی و کجا بود.

[eAmin]

سلام.

یک E-Book برای آموزش ای جکس که به صورت کامل از اول توضیح داده، کاملا فارسی پیشنهاد می کنم حتما دانلود کنید چون خیلی بدرد بخور هست.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

، راستش لینک اصلی این رو که واسه ی دانلود گذاشته بود پیدا نکردم، به همین خاطر من آپلودش کردم

[DaRiOuShJh]

مرسی امین جان
خیلی به کار میاد
حجمشم تقریبا 1.9 مگابایت هست که میشه با دایال آپ حداکثر 7 دقیقه گرفتتش

[eAmin]

ممنونم داریوش عزیز

[m1r@]

امین جان من فایلش رو دانلود کردم ولی موقع unzip کردن میگه فایل corrupt هستش. چه کنم؟

[DaRiOuShJh]

من دانلود کردم مشکلی نداشت
احتمالا کامل دانلود نشده
دوباره امتحان کنید