در ادامه مقاله قبلی ای در بحث فراخوانی توابع وب سرویس (در معماری سرویس گرا به توابع سابق برنامه نویسی که بعدا در شی گرایی نام متد به خود گرفت،پیغام(Message) می گویند،در نتیجه این اصطلاح "فراخوانی توابع وب سرویس" احتمالا اشکالاتی دارد که اینجانب تنها به دلیل سادگی و رسایی مطلب از آن بهره میبرم) در سمت کلاینت قصد دارم در این مقاله شما را با فراخوانی این توابع از طریق کتابخانه jqury آشنا کنم.

مختصری درباره jquery:

این کتابخانه یکی از غنی ترین کتابخانه های اپن سورس است که به زبان جاوااسکریپت می باشد و در زمینه های مختلف دارای کلاس ها  و توابع بسیار متنوع و کاربردی می باشد.حجم نسخه جاری(1.3) این کتابخانه در حدود 60 کیلوبایت می باشد که با توجه به اینکه فایل های جاوااسکریپت تنها در درخواست(Request) اول نیاز به بارگزاری دارند نمی تواند چندان مشکل ساز شود.

برای استفاده از امکانات این کتابخانه کافی است آنرا در صفحه خود لینک کنید.

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

ناگفته نماند که برای استفاده از برخی دیگر از قابلیت های این کتابخانه که در ذیل توضیح داده خواهد شد به نیمچه(!) کتابخانه های جداگانه ای نیز نیاز است.

 حال به برخی از توابع پر کاربرد jquery می پردازیم:

$(documnet).ready(function()

{

  //initial code

})

این رخداد چیزی شبیه window.onload می باشد با این تفاوت که onload زمانی رخ می دهد که تمام عناصر صفحه بارگزاری شده باشد اما رخداد مطروحه jquery تنها اندکی پس از بارگزاری عناصر اولیه و حیاتی صفحه اجرا خواهد شد.

$.ajax({

   type: "POST",

   url: "xamfia.com/default.aspx",

   data: “{‘name’ :’Meysam Navaei’}”,

   success: function(res){

     alert( "My name is " + res.d );

   }

 });

از این کد برای فراخوانی به واسطه آژاکس استفاده میشود. در این کد ما یک درخواست به صفحه xamfia.com/default.aspx ارسال میکنیم به همراه پارامتر name=meysam navaei و پاسخ که در پارامتر res ریخته شده است را در صفحه نمایش می دهیم.

در جی کوئری برای دسترسی به عناصر مختلف از علامت $ استفاده میشود.برای دسترسی به یک عنصر با توجه به Id از $("#id1") و برای کار با عناصری با یک کلاس خاص از $(".class1") و احتمالا حدس میزنید که برای گرفتن تگ خاص نیز از $("a ") استفاده میشود(جالبه نه؟! درست مثل کار با css میمونه)

برای افزودن مقادیر جدید به مقادیر گذشته یک کنترل از دستور $("#div1").append(res)  بهره میبریم و برای افزودن خاصیت(attribute) جدید به یک کنترل از دستور شبیه این استفاده میکنیم

$("#div1").attr("title","xamfia.com")

برای ست کردن مقادیر html روی یک div از دستور (“div1”).html(“xamfia.com”)$  بهره میگیریم و...

همچنین jqury قابلیت های شگفت انگیزی در خلق UI دارد.آنچنان که بسیاری از انیمیشن ها،افکت ها و کنترل های پیچیده وب را با چند دستور ساده برای شما عملیاتی میکند.سعی میکنم در اولین فرصت مقاله ای در این زمینه منتشر کنم.

احتمالا اگر بیشتر از این از jquery صحبت کنیم بی خیال تولکیت های دات نت خواهید شد!! پس حالا سراغ کد اصلی خودمان می رویم.

ابتدا یک کلاس سرویس درست می کنیم.برای راحتی شما من از همان کد مقاله قبل بهره برده ام (فرض کنید نام این سرویس CalculatorService.asmx می باشد) :

 [WebService(Namespace = "http://tempuri.org/")]

 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]

public class CalculatorService : WebService

 {

       [WebMethod]

       public Int32 Add(Int32  a, Int32  b)

       {

            return (a + b);

       }

 

       [WebMethod]

       public string Test()

       {

            return “Hello world”;

       }

}

( از توضیحات در مورد کلاس وب سرویس صرف نظر میکنم و دوستانی که در این زمینه مشکلی داشتند می توانند از توضیحات مندرج در مقاله قبلی بهره بگیرند)

 نحوه فراخوانی هر تابع به شکل زیر می باشد

$(document).ready(function() {

  $.ajax({

    type: "POST",

    url: " CalculatorService.asmx / Add ",

    data: "{‘a’:’ "+2+” ’,’b’:’ ” +3"+ ‘ }",

    contentType: "application/json; charset=utf-8",

    dataType: "json",

    success: function(msg) {

     alert(msg.d)

   }

  });

});

احتمالا چیزی که برایتان جدید هست dataType: "json", می باشد.این دستور نوع داده ای ما را مشخص میکند که باید از نوع (Json(Data tyep میباشد.

(json یک نوع دادهای می باشد که جایگزین مناسبی برای Xml در توسعه وب می باشد.در واقع json نوع فشرده تری نسبت به xml است که این خود باعث کاهش سربار داده ای بسیار زیادی در هنگام فراخوانی توابع وب سرویس که xml base می باشند میشود)

 نکته ای که در مورد ارسال پارامتر ها مهم است اینکه شما حتما باید نام پارامتر ارسالی و مقادیر مرتبط را در تک کوتیشن قرار دهید و اگر مقدار آن نیز رشته ای ثابت است،آن نیز باید در تگ کوتیشن قرار داده شود(به نوع قرار دادن تک کوتیشن برای متغییر ها توجه کنید).

همچنین jquery مقادیر برگشتی را به صورت دلخواه در متغییری d نام میریزد(!)در نتیجه شما هم مجبور هستید برای دستیابی به مقادیر برگشتی هر Message از .d استفاده کنید.

نکته آخر اینکه اگر شما آرایه ای از مقادیر را برگست داده اید می توانید از دستوری شبیه پائین استفاده کنید:

For(i=0;i<msg.d.length;i++)

{

Alert(msg.d[i]);

}