وب

ایجکس (Ajax) در جی کوئری

ایجکس یا Ajax (جاوا اسکریپت و XML آسنکرون / Asynchronous JavaScript and XML) در جی کوئری یک روش ساخت برنامه های تعاملی وب است که بلافاصله درخواست های کاربر را پردازش می کنند.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

هنگامی که یک کاربر یک عمل انجام می دهد، Ajax به محتوا در صفحات وب اجازه می دهد تا بلافاصله به روز رسانی شود، بر خلاف درخواست HTTP، که کاربران باید برای بارگذاری کامل یک صفحه صبر کنند. ایجکس در جی کوئری فقط یک قسمت از صفحه وب را بارگذاری می کند و بقیه آن، تحت تاثیر قرار نمی گیرد. نقشه ی Google map یک برنامه ی مشهور است که از ایجکس استفاده می کند.

جی کوئری

ایجکس در جی کوئری

ajax.$ شبیه به XML Http Request  در جاوا اسکریپت، object.$، است؛ اما ایجکس در جی کوئری ساده تر و استفاده از آن، آسان تر از XMLHttpRequest است.

روش $.ajax در جی کوئری دارای چندین ویژگی است که عبارتست از:

url: درخواست را به کجا می خواهید ارسال کنید. آدرس url باید در داخل دامنه ی شما باشد.

type: نوع درخواست مانند: POST و GET

dataType: نوع داده ای که در پاسخ درخواست می خواهید مانند: html، json، xml

data: داده هایی که می خواهید ارسال شوند.

success: اگر پاسخ موفقیت آمیز دریافت کردید، پس از آن می خواهید با آن داده های دریافتی چه کاری در جی کوئری انجام دهید.

complete: کد جی کوئری یا جاوا اسکریپت را به کد پاسخ اضافه می کند. زیرا، خارج از کد جی کوئری یا جاوا اسکریپت، کد با محتوای پاسخ ایجکس ، کار نمی کند.

Error: اگر خطایی رخ دهد، این کد اجرا می شود. معمولا، این کد، تابع anonymous را می گیرد و اولين پارامتر مربوط به آن، شيء است، پارامتر دوم، وضعيت است، و پارامتر سوم، پاسخ متني است.

کد جی کوئری زیر را با عنوان index.php ذخیره کنید:

و کد جی کوئری زیر را با عنوان ajaxMethod.js در پوشه js خود ذخیره کنید:

شرح کد جی کوئری:

در این جا از رویداد keyup در جی کوئری استفاده می کنیم. در داخل این رویداد، مقدار فیلد ورودی را می گیریم. پس از آن، روش ایجکس جی کوئری را راه اندازی اولیه می کنیم و یک شی را در داخل پارامتر روش ajax می گذاریم. این شی، بعضی از کلید های مشخص شده که قبلا در بالا بحث شده اند را دارا است. در آدرس url، نام صفحه ای را که در آن درخواست ارسال می شود، ارائه می دهیم. پس از آن، نوع درخواستی را که می خواهیم ارسال کنیم، GET یا POST را مشخص می کنیم که در ویژگی نوع تعریف شده است. نوع داده ای که به عنوان پاسخ از آدرس url درخواست شده است مشخص می شود که در dataType تعریف شده است. اطلاعاتی که به url درخواستی ارسال می شود (مانند POSTـ$  یا GETـ$) در ویژگی داده تعریف شده است. در اینجا فقط یک متغیر ارسال شده است و آن عنوان / title است.

به یاد داشته باشید، کلیدِ این کد جی کوئری، شاخص آرایه ی متغیر POSTـ$  یا GETـ$ است؛ مانند: POST [‘title’]ـ$. و بخش دوم، مقدار آن است.

مقدار چندگانه را می توان با نوشتن کاما پس از یک جفت از آن ها، ارسال کرد. آرایه کلی نیز می تواند تنها با دادن نام آرایه در ویژگی داده ارسال شود، و برای این کار، نیازی به کلید یا مقدار نیست. کلید آرایه، کلید خواهد بود و keys value، مقدار کلیدی است که در گلوبالِ POSTـ$  یا GETـ$ در صفحه ی پردازش وجود دارد.

در صورت که درخواست، موفقیت آمیز باشد، تابع Success داده ها را از آدرس درخواست شده، دریافت می کند. در این جا پارامتر تابع anonymous، در واقع داده های پاسخ است.

در ویژگی complete، شمارش می شود که چند نتیجه، به عنوان پاسخ درخواست آمده است.

