استفاده از AJAX با JQuery
استفاده از AJAX با JQuery
کتابخانه جی کوئری یکی از محبوب ترین و پر استفاده ترین کتابخانه های جاوا اسکریپت است. کمتر برنامه نویس وبی پیدا میشود که حداقل اسم این کتابخانه را نشنیده باشد.
در کتابخانه JQuery متدها و روش های متفاوتی برای ارسال یک درخواست به سمت سرور وجود دارد. ما در اینجا یکی از رایج ترین و ساده ترین روش ها را مورد بررسی قرار خواهیم داد.
برای صدا زدن و انجام یک درخواست AJAX در JQuery می‌توان به سادگی و با صدا زدن ajax در جی‌کوئری آنرا اجرا کرد!
این تابع ورودی های مختلفی میگیرد که با توجه به نوع ورودی ها، نحوه عملکردش متفاوت خواهد شد.
در اینجا کامل ترین و استانداردترین حالت استفاده از AJAX با JQuery را بررسی میکنیم.
ورودی این تابع را به صورت یک محتوای JSON در نظر میگیریم. که هر عنصر آن مشخص کننده یکی از خصوصیات درخواست ما خواهد بود.
به قطعه کد زیر توجه کنید:
کد:
$.ajax({
type: "POST",
url: 'contact.php',
data: "name=Omid&site=sabzelco.ir&age=21",
success: function(){
alert("پیام شما با موفقیت ارسال شد");
},
error: function(){
alert("خطای غیر منتظره ای رخ داده");
}
});
در کد بالا خصوصیاتی را تعریف کرده ایم. این خصوصیات عبارتند از:
- type : مشخص کننده نوع درخواست ارسال شده است.
- url : آدرسی که قرار است درخواست به آن ارسال شود. میتوانیم این آدرس را به صورت کامل یا نسبی بدهیم.
- data : اطلاعاتی است که میخواهیم همراه با درخواستمان ارسال شود. این مورد میتواند تعریف نشود!
- success : تابعی که هنگام موفقیت آمیز بودن درخواست اجرا خواهد شد.
- error : تابعی که در هنگام وجود خطا اجرا میشود. خطاهایی که مربوط به ارسال درخواست است. مثلاً سرور قطع است، اشتباهی در ارسال رخ داده و یا خطاهایی از این قبیل
دریافت اطلاعات از سرور با AJAX
اگر سرور بخواهد اطلاعاتی را در پاسخ به درخواست ما ارسال کند، میتوانیم آنرا به راحتی دریافت کنیم.
اگر برای توابعی که برای خصوصیت success یا error در نظر گرفته ایم یک ورودی در نظر بگیریم، این ورودی اطلاعات ارسالی از سمت سرور را به ما خواهد داد.
یعنی یک تابع success به صورت زیر خواهد شد.
کد:
function(response){
alert("پیام شما با موفقیت ارسال شد");
}
که response همان اطلاعات دریافتی از سرور به صورت JSON می باشد.
