به وبلاگ درباره AJAX خوش آمدید.

سلام ;

سلام به همه کسانی که به این وبلاگ اومدن ! خوش اومدین .

خوب در این وبلاگ میخوایم درباره تکنولوژی جدیدی که حتماٌ تا حالا اسمش رو شنیدید صحبت کنیم، چیزی نشنیدین؟ چه تکنولوژی؟ در چه زمینه ای؟

عجله نکنید کم کم باهاش آشنا میشیم .

خوب کمربند ها رو ببندید !

آیا از دنیای کلاسیک وب خسته شده اید؟ آیا مایلید با چهره جدید دنیای وب آشنا شوید؟

آیا می خواهید با جدیدترین فنآوری دنیای برنامه نویسی وب آشنا شوید؟ برای پرواز آماده باشید! مقصد ما یکی از استان های کشور جدید التأسیس web 2.0 است. می خواهیم با هم به دنیای هیجان انگیز AJAX سفر کنیم.

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

دیگر لازم نیست وقتی روی دکمه Submit کلیک می کنید. منتظر بارگذاری مجدد صفحه وب بمانید. همه چیز فوراٌ و به سرعت اتفاق می افتد.

تصور کنید که به صورت آنلاین در حال خواندن نامه های الکترونیکی خود در یکی از سایت های Yahoo و یا Gmail هستید، بلافاصله یادتان می افتد که باید به کسی نامه ای بفرستید. لازم نیست صفحه ای که در حال مطالعه آن هستید را ترک کنید و یا با استفاده از ترفندهایی مانند Right Click   - Open in new window یک پنجره جدید باز کنید و منتظر بارگذاری مجدد صفحه شوید. شما فقط می خواهید یک پنجره جدید باز کنید که داخلش نامه خود را تایپ کنید.

چه نیازی به بارگذاری مجدد آن همه اطلاعات جزئی و جنبی (مانند لوگوی سایت، نام ID شما و ...) است که در اطراف اطلاعات اصلی به نمایش درآمده اند! AJAX همین کار را برای شما انجام می دهد. وقتی که نامه خود را ارسال کردید نیز فقط همان پنجره بسته می شود و چند بایت برای سایت مقصد ارسال می شود و اینترفیس صندوق پستی نامه های شما بدون اینکه تغییری کند و یا دوباره به نمایش درآید همچنان پیش چشم شما و منتظر فرمان بعدی است. در دنیای AJAX دکمه Back و Forward مرورگر معنی و کاربرد خود را تقریباٌ از دست می دهند.

همه دکمه های مورد نیاز داخل اینترفیس سایت موجود می باشد. برخلاف جهان web 1.0، در دنیای AJAX گشت و گذار در وب لزوماٌ خطی نیست. اگر می خواهید از یک فروشگاه الکترونیکی خرید کنید، می توانید محصول مورد نظرتان را به روش Drag&Drop  داخل سبد بیاندازید و با فشردن دکمه نهایی، خرید خود را ثبت کنید. پیغام ثبت موفقیت آمیز سفارش برای شما نمایش داده می شود و کار تمام است. دیگر نیازی به کارهای اضافی و وقت گیر نیست!

خوب دیگه بیشتر از این خستتون نمی کنم ، منتظر پست های بعدی من باشید تا بیشتر با این تکنولوژی آشنا بشیم.

تعریف آژاکس  (آجاکس AJAX)

سلام

خوب حالا یه تعریف کلی و جامع درباره AJAX واستون بنویسم.

آژاکس (آجاکس AJAX) سرنام عبارت Asynchronous JavaScript and XML یا XML و جاوااسکریپت (Java Script) غیر همزمان می‌باشد.

اصطلاح ‌Ajax را اولین بار کارشناسی از شرکت Adaptive Path به نام جسی جیمزگرت در مقاله‌ای با عنوان <آژاکس؛ رهیافت جدیدی در برنامه‌های تحت وب> مطرح کرد و خیلی سریع مورد استقبال گسترده برنامه نویسان وب در سراسر جهان قرارگرفت. اعتقاد عمومی این است که تاریخچه به‌کارگیری تکنیک مذکور به پیدایش نرم‌افزار Outlook WebAccess و استفاده از فرمان XMLHttpRequest که مایکروسافت ابداع کرده و در نرم‌افزار اینترنت اکسپلور به‌کار رفته است، برمی‌گردد. اما امروزه اغلب مرورگرهای مهم و شناخته‌شده (از جمله فایرفاکس) از آن پشتیبانی می‌کنند و دیگر یک فناوری محدود به اینترنت اکسپلورر نیست.

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

