keiv@n
چهارشنبه 05 فروردین 1394, 15:21 عصر
من واسه استفاده از ajax فقط یه script manager میزارم تو صفحه و مثلا دکمه ای که قراره ذخیره کنه رو داخل update panel میزارم.
خیلی نرم افزار های تحت وب دیدم که کار میکنن . ولی اینکاری که من میکنم خیلی طول میکشه.اصلا طبیعی نیست. واسه یه insert کردن 10 یا 15 ثاینه طول میکشه
ایجکس یه تابع جاوا اسکریپت هستش ، که امکان فراخوانی توابع سمت سرور رو به صورت آسینکرون فراهم می کنه برای ارسال یک درخواست آسینکرون باید مطابق مراحل زیر عمل کنی :
1-ایجاد تابع هدف
می خواهیم با درخواست ایجکسی تابعی رو فراخوانی کنیم :
روش :
ایجاد تابع هدف در یک فایل با پسوند cs یا وب هندلر یا سایر فایلهای مناسب ....
ملزومات :
-این تابع باید دارای هدر [webMethod] باشه
-نوع دسترسی این تابع باید static باشه
اگر بخوایم یه مثال ساده از یه تابع پیش پا افتاده بزنیم ، تابع زیر هستش که مقدار hello bodys رو برگشت میده :
[WebMethod]
public static string test()
{
return "hello bodys";
}
2-ارسال درخواست توسط تابع ایجکس :
روش :
نوشتن تابع ایجکس در صفحه جاری که می خوایم رفت و برگشت اطلاعات رو داشته باشیم....
-تابع ایجکس از نوع جاوا اسکریپت هستش پس میشه در صفحه aspx در قسمت <head> تعریفش کرد :
function test() {
$.ajax({
type: "POST",
url: "/Default.aspx/test",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert(data.d);},
error: function () {
alert("error");
}
});
}
اگر بخوایم تابع بالا رو آنالیز کنیم :
type: متد ارسال اطلاعات به تابع هدف می باشد که در اینجا از نوع post در نظر گرفته شده ، درضمن caseSensitive هست(حساس به حروف کوچک و بزرگ)
url: معرف آدرس تابع سمت سرور هستش
data: پارامتر های ارسالی به تابع سمت سرور رو شامل میشه .
contentType: نوع مقادیر ارسالی سمت تابع هدف رو مشخص می کنه
dataType: نوع برگشتی از تابع هدف رو مشخص می کنه
success: تابعی که وقتی پاسخ مناسب از تابع هدف دریافت شد فعال می شود(زیاد نگران نباش معادل {} ()function success هستش فرقی نداره)
error: تابعی که وقتی ارور از تابع هدف دریافت شد فعال می شود
نکته : همیشه مقدار برگشتی از تابع هدف در قالب data یا متغییری که در پارامتر تابع success تعریف شده(حتما نباید اسمش data باشه هر اسمی میتونه باشه) برگشت داده خواهد شد و اما data.d چیه ؟ این به خاطر امنیت اطلاعاته که مایکروسافت از قصد اینکارو کرده (واسه خانوما که عاشق امنیت و سکیوریتی هستن....)
بعد از این مراحل باید یک باتن بزاریم تا تابع ایجکس رو فراخوانی کنه :
<div class="row">
<div class="col-md-2 col-md-offset-2">
<button type="button" onclick="test()">test</button>
</div>
</div>
خوب حالا برنامه رو اجرا کنیم :
در زیر نحوه ارسال درخواست و دریافت پاسخ نشون داده شده ....