به عنوان سرگرمی، یک پایگاه داده ایجاد کنید و فایل file_text.sql را در آن وارد کنید. نتیجه ی این کار، ایجاد یک جدول film_text خواهد بود.

یا می توانید با پایگاه داده ی خود کار کنید. برای این کار، نام پایگاه داده و جدول همراه با sql query را تغییر دهید.

کد های جی کوئری زیر را با عنوان connection.php ذخیره کنید:

کد جی کوئری زیر را با عنوان process.php ذخیره کنید:

شرح کد جی کوئری:

بخشِ ابتدایی، اتصال پایگاه داده از طریق PDO (php database object) است. موارد دیگری نیز می توانند استفاده شوند، از جمله: کلاس mysqli، استایل رویه ای mysqli. انتخاب این موارد به توسعه دهنده بستگی دارد که کدام نوع اتصال را ترجیح می دهد.

درون لوپِ while، متغیر i، باکس اطلاعات را که با div ساخته شده است، ایجاد می کند. اگر ۱۰ نتیجه پیدا شود، پس ۱۰ div ایجاد خواهد شد و به index.php در تابع success property anonymous ارسال می شود.

متدِ پست جی کوئری

جی کوئری

$.post() و $get() و $.getJSON()، فرزندانِ متدِ $.ajax() هستند. همه این متد ها با فراخوانی متد $.ajax به طور داخلی کار می کنند. این سه مورد، سینتکس میان بر /  short cut به متد $.ajax هستند.

سینتکس $.post()  و$.get()  مشابه هستند.

پارامتر اول: URL

پارامتر دوم: داده هایی که برای url مورد نظر فرستاده می شوند. می توانید یک آرایه تکی یا یک شی مانند {key: value، key: value} را در نظر بگیرید.

پارامتر سوم: تابع success. اگر درخواست موفقیت آمیز باشد، با داده های پاسخ چه کاری می خواهید انجام دهید.

به عنوان نمونه، کد جی کوئری زیر را ببینید:

حالا می خواهیم عنوان فیلم را با استفاده از index.php قبلی و صفحه ی process.php و connection.php پیدا کنیم؛ فقط فایل js، یعنی ajaxMethod.js را به ajaxPost.js تغییر دهید؛

کد جی کوئری ایجاد شده باید مانند کد زیر باشد:

توجه داشته باشید که این متدِ $.post در مقایسه با $.ajax، چقدر ساده تر و آسان تر است. اما در این جا، کنترل هایی نظیر complete، error، dataType و غیره را از دست داده ایم.

اکنون از $.post و $.ajax، بسته به نیازِ برنامه ی خود، استفاده کنید.

جی کوئری داده های JSON را دریافت می کند

مقدمه ای بر JSON در جی کوئری

دو راه برای دریافت داده های json به عنوان پاسخ وجود دارد، اولین روش، تنظیم dataType بر اساس json در متدِ $.ajax و پردازش داده های json در تابع فراخوانی شده ی success است. از سوی دیگر، می توانید از سینتکس کوتاه $.getJSON برای استفاده از داده json استفاده کنید.

چرا json مهم است؟

در $.post() و $ajax() کنترلی بر زبان طرف مشتری (مثل جاوا اسکریپت) نداریم که چگونه اطلاعات را در میان سند سازماندهی و توزیع کنیم. فقط داده های پاسخ را به عنوان html یا متن در div دیگری اضافه می کنیم. اما ممکن است نیاز داشته باشیم که عنوان فیلم را به یک div بدهیم و توضیحات و اطلاعات دیگر را به div دیگری و یا هر جایی که می خواهیم از jquery یا javscript استفاده کنیم. سپس باید از $.getJSON استفاده کنید.

سینتکس $.getJSON() مشابه سینتکس $.post() است که فقط نام آن تغییر کرده است. و صفحه ی Index.php مشابه صفحه ی متد ایجکس است.

کد جی کوئری زیر را با عنوان json.js در پوشه ی js خود ذخیره کنید:

و صفحه ی Process.php:

نوشته های مشابه

1 دیدگاه

  1. خدا خیرتون بده ….. واقعا دمتون گرم….. خیلی ساده و روان توضیح دادید… طوری که توی یه بار دیدن تونستم مشکلم رو حل کنم …. هرجا میرفتم یه جوری پیچونده بودن که آدم جای اینکه یاد بگیره بدتر گیج میشد…. مرسی و باز هم مرسی

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

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

همچنین ببینید
بستن
دکمه بازگشت به بالا