• ارائه استاندارد پایه با استفاده از XHTML و CSS
• نمایش پویا و تعامل با کاربر با استفاده از DOM(Document Object Model)
• دستکاری و تبادل اطلاعات با استفاده از XML و XSLT
• بازیابی غیر همزمان داده ها با استفاده از XMLHttpRequest
• تقید همه چیز با هم (JavaScript)

چرا Ajax این قدر اهمیت‌دارد؟

شاید از خودتون بپرسید اصلاً چرا این تکنولوژی اهمیت داره؟

فناوری آژاکس جدید است و شگفت‌انگیز به‌نظر می‌رسد. ولی در حقیقت کل این شعبده بر اساس فناوری‌هایی بنا شده است که هم‌اکنون موجودند: جاوا اسکریپت و XML. هر دوی این فناوری‌ها تا حد زیادی باز هستند و منحصر به شرکت خاصی نیستند. به همین دلیل این روزها تمام محافل دنیای برنامه نویسی مملو از مقالات و تحلیل‌هایی درباره Ajax است. به عنوان نمونه می‌توانید صفحه نخست سایت موسوم به کانال شبکه برنامه نویسان سان را بازکنید.

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

یک برنامه کاربردی آژاکس طبیعت Start-Stop-Start-Stop فعل و انفعال در وب را بااستفاده از مطرح کردن واسطی میان کاربر و سرور به نام موتور آژاکس بر طرف نموده است. بنظر میرسد که مانند اضافه کردن یک لایه به برنامه کاربردی است تا برنامه را کمتر به سمت سرور فرستاده و از آن پاسخ دریافت نمایید. اما برعکس این حالت درست می باشد.

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

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

مشکلات آژاکس

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

 پس باید پیش از شروع بارگذاری موتور آژاکس از اجازه داشتن اجرای جاوااسکریپت روی مرورگر کلاینت اطمینان پیدا کرد. البته در مورد IE نسخه ۶، به این مسئله نیز باید توجه کرد که شی XMLHttpRequest به صورت ActivX پیاده سازی شده و در نتیجه کاربر باید امکان استفاده از ActivXها را نیز به مرورگر بدهد.

مسئله دیگری که باید به آن توجه داشت، این است که کدهای جاوااسکریپت برنامه را هر کسی به راحتی می‌تواند ببیند. در نتیجه بهتر است قسمت‌هایی از برنامه را که مربوط به امنیت، یا منطق پردازشی برنامه می‌شود، سمت سرور نگه داریم. به نظر می‌رسد ساخت سیستمی که ترکیب متوازنی از پردازش‌های سمت سرور و یک موتور آژاکس قوی در طرف کلاینت باشد، می تواند را حا مناسبی باشد.

کدام سایت‌ها از آژاکس استفاده کرده‌اند؟

خوب !! حالا بررسی کنیم ببینیم چه سایت هایی از این تکنولوژی استفاده کردند؟ دنیای برنامه‌نویسی وب هنوز درگیر هیجانات مربوط به آشنایی با این پدیده است و در حال بررسی مشکلات تکنیکی و هضم و جذب آن در بافت برنامه‌های تحت وب می‌باشد. به همین دلیل میزان استفاده عملی از آن چندان گسترده نیست. اما چون کارایی آژاکس دیگر برای همه ثابت شده است، حرکت‌های بزرگی در سراسر اینترنت به سمت استفاده از این فناوری در جریان است. از جمله اینترفیس نسخه دوم Yahoo Mail که به نسخه بتا معروف است و فعلا در دسترس کاربران سرویس غیر رایگان یاهو قراردارد، از همین فناوری استفاده می‌کند که به زودی اینترفیس جدید در دسترس عموم قرار می‌گیرد.

