اموزش AJAX

آموزش AJAX

قتی با Ajax یک برنامه می سازید، در واقع تجربه ای گرانبها در اختیار کاربرانتان می گذارید. می توان با استفاده از ویژگی های Ajax و کنترل هایserver-side در ASP.NET، از قبیل کنترل UpdatePanel، برای بهینه سازی server-based ASP.NET Web Forms applications استفاده کرد.

این مقاله، روی بهبود server-based ASP.NET Web Forms applications تمرکز می کند.

چرا از ویژگی های Microsoft Ajax استفاده کنیم؟

Web Forms applicationهایی که از ویژگی های Ajax استفاده می کنند، دارای ویژگی های زیر هستند:

• عنصرهای اینتراکتیو و آشنای UI، از قبیل progress indicators، tooltips، و پنجره pop-up

• بازدهی بهبود یافته برای Web Forms application، زیرا قسمت های مهم پردازش صفحه وب را می توان در مرورگر انجام داد.

• آپدیت های جزیی صفحه که فقط بخش هایی از صفحه وب را refresh می کنند که تغییر یافته اند.

• client integration با سرویس های برنامه ASP.NET برای اعتبار سنجی فرم ها، سطح دسترسی، و پروفایل های کاربر.

• کلاس های پروکسی، که بطور اتوماتیک generate میشوند، و متدهای فراخوانی web service را از اسکریپت کلاینت ساده می کنند.

• قابلیت سفارشی کردن کنترل های سرویس جهت دربر گرفتن قابلیت های کلاینت.

• ساپورت اکثر مرورگرهای معروف، از قبیل Internet Explorer، Mozilla Firefox، و Apple Safari.

معماری برنامه های Microsoft Ajax

یک برنامه Microsoft Ajax Web، یا از یک solution فقط کلاینت یا از یک solution کلاینت و سرور تشکیل شده است. یک solution فقط کلاینت، از لایبرری Microsoft Ajax استفاده می کند اما از هیچ کنترل سرور ASP.NET استفاده نمی کند. بعنوان مثال، HTML می تواند حاوی عناصر اسکریپت باشد که فایل های Microsoft Ajax Library .js را reference می کنند. لایبرری Microsoft Ajax به برنامه های Ajax اجازه می دهد کل پردازش را روی کلاینت اجرا کند. solution کلاینت و سرور شامل استفاده از هم Microsoft Ajax Library و هم کنترل های سرور ASP.NET است.

شکل زیر، عملکردی را نشان می دهد که در لایبرری های client-script و componentهای سروری که همراه .NET Framework 4 هستند، وجود دارند.

معماری سرور و کلاینت Microsoft Ajax

این شکل، عملکرد لایبرری کلاینت محور Microsoft Ajax را نشان می دهد، که شامل ساپورت ایجاد componentهای کلاینت، سازگاری با مرورگر، و سرویس های networking و هسته ای (Core) می باشد. همچنین این شکل عملکرد ویژگی های Microsoft Ajax سرور محور را نیز نشان می دهد، که شامل ساپورت اسکریپت، سرویس های وب، سرویس های application، و کنترل های سرور است. بخش های بعدی، شکل بالا را با جزییات بیشتر توضیح خواهند داد.

اموزش AJAX

معماری Microsoft Ajax Client

معماری کلاینت، شامل لایبریی هایی برای ساپورت کامپوننت، سازگاری با مرورگر، نتورکینگ، و سرویس های هسته ای است.

کامپوننت ها

کامپوننت های کلاینت، رفتارهای پیشرفته را در مرورگر، بدون postback، فعال می کنند. این کامپوننت ها به سه دسته تقسیم می شوند:

• Componentها، که اشیای غیر visual هستند که کد را encapsulate می کنند.

• Behaviorها، که رفتار عنصرهای DOM موجود را گسترش می دهند.

• Controlها، که یک عنصر DOM جدید ارائه می کنند که دارای رفتار سفارشی است.

نوع کامپوننتی که شما استفاده می کنید، بستگی به نوع رفتار کلاینتی دارد که شما می خواهید. مثلاً، یک watermark برای text box موجود را می توان با استفاده از رفتاری که به text box الصاق می شود، ایجاد کرد.

سازگاری با مرورگر

لایه سازگاری با مرورگر، سازگاری با اکثر مرورگرهای معروف را برای Microsoft Ajax فراهم می کند. این، شما را قادر به نوشتن همان اسکریپ، بدون در نظر گرفتن اینکه کدام مرورگر هدف شماست، می کند.

نتورکینگ

لایه نتورکینگ، ارتباطات بین اسکرپت و سرویس های وب محور بر applicationها را مدیریت می کند. همچنین متد فراخوانی های از راه دور غیر همزمان را نیز مدیریت می کند. در بسیاری از سناریوها، از قبیل آپدیت های جزیی صفحه که از کنترل UpdatePanel استفاده می کنند، لایه نتورکینگ بطور اتوماتیک مورد استفاده قرار می گیرد و نیاز به نوشتن هیچ کدی نیست.

