AJAX اختصار asynchornous javascript and xml است.
Ajax یک نوع برنامه نویسی است که توسط گوگل درسال 2005 ارایه شده است (باپیشنهاد گوگل).
Ajax یک زبان برنامه نویسی جدید نیست اما یک راه جدید برای استفاده از استانداردهای فعلی است.
با ajax شما می توانید برنامه های کاربردی بهتر،سریعتروکاربرپسند تری راایجاد کنید.
Ajax برپایه ی java scriptوrequest httpاست.
هر آنچه که شما فعلا باید در مورد AJAX بدانید
قبل ازاینکه ادامه دهید شما باید یک پایه مفهومی کلی از موارد زیر راداشته باشید:
Html/xhtml
Javascript
Ajax=asynchronous javascript and xml
Ajax یک زبان برنامه نویسی جدید نیست اما یک تکنولوژی برای صفحات کاربردی بهتر ،سریعتر، و جذاب تر است.
با ajax ، javascript شما می توانیدمستقیما بااستفاده از شی mlhttprequest جاوا اسکریپت با سرور ارتباط برقرار کنید .
بااین شی javascript شما می توانید داده ها را با یک سرور بدون بارگذاری دوباره صفحه مبادله کنید .
Ajax انتقال داده ی غیر همزمان (درخواست های http) مرورگر و سرور وب را مورداستفاده قرار می دهد و به صفحات وب اجازه می دهد که بیت های کوچک اطلاعاتی را به جای تمام صفحه درخواست کنند.
تکنولوژی ajax صفحات کاربردی اینترنت را کوچکتر،سریعتر و کاربرپسندتر می سازد.
Ajax یک تکنولوژی مرورگر مستقل از نرم افزار وب سرور است.
Ajax برپایه ی استانداردهای وب است.
Ajax اصل استاندارد وب های زیر است :
- Javascript
- Xml
- Html
- Css
استانداردهای وب استفاده شده در ajax کاملا مشخص شده اند و به وسیله همه مرورگرهای اصلی پشتیبانی می شوند. استفاده های ajax مرورگرهاوپایگاه های مستقل هستند.
Ajax تقریبا مربوط به کاربردهای اینترنت بهتر است.
صفحات کاربردی در همه زمینه های کاربردی استفاده های زیادی دارند .آن ها می توانند بیننده های زیادی جذب کنند آن ها برای نصب و پشتیبانی آسان هستند و به آسانی توسعه می یابند.
هرچند کاربردهای اینترنت همیشه به اندازه کاربردهای زمینه قدیمی ارزشمند وکاربرپسند نیستند .
با ajax کاربردهای اینترنت می توانند با ارزش تر و کاربرپسند تر ساخته شوند.
شما امروز می توانید استفاده از ajax را شروع کنید
اینجا چیز جدیدی برای یادگیری نیست. Ajax اساس استانداردهای موجود است این استاندادردها به مدت چند سال به وسیله بیشتر توسعه دهنده ها ی هیجان انگیز درچند سال اخیرمورداستفاده قرارمی گرفته اند.
Ajax از درخواست های http استفاده می کند .
در کدنویسی قدیمی javascript اگر شما بخواهید هراطلاعاتی از پایگاه داده یایک فایل روی سرور دریافت کنید یا اطلاعات کاربررا به سرور بفرستید شما باید یک فرم html و داده های post یا get برای سرور بسازید .
کاربر روی دکمه submit برای ارسال یا دریافت داده ها کلیک می کند و منتظر می ماند تا سرور پاسخ دهد سپس یک صفحه جدید با نتایج بارگذاری می شود.
چون که در هر زمان یک صفحه جدید با زدن دکمه ورودی کاربر برمی گرداند. صفحات کاربردی قدیمی می توانند به کندی اجرا و به نارضایتی کاربر منجر شوند.
با ajax ،javascript شما با سرورمستقیما از طریق شی های request xmlhttp ارتباط برقرار می کنید.
با یک تقاضا http یک صفحه وب می تواند ایجاد کند یک تقاضا به و یک پاسخ از سرور بدون بارگذاری صفحه بگیرد.
و کاربر روی همان صفحه خواهد ماند و او یا شما به صفحات تقاضاهای script توجه نخواهید کرد یا داده ها را به یک سرور در پس زمینه می فرستید .
با استفاده از request xmlhttp یک توسعه دهنده وب می تواند یک صفحه را با داده ها ی سرور بعد ازاینکه بار شد به روزرسانی کند .
پیشنهاد گوگل استفاده از شی های request xmlhttp برای ایجاد یک رابط وب بسیار پویا است.
وقتی که شما شروع به تایپ در جعبه جست وجوی گوگل می کنید یک javascript کلمات خاموشی به سرور می فرستد وسرور یک لیست از پیشنهادات را برمی گرداند.
شی xmlhttp request در internet explorer5.0+,safari 1.2, mozilla 1.0/firefox,opera 8+,netscape7 پشتیبانی می شوند .
برای اینکه ما بفهمیم ajax چگونه کار می کند ما یک ajax کاربردی کوچک ایجاد خواهیم کرد .
اول، ماقصد داریم یک html استاندارد با دوفیلد متنی ایجاد کنیم: زمان و نام کاربری.
فیلد نام کاربری به وسیله کاربروفیلد زمان با استفاده از ajax پرخواهند شد.
فایل ” testajax.htm” ,html نامیده می شود وآن شبیه این است (توجه داشته باشید که فرم html زیرهیچ دکمه submit ی ندارد).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <body> <form name="myForm"> Name: <input type="text" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> |
درفصل بعد کی ستون ajax را توضیح خواهیم داد.
پشتیبان مرورگر-ajax
کی ستون ajax یکی از شی xmlhttprequest است.
مرورگرهای استفاده کننده روش های مختلف، برای ایجاد شی xmlhttprequest متفاوت هستند.
مرورگر اینترنت یک شی فعال را استفاده می کندولی درصورتیکه دیگر مرورگرها ازساختارشی javascript که xmlhttprequest نامیده می شود استفاده می کنند.
برای ایجاد این شی ها و مقداردهی به مرورگرهای مختلف ما از try and catch استفاده می کنیم.
اجازه دهید فایل “testajax.htm” رابا شی نیازهایی که در javascript ایجاد کرده ایم به روزرسانی کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<html> <body> <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } } } </script> <form name="myForm"> Name: <input type="text" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> |
تشریح مثال : اول یک xmlhttp متغیر برای نگهداری شی request xmlhttp ایجاد کنید.
سپس سعی کنید شی رابا xmlhttp=new ایجاد کنید .
Xmlhttp=new xmlhttp request()
این برای firefox,opera و مرورگرsafari است. اگرآن موفق نشد،سپس
Xmlhttp=new active xobject(“msxml2.xmlhttp”)
که برای IE 6.0+است .
اگرآن نیز همچنین موفق نشد،سعی کنید
Xmlhttp=new active xobject(“microsoft.xmlhttp”)
که آن نیزبرای IE5.5+ است.
اگر هیچ کدام از سه روش کارا نبود، مرورگر کاربر منسوخ شده است و او باید منتظر یک دریافت باشد که مرورگر نمی تواند ajax راپشتیبانی کند .
نکته: مرورگرهای مختلف کدهای طولانی و کاملا پیچیده ای دارند هرچند که این کد را شما خیلی وقت ها می توانید استفاده کنید زمانی که شما نیازدارید که یک شی request xmlhttp ایجاد کنید.
بنابراین شما می توانید فقط کدها را درجایی که نیاز دارید کپی و پیست کنید. کدهای بالا با همه مرورگرهای مشهور سازگار هستند: IE,opera,firefox,safari.
درفصل بعد به شما نشان داده می شود که چگونه شی های request xmlhttp رابرای ارتباط باسرور استفاده کنید.
توضیحات بیشتر درباره شی request xmlhttp
قبل ازارسال داده ها به سرور ما باید سه خصوصیت مهم شی های xmlhttprequest راشرح دهیم.
بعد از تقاضا به سرور ما به یک تابع که بتواند داده بازگشت داده شده از سرور را دریافت کند نیاز داریم.
خاصیت onreadystatechange توابعی را که پاسخ های سرور راپردازش می کنند را ذخیره می کند.
کدهای زیر یک تابع خالی و مجموعه ای از خاصیت onreadystatechange را در همان زمان مشخص می کند .
1 2 3 4 5 |
xmlHttp.onreadystatechange=function() { // We are going to write some code here } |
خاصیت readystate
وضعیت پاسخ های سرور را نگه می دارد هر زمان که وضعیت خواندن تغییر کند تابع Onreadystatechange اجرا می شود .
اینجا مقادیر ممکن خاصیت readystate وجود دارند:
وضعیت | توصیف |
0 | تقاضاآماده نشده است. |
1 | تقاضاآماده شده است. |
2 | تقاضافرستاده شده است. |
3 | تقاضادرحال پردازش است. |
4 | تقاضا کامل شده است. |
ماقصد داریم یک تابع و یک دستور if به تابع برای امتحان اضافه کنیم اگر پاسخ ما کامل باشد (این بدان معنی است که مامی توانیم داده هایمان رادریافت کنیم ).
1 2 3 4 5 6 7 8 |
xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // Get the data from the server's response } } |
منبع : w3schools.com
مقداد علی بخشی هستم. موسیقی دان، برنامه نویس، متخصص هوش مصنوعی، علم داده، متخصص بلاکچین و توسعه دهنده ربات های هوشمند.
دانش آموخته مقطع ارشد و دکتری دانشکده فنی دانشگاه تهران هستم. با سابقه تدریس درس برنامه نویسی در دانشگاه (پردیس بین الملل کیش دانشگاه تهران)