نمایش نتایج پایگاه داده و فایل php با آژاکس (ajax)

همانطور که پیش از این در بخش آموزش های مقدماتی گفتیم، یکی از کاربردهای فناوری موسوم به آژاکس (ajax) در صفحات وب، رد و بدل کردن اطلاعات و نمایش آنها بدون رفرش شدن صفحه است، یعنی تمام فعل و انفعالات در پشت زمینه انجام می شوند و در سمت کاربر تقریبا جزء نمایش نتایج، اتفاق خاصی رخ نمی دهد، در این مطلب نیز کدی کاربردی را قرار داده ایم که به کمک آن می توانید در هر لحظه پس از انتخاب لیستی از فرم و منوی انتخاب شونده، نتایج را از یک فایل php یا پایگاه داده فراخوانی کنید و به نمایش دربیاورید، این کد برخلاف کتابخانه های جی کئوری (jquery) و امثال آن اصلا حجم زیادی ندارد و کاملا استاندارد است.

کد آژاکس و html

نمایش زنده آمار و اطلاعات با آژاکس (Ajax)

یکی از قابلیت های منحصر به فرد برنامه نویسی ترکیبی آژاکس (ترکیبی از جاوا اسکریپت و xml)، امکان پردازش زنده آمار و اطلاعات و ارسال و دریافت آنها در لحظه است، شاید تا به حال نمونه ای از این نوع کدها و برنامه های مبتنی بر آژاکس (Ajax) را دیده باشید، مثلا در برخی سیستم های نمایش آمار بازدیدکنندگان، قسمتی تحت عنوان نمایش زنده آمار وجود دارد که در هر لحظه، اطلاعات خوبی از اینکه کاربرانتان مثلا از چه کشورهایی هستند، به دنبال چه مطالبی می گردند و در حال دیدن کدام صفحه از سایت یا وبلاگ شما هستند را نشان می دهد که می تواند در کمک به شناخت بهتر نیازهای آنها و ایجاد محتوایی مفید تر و خیلی چیزهای دیگر به کار آید، جالب است اگر بدانید این نمایش زنده آمار، معمولا با آژاکس یا فِریم وُرک (Framework) های مبتنی بر آن قابل دست یافتن است، متاسفانه در وب و مخصوصا در وب فارسی، تا به امروز منبع خوبی برای اینگونه مسائل ارائه نشده است، به همین دلیل در این مطلب می خواهیم روش پایه ای انجام این کار را در حد امکان آموزش دهیم.

چگونه با آژاکس (Ajax) آمار و اطلاعات را به طور زنده نمایش دهیم؟

نمایش داینامیک و صفحه به صفحه مطالب با آژاکس

استفاده از آژاکس (ajax) به عنوان فناوری نوین در عرصه وب، خیلی از مواقع گزینه مناسبی است برای نمایش محتوا به صورت حرفه ای تر، صرفه جویی در استفاده از امکانات سرور و همچنین کمک به بارگذاری سریع تر صفحات، مخصوصا برای کاربرانی که از سرعت اینترنت پائینی استفاده می کنند؛ با این وجود اگر بخواهیم از فِریم وُرک های (Framework) آژاکسی که بعضا حجمی فراتر از 75 کیلوبایت دارند، برای پروژه ها و صفحات معمولی خود استفاده کنیم، لااقل با وضعیت کیفیت اینترنت در کشورمان جور در نمی آید، پس بهتر است کدهای سبک و ساده اما با قدرتمندی و کاربری مشابه را جایگزین آنها کنیم، ارزش این کار در استفاده های آموزشی و قابل فهم تر بودن این شیوه است، به همین منظور در این مطلب، اسکریپتی کاربردی را قرار داده ایم که به کمک آن می توانید محتوای html را به صورت صفحه به صفحه و به شکلی حرفه ای بارگذاری کنید و نمایش دهید.

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

لیست داینامیک پیشنهاد کلمات، مبتنی بر آژاکس، php و mysql

آژاکس (ajax)، فناوری است که امروزه در صفحات وب و به ویژه در برنامه ها و سرویس هایی نظیر شبکه های اجتماعی، چت روم ها، دیکشنری های آنلاین، موتورهای جستجو و... به وفور مورد استفاده قرار می گیرد، به فرض اگر در سایتی مثل گوگل بخواهید کلمه ای را جستجو کنید، پس از تایپ یک عبارت، درخواست شما به طور خودکار به سرور ارسال می شود و گوگل متناسب با آن کلماتی را به شما پیشنهاد می کند، این قابلیت چیزی است که به کمک آژاکس و فریم ورک (Framework) های آن تحقق می یابد، به همین خاطر در این مطلب قصد داریم برنامه ای سبک، اما کاربردی را معرفی کنیم که می توانید از آن در پروژه های خود به خوبی استفاده نمائید؛ این کد بر خلاف برخی نمونه های مشابه، بسیار کم حجم و سازگار شده با حروف فارسی است.

از این کد می توانید به فرض در یک دیکشنری آنلاین برای پیشنهاد کلمات به صورت یک لیست بازشونده استفاده کنید، یا وقتی کاربر به دنبال عبارتی است، با این کار او را راهنمایی کنید و خیلی ایده های جالب دیگر که می توان با آن انجام داد، این نوع قابلیت ها به نام ajax auto complete یا ajax auto suggest نیز معروف هستند؛ لازم به ذکر است که این برنامه توسط برنامه نویسان خارجی و متناسب با زبان انگلیسی نوشته شده است، ولی به جهت راحتی کاربران، برای کار با زبان فارسی بهینه و کمی هوشمندتر شده است و تا آنجا که ما بررسی کرده ایم مشکل خاصی با حروف فارسی ندارد.

