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

آموزش Ajax مقدماتی قسمت اول

Ajax چیست ؟

Ajax مخفف Asynchronous JavaScript and XML می‌باشد.
Ajax یک زبان برنامه نویسی نیست، ajax یک تکنیک برای بروز رسانی و نمایش داده‌ها است بدون اینکه صفحه وب ما رفرش شود. Ajax ترکیبی از xml و javascript است. همین طور می‌توانیم با استفاده از ajax داده‌ها را از دیتابیس بگیریم.
برای شروع ابتدا باید xampp را روی سیستم خود نصب کنید، بعد از نصب به پوشه htdocs رفته و یک پوشه با نام دلخواه ایجاد کنید، من نام پوشه را Ajax می‌گذارم. سپس داخل آن فایلی به نام index.html ایجاد می‌کنید، حال درون این فایل کدهای ابتدایی برای ساخت یک صفحه html را می‌نویسیم.

سپس تگ script ایجاد می‌کنیم تا داخل آن اولین کد ajax خود را بنویسیم، همچنین یک فایل php به نام darkoobweb.php نیز در همان محل می‌سازیم. این فایل php فقط Hello Ajax را چاپ می‌کند.
ابتدا باید یک آبجک جدید از XMLHttpRequest() ایجاد کنیم .

این آبجکت دارای متدهایی است، که دو متد آن برای ما از همه مهم‌تر است. open و send، در open مشخص می‌کنیم درخواست ما با چه متدی GET یا POST به چه آدرسی و به صورت Asynchronous یا Synchronous فرستاده شود و send درخواست را ارسال می‌کند.
فرق synchronous و asynchronous در چیست؟ و به چه شکل باید این موضوع را در ajax مشخص کنیم ؟
فرق این دو در این است که اگر Asynchronous باشد، منتظر دریافت پاسخ از سرور نمی‌شود و بقیه کدها و کارهای مورد نظر را اجرا می‌کند و هر زمان که پاسخ از سمت سرور ارسال شود از آن استفاده خواهد کرد، در واقع کاربر را در انتظار پاسخ نگه نمی‌دارد .
اما در Synchronous در خواست به سرور فرستاده می‌شود و کاربر باید منتظر پاسخ از سمت سرور بماند. در این هنگام کاربر نمی‌تواند به فعالیت خود ادامه دهد تا زمانی که پاسخ از سمت سرور به کلاینت ارسال شود.
حال چگونه این دو حالت را در Ajax مشخص می‌کنیم ؟

با استفاده از ture به منظور Asynchoronus و false به منظور Synchronous.
من در این مثال از true یعنی Asynchoronus استفاده می‌کنم .

سپس در خواست را ارسال می‌کنیم:

برای اجرا شدن این دستورات در index.html یک دکمه ایجاد می‌کنیم که موقع کلیک شدن برروی آن فانکشن ajaxFunction را اجرا کند، تمام کدهایی که نوشتیم را درون این فانکشن قرار می‌دهیم.
سپس به محلی برای نمایش داده‌ها نیاز داریم پس یک تگ p ایجاد کرده و به آن آی دی placeForAjax را میدهیم، تا هنگام دریافت اطلاعات آن را در تگ p خود نمایش دهیم .

درخواست را فرستادیم حالا باید داده یا داده‌های مورد نظر را بگیریم، برای این کار از متد onreadystatechange استفاده می‌کنیم، و چک می‌کنم اگر readyState = 4 و =200 status بود آنگاه با استفاده از responseText اطلاعات در تگ p قرار بگیرد.

readyState پراپرتی است که مقدار status مربوط به XMLHttpRequest را نگه می‌دارد.
onreadystatechange پراپرتی است که به آن یک فانکشن می‌دهیم هر گاه readyState تغییر کند آن فانکشن اجرا می‌شود .
readyState می تواند دارای :
0: request not initialized
1:server connection established
2:request received
3:processing request
4:request finished and response is ready
باشد
Status می تواند دارای:
200: ok
403: forbidden
404 : page not found
500: server error
باشد.
روی دکمه کلیک کنید باید پیغامی مشابه پیغام زیر ببینید .

