آموزش Ajax – قسمت اول

آموزش برنامه نویسی AJAX

 

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 ی ندارد).

 

 

درفصل بعد کی ستون ajax را توضیح خواهیم داد.

 

 

پشتیبان مرورگر-ajax

 

کی ستون ajax یکی از شی xmlhttprequest است.

مرورگرهای استفاده کننده روش های مختلف، برای ایجاد شی xmlhttprequest متفاوت هستند.

مرورگر اینترنت یک شی فعال را استفاده می کندولی درصورتیکه دیگر مرورگرها ازساختارشی javascript که   xmlhttprequest نامیده می شود استفاده می کنند.

برای ایجاد این شی ها و مقداردهی به مرورگرهای مختلف ما از try and catch  استفاده می کنیم.

اجازه دهید فایل  “testajax.htm”  رابا شی نیازهایی که در javascript ایجاد کرده ایم به روزرسانی کنیم.

 

 

تشریح مثال : اول یک 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 را در همان زمان مشخص می کند .

 

 

 

خاصیت readystate

 

وضعیت پاسخ های سرور را نگه می دارد هر زمان که وضعیت خواندن تغییر کند تابع Onreadystatechange اجرا می شود .

اینجا مقادیر ممکن خاصیت  readystate وجود دارند:

 

وضعیت توصیف
0 تقاضاآماده نشده است.
1 تقاضاآماده شده است.
2 تقاضافرستاده شده است.
3 تقاضادرحال پردازش است.
4 تقاضا کامل شده است.

 

ماقصد داریم یک تابع و یک دستور if به تابع برای امتحان اضافه کنیم اگر پاسخ ما کامل باشد (این بدان معنی است که مامی توانیم داده هایمان رادریافت کنیم ).

منبع : w3schools.com

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *