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

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

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

 

مثال پایگاه داده ajax

درمثال ajax زیر ما نشان می دهیم که یک صفحه وب چگونه می تواند اطلاعات را از یک پایگاه داده با استفاده از تکنولوژی ajax بگیرد.

 

انتخاب یک نام در جعبه زیر

انتخاب یک مشتری:

اطلاعات مشتری در زیر لیست خواهند شد.

تشریح مثال ajax:

مثال بالا شامل یک فرم html ساده ویک پیوند به javascript است.

 

 

همان طوری که شما می توانید ببینید یک فرم مثال html ساده با یک جعبه کشیدنی و پایین انداختنی که مشتری نامیده می شود است.

پاراگراف زیر فرم شامل یک div است که “txthint” نامیده می شود و به عنوان یک میدان برای اطلاعات بازیابی شده از سرور وب استفاده می شود.

زمانی که کاربر داده هارا انتخاب می کند یک تابع به نام “show customer” اجرا می شود.  رویداد  onchange””باعث راه اندازی تابع برای اجرا می شود به عبارت دیگر هرزمان که کاربر مقادیر را در جعبه کشیدنی پایین انداختنی تغییر دهد تابع show customer صدا زده می شود .

درزیر کد javascript لیست شده است.

Ajax در javascript

 

این کد javascript در فایل select customer.js”” ذخیره شده است:

 

 

 

صفحه سروردر ajax

 

صفحه سرور نامگذاری شده به وسیله javascript یک فایل asp ساده است که “get customer.asp” نامیده می شود .

صفحه در  javascript برای یک سرور اطلاعات اینترنت نوشته شده است.

این صفحه می تواند به آسانی در php یا در بعضی دیگر از زبان های سرور نوشته شود و نتایج به صورت یک جدول html برگشت داده شود.

کد، یک  sql را به جای یک پایگاه داده اجرا می کند و نتیجه را به عنوان یک جدول  html برگشت می دهد.

 

 

 Ajax می تواند برای ارتباطات جذاب با یک فایل xml استفاده شود.

 

مثال ajax xml

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

انتخاب یک cd درجعبه زیر:

انتخاب یک cd:

اطلاعات cd اینجا لیست خواهد شد.

 

تشریح مثال ajax:

مثال بالا شامل یک فرمhtml ساده و یک پیوند به javascript است.

 

 

به طوری که شما می توانید ببینید مثال فقط یک فرم html ساده با یک جعبه کشیدنی پایین انداختنی ساده که ” cds “نامیده می شود است.

پاراگراف زیر یک فرم شامل یک  div است که “txthint” نامیده می شود. div به عنوان یک میدان اصلاح اطلاعات از فرم سرور وب استفاده می شود وقتی که کاربرداده ها را انتخاب می کند. تابع showcd”” صدازده می شود.

کد javascript در زیر لیست شده است.

 

Javascript در ajax

کد javascript  در فایل “selected.js” ذخیره شده است:

 

 

 

صفحه سرور ajax

صفحه سرور نامگذاری شده به وسیله  javascript یک فایل asp ساده است که”getcd.asp” نامیده می شود .

صفحه در javascript برای یک سرور اطلاعات اینترنت نوشته شده است.

این صفحه می تواند به آسانی در php یا در بعضی دیگر از زبان های سرور نوشته شود.

کد  یک پرسش را اجرا می کند و نتیجه را به صورت html برمی گرداند.

 

 

درحالی که responsetext ، پاسخ  http را به صورت یک رشته  بر می گرداند، responsexml پاسخ را به صورت xml برمی گرداند.

خاصیت  responsexml یک سند xml را بر می گرداند که می تواند با استفاده از خصوصیات و روش های گره درخت  W3CDOM را مورد تجزیه و رسیدگی قراردهد.

مثال responsexml در ajax

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

داده های انتخاب شده از پایگاه داده دراین زمان به یک سند  xml تبدیل خواهند شد و سپس ما برای استخراج مقادیر برای نمایش، DOM را استفاده خواهیم کرد.

انتخاب یک نام درجدول زیر

انتخاب یک مشتری: (لیست سلکت باکسی از اسامی برای مثال)

 

تشریح مثال ajax

مثال زیر شامل یک فرم html، چندین عنصر<span> برای نگهداری داده های بازگشتی و یک پیوند به javascript است.

 

 

مثال بالا شامل یک فرم html با یک جعبه کشیدنی پایین انداختنی است که “customers” نامیده می شود.

وقتی که کاربر یک گزینه (مشتری ) را در جعبه کشیدنی پایین انداختنی انتخاب می کند یک تابع به نام “showcustomer()” اجرا می شود. اجرای تابع به وسیله رخداد “onchange” اجرامی شود. به عبارت دیگر هر زمان که کاربر مقدار یک جعبه کشیدنی پایین انداختنی را تغییر دهد تابع showcustomer() صدازده می شود.

کد javascript  در زیر لیست شده است:

Javascript،ajax

این کد javascript  در فایل “selectcustomer_xml.js” ذخیره شده است:

 

 

تابع های showcustomer() و getxmlhttpobject() بالا همان توابع گفته شده درفصل قبل هستند.

همچنین تابع statechanged() نیزقبل ازاین آموزش Ajax استفاده شده است. هرچند این بار ما نتایج را به عنوان یک سند  xml ( با responsexml) برمی گردانیم و DOM را برای نمایش مقادیر اضافی که ما می خواهیم نمایش دهیم استفاده می کنیم.

منبع : w3schools.com

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

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