ajaxpic1

چه اطلاعاتی را و به چه شکلی Ajax می‌تواند دریافت کنید، خوب مت درون فایل darkoobweb.php تغییراتی ایجاد می‌کنیم.

یک آرایه ایجاد می‌کنیم سپس محتوای آرایه را با foreach درون یک تگ p که دارای کلاس myfriend است قرار می‌دهیم .
هم چنین در index.html به جای تگ p یک تگ div قرار می‌دهیم، حالا صفحه را رفرش کنید می‌بینید که تمام اطلاعات ما به نمایش در می‌آید .

ajaxpic2

ارسال داده به واسطه Ajax

می‌توانیم مقادیری را به واسطه Ajax برای صفحه php خود ارسال کنیم، اما به چه صورت؟

می‌توانیم از کویری استرینگ پارامتر استفاده کنیم. پارامتری به نام، name را به darkoobweb.php ارسال می‌کنیم، در darkoobweb.php چک می‌کنیم، اگر پارامتر ست شده بود و اگر خالی نبود، چک کن اگر نام دریافتی ما با یکی از نام‌های درون آرایه برابر بود رنگ آن ار تغییر بده.
به این شکل
Index.html

Darkoobweb.php

یک input ایجاد می‌کنیم تا کاربر نام دلخواه خود را داخل آن بنویسد و وقتی نوشتن تمام شد اگر آن نام در آرایه ما وجود داشت با رنگ متفاوتی چاپ شود.
Darkoobweb.php

ajaxpic3
به شکل بهتری هم می‌توانیم بنویسیم، چطور؟ از this استفاده کنیم .

ایجاد پروژه با Ajax و BootStrap :

شما چیزهای زیادی آموختید، حال با هم یک پروژه Ajax ایجاد خواهیم کرد، پروژه‌ای برای ثبت کارمندان دارکوب وب
ابتدا پوشه‌ای به نام darkoobwebAjax در پوشه-> htdocs زمپ ایجاد می‌کنیم، سپس bootstrap و jquery را دانلود کرده و در این پوشه قرار می‌دهم، فایلی به نام index.html ایجاد کرده و یک فرم در آن می‌سازیم.
Index.html

شما بیاید چنین فرمی داشته باشید :

ajaxpic4

حالا نوبت ساخت یک جدول است .

ajaxpic5

همان طور که دید من به صورت دستی دو نفر را در جدول اضافه کردم.

فقط برای اینکه ببینیم چطور فرم ما نمایش داده می‌شود. اما قرار است اطلاعات از یک دیتابیس خوانده شود، بنابر این دیتابیس را نیز با هم ایجاد خواهیم کرد.
به آدرس localhost/phpmyadmin رفته و یک دیتابیس با نام دلخواه ایجاد کنید من نام دیتابیس خود را darkoobweb_employee گذاشتم.

ajaxpic6

می‌بینید که دیتابیس را ایجاد شده، هم چنین جدولی به نام employee ساخته و یک رکورد در آن وارد شده است.

در قسمت قبل دیتابیس را با هم ایجاد کردیم اکنون یوزری به نام Pouria با پسودر ajax می‌سازیم .

ajaxpic7
همان طور که در تصویر بالا می‌بینید یوزر مورد نظر من ایجاد شده است .
حال به یک صفحه php نیاز داریم، البته می‌توانید به جای php از زبان های دیگر نیز استفاده کنید، صفحه php به نام employeeData.php می‌سازیم سپس درخواستی به وسیله ajax به این صفحه ارسال می‌کنیم، ابتدا برای امتحان کردن صفحه php متن ساده‌ای را چاپ خواهیم کرد با عنوان : کارت خوب بود پیام دریافت کردی.
employeeData.php