دانلود لیست داینامیک پیشنهاد کلمات، مبتنی بر آژاکس، php و mysql:

ساخت قابلیت امتیازدهی با PHP و Ajax

از جمله قابلیت ها و امکانات مورد نیاز در برخی صفحات وب مانند شبکه های اجتماعی، پایگاه های خبری، سایت های پرسش و پاسخ، انجمن ها و... قابلیت امتیازدهی به مطالب و نظرات کاربران است که امروزه کاربرد فراوان دارد، ویژگی خاص این قابلیت، یعنی نیاز به ارسال و دریافت درخواست در پس زمینه و بدون رفرش شدن صفحه باعث می شود که ناگزیر دست به دامن آژاکس (Ajax) یا فریم ورک های آن شویم، از طرفی بعد از ارسال درخواست آژاکسی، در سمت سرور نیز باید با php و mysql آن را پردازش کرده و متناسب با اتفاقاتی که روی می دهد، خروجی ارسال کنیم، البته مبحث اصلی یادگیری ایجاد و مدیریت این امکان است و جزئیات آن به برنامه نویس بستگی دارد، لذا در این آموزش تنها به قسمت آژاکس و php آن خواهیم پرداخت و قسمت mysql را خودتان می توانید با توجه به نیازتان اضافه کنید.

کد جاوا اسکریپت سیستم امتیازدهی

آموزش نحوه آپلود فایل با php و آژاکس (ajax)

آپلود فایل در صفحات وب و از طریق فرم های html، یکی از پرکاربردترین شیوه هایی است که برای ارسال فرمت های مختلف به سرور کاربرد دارد، در حالت معمول اگر بخواهیم فایلی را به سرور ارسال کنیم، با اتمام فرایند ارسال، آدرس صفحه مرورگر به طور خودکار تغییر کرده و به فایل مقصد راهنمایی می شود، اما روش هایی وجود دارد که به کمک آنها، بدون اینکه صفحه به اصطلاح رفرش شود، می توانیم فایل را به سرور ارسال کنیم و از آنجایی که بیشتر این روش ها مبتنی بر آژاکس (ajax) یا لااقل شبیه سازی شده از فرایند آژاکسی است، در این آموزش قصد داریم به نحوه آپلود فایل با برنامه نویسی php و آژاکس بپردازیم، به این امید که مفید واقع شود.

فرایند آپلود فایل در وب

قبل از پرداختن به ادامه این آموزش، لازم است برای داشتن درک صحیحی از فرایند آپلود فایل در وب، به طور مختصر به آن اشاره ای داشته باشیم.
آنچه که مسلم است، دسترسی به فایل های کاربران در وب از لحاظ امنیتی غیر استاندارد و ممنوع است، به این لحاظ از طریق کدهای html و عناصر موجود در تگ form، این قابلیت وجود دارد که حق انتخاب (یا در واقع حق آپلود فایل) در دست کاربر باشد تا اگر خود او تمایل داشت، فایل های مورد نظرش را انتخاب و تحت پروتکل های انتقال داده در وب، به سرور ارسال نماید، در سرور این فایل ها توسط برنامه نویسی سمت سرور مانند زبان php یا موارد مشابه، مدیریت می شوند و اگر همه چیز درست باشد، فایل بر روی حافظه سخت افزاری یا به عبارتی هارددیسک سرور، ذخیره شده و قابل استفاده است.

اعتبار سنجی همزمان فرم با آژاکس (ajax) و php

استفاده از آژاکس (ajax) به جهت قابلیت منحصر به فرد آن، یعنی عدم نیاز به بارگذاری مجدد صفحه و رفرش شدن کامل، می تواند در بسیاری از مواقع و بنا بر نیاز برنامه نویس، کاربردی و رهگشا باشد، یکی از این موارد کاربردی، اعتبار سنجی فرم های وب با آژاکس است؛ همان طور که می دانیم اعتبار سنجی به فرآیند بررسی معتبر بودن داده های ارائه شده توسط کاربر گفته می شود که در مجموع در دو حالت سمت کاربر (در مرورگر و با جاوا اسکریپت) یا سمت سرور (با php یا دیگر زبان های سمت سرور مانند asp) انجام می شود، اما استفاده از آژاکس قابلیت دیگری نیز در اختیارمان قرار می دهد و آن بررسی همزمان فرم ها در سمت کاربر و سرور، بدون رفرش یا بارگذاری مجدد صفحه است.

کد آژاکس برای ارسال اطلاعات فرم

ارسال اطلاعات فرم با آژاکس (ajax) و نمایش پیام در حال پردازش (loading)

در آموزش های مقدماتی آژاکس (ajax)، گفتیم که چگونه می توان اطلاعات یک فرم را با متد post برای یک فایل php ارسال کرد و نتایج حاصل از پردازش آنها را بدون رفرش شدن صفحه به کاربر نشان داد، در این مطلب می خواهیم کمی از تئوری فاصله بگیریم و کدی کاربردی را قرار دهیم که به کمک آن بدون استفاده از کتابخانه های حجیم جی کئوری (jquery) و دردسرهایش، تنها بر مبنای آژاکس، اطلاعات یک فرم را به صورت پیشرفته ارسال کنیم و علاوه بر آن، حالت در حال پردازش یا loading را نیز با تصویر و متن نشان دهیم.

برای ارسال و دریافت اطلاعات از یک فرم html به توابعی نیاز داریم که علاوه بر روش های عادی ajax، بتوانیم پردازش و کنترل بیشتری بر روی فرایندها داشته باشیم؛ کد زیر نمونه تقریبا کاملی است.

فایل php جهت دریافت درخواست آژاکسی