همچنین این لایه، ساپورت دسترسی به اعتبارسنجی فرم های سرور محور، اطلاعات سطح دسترسی، و اطلاعات پروفایل در اسکریپت کلاینت را نیز فراهم می کند. این ساپورت، تا وقتیکه application به لایبرری Microsoft Ajax دسترسی داشته باشد، در Web applicationهایی هم که با استفاده از ASP.NET ایجاد نشده اند نیز قابل دسترسی است.

سرویس های هسته ای

لایبرری های Ajax client-script در ASP.NET، متشکل از فایل های JavaScript (.js) هستند که دارای ویژگی هایی برای توسعه شی گرایی هستند.ویژگی های شی گرایی موجود در لایبرری های Microsoft Ajax client-script، سطج بالایی از سازگاری و پیمانه ای بودن (modularity) را در اسکریپ کردن کلاینت را فعال می کنند. سرویس های هسته ای زیر، بخشی از معماری کلاینت هسند:

• اکستنشن های شی گرا به JavaScript از قبیل کلاس ها، فضاهای نامی، event handling، وراثت، انواع داده ای، و serialize کردن شی.

• یک لایبرری کلاس پایه، که حاوی کامپوننت هایی از قبیل string builderها، و مدیریت خطای گسترش یافته است.

• ساپورت لایبرری های جاواسکریپت، که یا در یک اسمبلی embed می شود یا بصورت فایل های جاواسکریپت مستقل در اختیار گذاشته می شوند. لایبرری های embed شده جاواسکریپت در یک اسمبلی می توانند نصب برنامه را آسان کنند و به حل مسائل versioning کمک می کند.

عیب یابی و مدیریت خطا

سرویس های هسته ای شامل کلاس Sys.Debug است، که متدهایی را برای نمایش اشیا در فرم های قابل خواندن در انتهای صفحه وب فراهم می کند. همچنین این کلاس، trace messageها را نشان می دهد، شما را قادر به استفاده از assortionها می کند، و به شما اجازه شروع debugger را می دهد. شی Error گسترش یافته API، جزییات استثنای مفیدی را با ساپورت مدهای release و debug در اختیار می گذارد.

جهانی سازی (globalization)

سرور Ajax و معماری کلاینت در ASP.NET، مدلی را برای محلی کردن و جهانی کردن اسکریپت کلاینت در اختیار می گذارد.این کار شما را قادر به طراحی برنامه هایی می کند که از پایه کدی واحد برای فراهم کردن UI برای موقعیت های (locale) زیادی (زبان ها و فرهنگ ها) استفاده می کنند. مثلاً، معماری Ajax، کد جاواسکریپت را طبق تنظیمات فرهنگ مرورگر کاربر، بطور اتوماتیک قادر به شکل دهی تاریخ (Date) و اشیای Number می کند، بدون نیاز به postback به سرور.

معماری سرور Ajax

قطعه های از سرور که توسعه Ajax را ساپورت می کند، متشکل از کنترل های سرور ASP.NET Web و کامپوننت هایی است که UI و روال کاری برنامه را مدیریت می کنند. همچنین قطعه های سرور، serialization، validation، و توسعه پذیری کنترل را مدیریت می کند. همچنین سرویس های وبی در ASP.NET وجود دارند که شمتا را قادر به دسترسی به سرویس های برنامه ASP.NET برای اعتبار سنجی فرم ها، سطح دسترسی، و پروفایل کاربران می کند.

ساپورت اسکریپت

ویژگی های Ajax در ASP.NET معمولاً با استفاده از لایبرری های اسکریپت کلاینت که فرآیند را بطور مستقیم روی کلاینت اجرا می کنند، پیاده سازی می شود. همچنین می توانید ویژگی های Ajax را با استفاده از کنترل های سرور که اسکریپت های ارسال شده از سرور به کلاینت را ساپورت می کند، پیاده سازی کنید.

همچنین می توانید اسکریپت کلاینت را برای برنامه های ASP.NETتان سفارشی کنید. در این مورد، همچنین می توانید از ویژگی های Ajax برای مدیریت کردن اسکریپت سفارشی تان بصورت فایل های .js (روی دیسک) یا فایل های .js قرارداده شده در اسمبلی بعنوان resource، استفاده کنید.

ویژگی های Ajax، شامل مدلی برای modeهای release و debug می باشد. مد release، چک کردن و مدیریت خطا (error checking and exception handling) را فراهم می کند که با کمترین اندازه فایل، برای اجرا بهینه سازی شده. مد debug، ویژگی های debugging بهتری از قبیل چک کردن type و argument را در اختیار می گذارد. ASP.NET، ورژن های debug را هنگامی که برنامه در مد debugging است، اجرا می کند. این کار شما را قادر به قرار دادن خطاها در اسکریپت های debug می کند و در عین حال اندازه کد release را به حداقل می رساند.

ساپورت اسکریپت برای Ajax در ASP.NET، جهت فراهم نمودن دو ویژگی زیر بکار می رود:

