پیاده سازی ajax از طریق jQuery در asp.net

جمعه 30 اردیبهشت 1390 04:31 ب.ظ ویرایش: جمعه 30 اردیبهشت 1390 04:54 ب.ظ

توسط: مجتبی

نوع مطلب: jQuery ،

ارسال به

در Jquery پیاده سازی ajax نسبت به روش معمولی که از طریق نوشتن توابع جاوا اسکریپت بود , نسبتا راحت تر شده است.
Jquery تعدادی تابع برای برقراری ارتباط باسرور بدون نیاز به postback خوردن صفحه ایجاد کرده که یکی از ساده ترین آنها &.ajax() است.
ساختار کلی استفاده از این تابع به شکل زیر است :

&.ajax(option);

اما option چیست؟ option متغیری است که تنظیمات ارتباط با سرور در آن قرار می گیرد. تنظیماتی از قبیل آدرس مورد نظر در سرور , پارامترهای مورد نیاز سرور , .. . .
ساختار کلی این متغیر به صورت زیر است :

Var option = {
    type: "", // type of sending   values: GET or POST
              url: "",            // server url
              data: "{}",     // parameters
              contentType: "application/json; charset=utf-8",     // request structure
              dataType: "json",                                                // data structure
              success: function(msg) {//ToDo: s.th. }        // on success function
    fail : function(msg) {//ToDo: s.th. }        // on fail function
}

Json ساختاری برای رد و بدل کردن اطلاعات است.اینجا اطلاعات بیشتری درباره‌ی json وجود دارد.
Type روش ارسال اطلاعات است که دو نوع post و get را قبول می کند.
url شامل آدرس تابع یا صفحه ی ما در سرور است که یکی از ساختارهای آن به شکل زیر است :

url : “PageName.Ext/MethodName”

برای مثال میخواهیم کاربر وقتی روی یک باتن کلیک کرد اطلاعات مربوط به یک کاربر مشخص را نمایش دهیم . برای این کار ما از یک webmethod در صفحه ی جاری استفاده میکنیم.
کد مربوط به سرور به این شکل است:

using System.Web.Services;
[WebMethod]
public static string GetUserData(string UserID)
{
return DB.UserData(UserID).ToString();
}

و سمت کلاینت هم از طریق جی کوئری رویداد کلیک برای باتن مورد نظر تعریف می کنیم:

$(document).ready(function() {
        $('#MyButton').click(function() {
              var option = {
                    type: "POST",
                    url: "defualt.aspx/GetUserData",
                    data: "{'UserID':'101'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(msg) {
                            alert(msg.d);
                        }};
             $.ajax(option);
                });
            });

نکته مهمی که باید به آن اشاره شود این است که مقداری که از سمت سرور به عنوان نتیجه بر می گردد در سمت کلاینت با متغیری به نام msg قابل دسترسی است. و msg.d دسترسی به داده ی موجود در آبجکت بازگشی را ایجاد می کند.

برچسب ها:jquery ،جی کوئری ،ajax ،

نظرات()

iranexperts

آموزش جی کوئری ، html5 و CSS3

پیاده سازی ajax از طریق jQuery در asp.net

iranexperts

درباره وبلاگ

آخرین پستها

نویسندگان

آمار وبلاگ

اَبر برچسبها

آرشیو موضوعی

آرشیو

پیوندها

صفحات جانبی