در صفحه index.html نیز بین فرم و تیبل تگ div ایجاد می‌کنیم تا پیام دریافتی را نمایش دهیم، این موارد فقط برای تست است‌، در ادامه این div را حذف خواهیم کرد. هم چنین رویداد onclick را برای دکمه add new record می‌نویسیم و در آن فانکشن ajaxRequest را فراخوانی می‌کنیم .
Index.html :

صفحه را رفرش کنید، بعد از زدن دکمه add new record باید پیامی مانند پیام زیر را ببینید.

ajaxpic8

خوب همه چیز مرتب است، برای اتصال به دیتابیس به کانکشن نیاز داریم، با هم آن را ایجاد خواهیم کرد .
فایلی به نام dbConnection.php می‌سازیم و درآن کدهای مربوط به اتصال دیتابیس را قرار می‌دهیم .
dbConnection.php

باید چند تغییر کوچک در index.html ایجاد کنیم، اول تمام تگ‌های tr در تگ tbody جدول را به فایل employee.php منتقل کنیم، سپس آیدی test را به tbody بدهیم، رویداد onclick را از add new record حذف کنیم و به جای آن رویداد، در body رویداد onload را ایجاد کرده و فانکشن ajaxRequest را فراخوانی کنیم .
Index.html

Employee.php

صفحه را رفرش کنید، همه چیز باید به درستی نمایش داده شود.

حال زمان آن است که داده‌ها را از دیتابیس بگیریم، برای این کار باید کویری بنویسیم.

کویری که تمام اطلاعات جدول employee را بگیرد سپس آنها را با یک حلقه while در جایگاه‌های خود برای نمایش قرار دهد، اگر به یاد داشته باشید وقتی جدول را ساختیم من فردی به نام Pouria را داخل آن ایجاد کردم .
Employee.php

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

نوبت نوشتن insert,update,delete است، ابتدا نیاز داریم بدانیم کدام دکمه کلیک شده است، دکمه‌ای که کار آن اضافه کردن حذف کردن و یا ویرایش کردن است. سپس باید بدانیم اگر حذف یا ویرایش کلیک شده است کدام id باید حذف یا ویرایش شود، هم چنین برای ویرایش من فایلی به نام employee.php ایجاد کرده‌ام که در آن یک فرم دیگر وجود دارد، برای استفاده از این فرم نیز دو فانکشن ایجاد کردام یکی برای فرم دیفالت و دیگری برای فرم ویرایش .
برای انجام کارهای بالا فانکشن ajaxRequest باید سه پارامتر دریافت کند، یکی id و دیگری یک رشته تا بدانیم کدام دکمه کلیک شده است و سومی فانکشن مورد نظر ما.
من نام این سه را getValue و getId وwhichFuntion می‌گذارم، در دکمه add new record رویداد onclick را ایجاد کرده فانکشن ajaxRequest(‘insert’,null,defualtFunction) را فراخوانی می‌کنم .
حال باید درون فانکشن مقادیر input ها را بگیرم، سپس چک کنم اگر مقدار getValue برابر insert بود مقادیر input ها را چک کن تا خالی نباشند، سپس اگر خالی بودند پیغام خطا و اگر پر بودند داده‌ها را به employeeData.php ارسال کن، هم چنین باید چک کنم مقدار getValue اگر delete بود شماره id و اگر update بود شماره id و مقادیر جدید را به employeeData.php ارسال کند، در employeeData.php نیز ابتدا چک می‎کنم اگر value مقدار داشت و مقدار آن delete update یا insert بود کارهای مربوط به هر کدام را انجام دهد.
خوب متوجه شدید روند کار به چه صورت است، حال کدها را ببینیم.
Index.html

employeeData.php

پیشنهاد می‌کنم این مقالات هم بخوانید

دیدگاهتان را بنویسید

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

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

۱ ستاره۲ ستاره۳ ستاره۴ ستاره۵ ستاره
(ستاره دهید)
Loading...
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on facebook