• Microsoft Ajax Library، که یک type system و مجموعه ای از اکتنش های جاواسکریپت است که namespaceها، وراثت، اینترفیس، شمارش (enumeration)، refletion، و ویژگی های اضافی را در اختیار می گذارد.

• رندرینگ جزیی صفحه، که ناحیه هایی از صفحه را با استفاده از یک postback غیرهمزمان، آپدیت می کند.

محلی سازی (localization)

معماری Microsoft Ajax، بر پایه مدل محلی ASP.NET 2.0 ساخته می شود. این موضوع، ساپورت اضافی برای فایل های .js محلی شده فراهم می کند که در یک اسمبلی قرار داده می شوند یا روی دیسک فراهم می شوند. ASP.NET می تواند اسکریپت های کلاینت محلی شده و منبع ها را بطور اتوماتیک برای زبان ها و مناطق ویژه serve کند.

سرویس های وب (Web Services)

با عملکردهای Ajax در یک صفحه ASP.NET، می توانید از اسکریپت کلاینت برای فراخوانی سرویس های وب ASP.NET (.asmx) و هم سرویس های Windows Communication Foundation یا WCF (.svc) استفاده کنید. referenceهای اسکریپت مورد نیاز بطور اتوماتیک به صفحه اضافه می شود، و در عوض کلاس های پروکسی Web service را generate می کند که از اسکریپت کلاینت مورد استفاده قرار می گیرد تا سرویس وب را فراخوانی کند.

سرویس های برنامه (Application Services)

سرویس های برنامه در ASP.NET، سرویس های وبی built-in هستند که بر اساس اعتبار سنجی فرم ها، سطح دسترسی، و پروفایل کاربران در ASP.NET هستند. می توان این سرویس ها را توسط اسکریپت کلاینت در یک صفحه وب با قابلیت Ajax، توسط یک برنامه کلاینت ویندوز، یا توسط یک کلاینت سازگار با WCF فراخوانی کرد.

کنترل های سرور

کنترل های سرور Ajax، متشکل از سرور و کد کلاینتی است که رفتار پیشرفته کلاینت را ایجاد می کند. وقتی کنترلی با قابلیت Ajax را به یک صفحه وب ASP.NET اضافه می کنید، آن صفحه بطور اتوماتیک اسکریپت کلاینت را برای حمایت از عملکرد Ajax به مرورگر می فرستد. می توانید کد کلاینت اضافی را جهت سفارشی کردن عملکرد کنترل فراهم کنید، اما این کار وجب نیست.

لیست زیر، پرکاربردترین کنترل های سرور Ajax را توضیح می دهد:

همچنین می توانید کنترل های سرور سفارشی ASP.NET ایجاد کنید که حاوی رفتارهای کلاینت Ajax است. کنترل های سفارشی ای که قابلیت های کنترل وب های دیگر ASP.NET را بهبود می بخشند، بصورت extendercontrols ارجاع (refer) می شوند.

Ajax Control Toolkit

Ajax Control Toolkit حاوی کنترل هایی است که می توانید برای ساختن برنامه های وب با قابلیت Ajax استفاده کنید. این کنترل ها نیازی به دانش جاواسکریپت یا Ajax ندارند. آنها با استفاده از مفاهیمی طراحی شده اند که برای برنامه نویسان ASP.NET Web Forms application اشنا هستند. با استفاده از Ajax Control Toolkit، می توانید برنامه های ASP.NET Web Forms با قابلیت Ajax و برنامه های وب ASP.NET MVC را با درگ کردن کنترل ها از Toolbox ویژوال استودیوبسازید. Ajax Control Toolkit، یک پروژه open-source است که بخشی از CodePlex Foundation محسوب می شود.

برای یادگیری کامل آژاکس لطفا به لینک روبرو رجوع کنید: آموزش AJAX

• نوشته شده در ۱۸ مهر ۱۳۹۱   |   
• نظرات - ۰   |   
• نظر بدهید

عنوان نظر
متن نظر
نام
ایمیل

---

آموزش طراحی سایت

• نوشته شده در ۵ مهر ۱۳۹۱   |   
• نظرات - ۰   |   
• نظر بدهید

عنوان نظر
متن نظر
نام
ایمیل

---

نویسه جدید وبلاگ

آموزش تخصصی CSS (قسمت اول)

body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}

<html>
<head>
<link rel="stylesheet" 
type="text/css" href="ex1.css" />
</head>

<body>

<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>

<p>This paragraph has a left margin of 50 pixels</p> 

</body>
</html>

body
{
background-color:yellow;
}
h1
{
font-size:36pt;
}
h2
{
color:blue;
}
p
{
margin-left:50px;
}

p {color:red;text-align:center;}

p
{
color:red;
text-align:center;
}

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

#para1
{
text-align:center;
color:red;
}

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");} 

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

h3
{
color:red;
text-align:left;
font-size:8pt;
}

h3
{
text-align:right;
font-size:20pt;
}

color:red;
text-align:right;
font-size:20pt;

• نوشته شده در ۴ مهر ۱۳۹۱   |   
• نظرات - ۰   |   
• نظر بدهید

عنوان نظر
متن نظر
نام
ایمیل

---