در پایان این مقاله به این موضوع اشاره می کنم که در حال حاضر یکی از معروفترین سایتهایی که از این فناوری استفاده می نماید Google است که آخرین ورژن Google Maps را می توان به عنوان یکی از بارزترین نمونه های استفاده ازAJAX نام برد.

اینگونه پروژه ها ثابت می کند که AJAX فقط حرف فنی نیست و نمونه های عملی در جهان واقعی کاربردی دارد.

برخی از شناخته شده ترین و خوشنام ترین بسته های نرم افزاری آجاکس همچون : Backbase, JackBe, General Interface و Tibco's امکانات عالی برنامه نویسی را در کنار محیط توسعه پیشرفته در اختیار شما می نهند. ماژول های خبره برای رویدادها و دیباگر های (debug) حرفه ای نیز، بخشی از این امکانات هستند که با کمک آنها شما می‌توانید برنامه های کاملی را برای اجرا در محیط محدود و بسته مرور گر اینترنت خلق کنید.

برنامه هایی در حد و اندازه نرم افزارهای کامپایل شده تحت ویندوز (Native code) .

شروع اولین کار

خوب بهتره به جای بحث الکی بر روی نحوه ی به وجود امدن این تکنیک و توضیحات بی مورد یک کار عملی رو با هم تجربه کنیم .

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

خوب طرح کلی کار از این قرار هست که ما یک فرم داریم که کاربر برای ثبت نام در سایت از اون استفاده می کنه .
حالا من می خوام قبل از ارسال اطلاعات وکلیک روی دکمه send بدون رفرش صفحه نام کاربری کاربر رو چک کنم و در صورت تکراری بودن نام وارد شده کاربر رو از این خبر مطلع کنم تا قبل از ارسال اطلاعات این مشکل رو رفع کنه .


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

ضمناً لازم اینجا یه تشکر ویژه از اعضای سایت iran php به خاطر کمکایی که به من کردن داشته باشم. از همه ممنونم.

شروع اولین کار (2)

تا اینجا ظاهر کار رو داریم .

حالا باید کاری کنیم که با کلیک روی دکمه check وجود یا عدم وجود نام کاربری در بانک اطلاعاتی برسی بشه .

تنها کاری که ما باید انجام بدیم ارسال نام کاربری به سرور و چک اون هست که باید مرحله ارسال رو از طریق جاوااسکریپت و چک اون رو از طریق php انجام بدیم .

ادامه کار اول (3)

تابع onreadystatechange با تغییر وضعیت تابع متناضر با خودش رو فراخونی می کنه .

5 وضعیت مختلف برای ارسال اطلاعات ممکن است پیش بیاد که عبارتند از صفر=هیچ عملیاتی صورت نگرفته , 1=درحال بارگذاری ,2=عملیات بارگذاری به اتمام رسیده ,3=خاتمه دادن عملیات , 4=کامل شدن اطلاعات ارسالی

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

تابع open سه پارامتر می گیره که پارامتر اول نوع ارسال داده ها رو مشخص میکنه پارامتر دوم ادرس صفحه ای رو که می خوایم اطلاعات رو برای اون ارسال کنیم چون در اینجا ما اطلاعات رو به صورت get ارسال می کنیم فیلد user رو هم در url قرار داده و ارسال می کنیم و پارامتر سوم هم نشان دهنده همگام یا ناهمگام بودن فراخوانی است .

مقدار متغییر url در صورتی که هنگام پر کردن فرم مقدار عبارت user رو برابر hossein بدیم مقدار متغییر url برابر با مقدار زیر خواهد بود .

کد php:

تابع send اگر اطلاعات ارسالی به صورت data وجود داشته باشه از این تابع برای ارسال استفاده می کنیم اما چون ما در اینجا اطلاعات رو به صورت get ارسال کردیم مقدار این تابع رو برابر null قرار میدیم .

تا اینجا کارای هر یک از توابع رو توضیح دادیم و حالا یک بار برنامه رو تا اینجا چک میکنیم .

کاربر وارد سایت میشه اطلاعات خودش رو پر میکنه و برای چک نام کاربری بر روی دکمه check کلیک می کنه در این هنگام ما باید تابع checkUser رو فراخونی کنیم بنابراین دکمه check رو به صورت زیر تغییر میدیم .