متد ()ajax در jQuery
متد ()ajax در jQuery
مثال (متد ()ajax در jQuery)
تغییر متن یک عنصر <div> با استفاده از یک درخواست آجاکسی:
$.ajax({url:"demo_test.txt",success:function(result){
$("#div1").html(result);
}});
});
خودتان امتحان کنید»
تعریف و کاربرد
با استفاده از متد ()ajax می توانید یک درخواست آجاکسی را اجرا نمایید. (بصورت غیر همزمان یا asynchronous)
تمام متد های آجاکسی در jQuery از متد ()ajax استفاده می کنند. این متد بیشتر برای درخواست هایی استفاده می شود که در دیگر متد ها نمی توانند استفاده شوند.
نحوه استفاده از متد ()ajax
در الگوی بالا، برای اجرای یک درخواست آجاکسی به چندین پارامتر name:value نیاز داریم.
در جدول زیر، نام/مقدار هایی که می توانند به کار روند آورده شده است:
| نام | مقدار/توضیحات |
|---|---|
| async | این پارامتر با یک مقدار Boolean تنظیم می شود و مشخص می کند که آیا درخواست به صورت غیر همزمان (asynchronous) به سرور ارسال شود یا خیر. مقدار پیش فرض true است. |
| beforeSend(xhr) | به وسیله این پارامتر می توان یک تابع را تعیین کرد تا قبل از ارسال در خواست به سرور اجرا شود. |
| cache | این پارامتر با یک مقدار Boolean تنظیم می شود و تعیین می کند که آیا صفحات دریافتی از سرور باید در حافظه Cashe ذخیره شوند یا خیر. مقدار پیش فرض true است. |
| complete(xhr,status) | این پارامتر یک تابع را تعیین می کند تا در هنگام پایان یافتن درخواست اجرا شود. (بعد از توابع success و error) |
| contentType | این پارامتر هنگام ارسال داده ها به سرور مورد استفاده قرار می گیرد. پیش فرض "application/x-www-form-urlencoded" است. |
| context | این پارامتر مقدار "this" را برای تمام توابع callback مرتبط با درخواست آجاکسی مشخص می کند. |
| data | تعیین کننده اطلاعاتی است که می خواهید به سرور ارسال نمایید. |
| dataFilter(data,type) | این پارامتر یک تابع تعیین می کند که مسئول رسیدگی به پاسخ های اولیه داده ها از طرف XMLHttpRequest است. |
| dataType | این پارامتر نوع داده مورد انتظار از پاسخ سرور را باز می گرداند. |
| error(xhr,status,error) | این پارامتر تعیین کننده یک تابع است تا در صورتی که درخواست ناموفق بود، اجرا شود. |
| global | این پارامتر یک مقدار Boolean را تعیین می کند که آیا می خواهید یک رویداد گسترده AJAX برای درخواست خود راه اندازی کنید یا خیر. مقدار پیش فرض True است. |
| ifModified | این پارامتر یک مقدار Boolean را تعیین می کند که آیا درخواست موفق بوده یا خیر اگر پاسخ از آخرین درخواست تغییر کرده باشد. مقدار پیش فرض False است. |
| jsonp | این پارامتر یک رشته مشخص برای پاسخ به درخواست تابع داخل jsnop ایجاد می کند. |
| jsonpCallback | این پارامتر یک نام برای تابع پاسخ به درخواست داخل jsnop تعیین می کند. |
| password | این پارامتر یک رمز عبور را برای استفاده در درخواست HTTP تعیین می کند. مقدار پیش فرض true است. |
| processData | این پارامتر یک مقدار Boolean را تعیین می کند که آیا اطلاعاتی که قرار است به سرور ارسال شوند ، باید به صورت QueryString باشند یا خیر. مقدار پیش فرض true است. |
| scriptCharset | این پارامتر یک کاراکتر برای درخواست مشخص می کند. |
| success(result,status,xhr) | این پارامتر یک تابع را تعیین می کند تا در صورت اجرای موفق درخواست اجرا شود. |
| timeout | مدت زمانی است که برای اجرای درخواست به میلی ثانیه تعیین می شود. |
| traditional | این پارامتر یک مقدار Boolean را تعیین می کند که آیا از سبک سنتی ترتیب پارامتر استفاده شود یا خیر. |
| type | این پارامتر نوع درخواست را تعیین می کند (GET یا POST). |
| url | این پارامتر آدرس صفحه مقصد که باید درخواست به آن ارسال شود را تعیین می کند. مقدار پیش فرض صفحه جاری است. |
| username | این پارامتر یک نام کاربری را برای استفاده در درخواست HTTP تعیین می کند. |
| xhr | این پارامتر یک تابع برای ایجاد شی XMLHttpRequest تعیین میکند. |
خودتان امتحان کنید - مثالs
ایجاد یک درخواست آجاکسی همزمان
چگونگی استفاده از تنظیمات async، برای مشخص کردن یک درخواست همزمان.
ایجاد یک درخواست آجاکسی با نوع داده مشخص
چگونگی استفاده از تنظیمات نوع داده ای، برای مشخص کردن نوع داده ای یک درخواست.
ایجاد یک درخواست آجاکسی با خطا
چگونگی استفاده از تنظیمات خطا برای مقابله با خطاهای موجود در درخواست های آجاکسی.
کلیه متدهای Ajax در jQuery- نوشته شده توسط مهدی مؤمنی
- بازدید: 11755
دیدگاه‌ها
با سلام
من چگونه می توانم با استفاده از ajax و نوع داده json دیتا را از صفحه وب در بانک sql ثبت نمایم مثالهای موجود خیلی پیچیده است لطفا راهنمایی کنید
باتشکر
سلام
پیشنهاد می کنم از فریم ورک Kendo UI استفاده کنید. برای کسب اطلاعات بیشتر به لینک زیر مراجعه فرمایید:
www.beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-kendo-ui