| نویسنده : |
علیرضا عبدالهی |
|
86.12.15 |
|
516 بار مشاهده |
|
در این مقاله به شما تکنیک کاربردی را آموزش می دهم که اطلاعات درسمت کلاینت (حافظه مرورگر) Cache می شود و باعث افزایش بیشتر سرعت صفحات وب شما می شود.
وقتی که از Ajax استفاده می کنیم، صفحه بصورت کامل دوباره درخواست نمی شود بلکه فقط اطلاعات موردنیاز درخواست می شود.این عمل باعث می شود که اطلاعاتی که cache می شود، ازبین نروند.cache کردن در سمت کلاینت بعضی مواقع به دلیل نیاز به افزایش سرعت ضروری است و همچنین باعث کاهش بار روی DBMS می شود.به دلیل اینکه کامپیوتر های امروزی مشکل حافظه RAM ندارند این تکنیک تقریبا در همه کامپیوتر ها قابل استفاده و اجرا است و به نظر می رسد که یک تکنیک بسیار خوب برای برنامه های وب جدید مانند نسخه جدید Email Yahoo است.
بوسیله ویژگی Ajax ، اطلاعات برنامه می توانند بروز شوند و در طول عمر صفحه باقی بمانند و در این عملیات نیاز به استفاده از viewstat ( و همچنین Hidden field) و یا در ابعاد کوچکتر نیاز به کوکی ها برای نگهداری اطلاعات نیست زیرا صفحه refresh نمی شود تا اطلاعات موجود صفحه از بین روند. Viewstat ها مانند یک شمشیر دولبه هستند که استفاده ناشیانه از آنها اثر بدی بر روی بازدهی دارد، چون در هربار Postback صفحه این اطلاعات نیز به و از سرور ارسال می شوند.
اکنون سوال اینست که آیا ما می توانیم بدون استفاده از Ajax از این تکنیک استفاده کنیم؟
جواب خیر است.ما باید از Ajax در این تکنیک استفاده کنیم، چون در صورتی که بخواهیم کل صفحه را دوباره دریافت کنیم،تمام اطلاعات قبلی cache شده از بین می روند.بنابراین فقط با Ajax می توانیم متغییرهای صفحه را نگاه داریم و به انها اطلاعاتی اضافه کنیم بدون اینکه اطلاعات قبلی از بین بروند.
کد ضمیمه این مقاله را می توانید به منظور استفاده از رکوردهای داده، بوسیله جاوااسکریپت توسعه دهید. شما حتی می توانید اطلاعات را بصورت فایل XML دریافت ودر کامپیوتر کلاینت مورد پردازش قرار داده و از طریق جاوااسکریپت های سمت کلاینت آنها را نمایش دهید.
من از یک آرایه انجمنی (associative arrays) جاوااسکریپت برای نگهداری داده در سمت کلاینت استفاده کردم که اطلاعات را در سمت کلاینت Cache می کند.یک نکته درباره آرایه های انجمنی جاوااسکریپت اینست که وقتی شما یک رشته را بعنوان کلید دسترسی به داده به ارایه اضافه کردید،دیگر نمی توانید آن کلید را دوباره استفاده کنید.به بیان ساده اینکه شما نمی توانید دوعنصر با کلید دسترسی یکسان داشته باشید.
فرض کنید شما از یک آرایه یه صورت زیر استفاده می کنید:
asarray["akey"] = <value>
این امکان پذیر نیست که شما بتوانید به داده ها بر اساس جایگاه ترتیبی آنها دسترسی پیدا کنید.شبیه این:
var anyvar = asarray[0]
استفاده از کدها:
اجازه بدهید که یک قسمت مهم از کدها را که کاملا برای پیاده سازی این تکنیک ضروری است، توضیح دهم.بقیه کد ها برای نمایش و ظاهر برنامه است که بسته به پروژه شما متغییر است و من راجب آن توضیح نمی دهم.
می خواهم قسمت مهمی از کد را که caching سمت کلاینت را بوسیله Ajax امکان پذیر می کند، توضیح دهم.من از داده های XML برای نمایش هدفم استفاده کردم و این امکان را می دهد که بدون داشتن مشکلات connection strings و یا داشتن SQL Server برروی کامپیوتر تان بتوانید این برنامه را به راحتی اجرا کنید.
گام اول
یک وب سایت جدید با استفاده از گزینه "ASP.NET AJAX-Enabled Website" در Visual Studio 2005 بسازید.در صورتیکه .NET 2 Ajax Toolkit را ندارید به اینجا بروید و آن را دانلود و نصب نمایید.لازم به ذکر است که شما بدون .NET 2 Ajax Toolkit نمی توانید بقیه مراحل را ادامه دهید.
گام دوم
"Add New Item" را بوسیله کلیک راست روی Project در Solution Explorer انتخاب نموده و گزینه "Web Service" را انتخاب کنید.کد های زیر را در کلاس وب سرویس خود کپی نمایید:
using System.Web.Script.Services;
...
[ScriptService]
public class DataAccess : System.Web.Services.WebService
{ ...
صفت [ScriptService] وب سرویس را قابل فراخوانی از طریق Ajax framework می نماید و نیز برای این کار می بایست کد خط زیر را به بالای کلاس خود اضافه نمایید:
using System.Web.Script.Services
گام سوم
متد های خود را برای انجام عملیات موردنظرتان به وب سرویس اضافه کنید و یا از مثال زیر استفاده کنید.این کدها را در کلاس وب سرویس خود کپی کنید:
[WebMethod]
public string FetchOrders(string key)
{
return LoadData(key);;
}
private string LoadData(string key)
{
DataSet ds = new DataSet();
ds.ReadXml(this.Context.Server.MapPath("App_Data\\northwind.xml"));
ds.Tables["Orders"].DefaultView.RowFilter = "customerid = '" + key + "'";
return RenderResultTable((ds.Tables["Orders"].DefaultView));
}
private string RenderResultTable(DataView rdr)
{
StringBuilder str = new StringBuilder();
str.AppendLine("<table cellspacing=\"0\" cellborder=\"=0\"
cellpadding=\"5\">");
str.AppendLine("<tr><td><b>Order Date</b></td><td><b>Order ID</b>
</td></tr>");
foreach(DataRowView drv in rdr)
{
str.AppendLine("<tr>");
str.AppendFormat("<td>{0}</td> <td>{1}</td>", drv["OrderDate"],
drv["OrderID"]);
str.AppendLine("</tr>");
}
str.AppendLine("</table>");
return str.ToString();
}
گام چهارم
اکنون به قسمت اسکریپت های سمت کلاینت که کار اصلی caching و بازیابی اطلاعات را بوسیله درخواست اطلاعات از وب سرویس انجام می دهند،رفته و کد های زیر را کپی کنید.این کد ها همه کد های جاوااسکریپت نیست و بقیه کد ها در مراحل بعد اضافه خواهد شد.
var cacheData = new Array(); // This is our cache
var currSel = null;
var seedData = "0BFA4D6B-DD18-48aa-A926-B9FD80BFA5B7";
// Prime a cache item with a unique initial value
گام پنجم:
اکنون کد های لازم جاوااسکریپت را اضافه کنید.من یک دکمه HTML با ID، "btnFetch" دارم که در رویداد کلیک شدن آن "OnClick" ، درخواست فراخوانی اطلاعات خود را بصورت Ajax به سرور می فرستم و یا آنها را از آرایه(cache) (در صورتیکه قبلا این اطلاعات دریافت شده و موجود باشد) استخراج می کنم.بصورت زیر:
function btnFetch_onclick()
{
currSel = document.getElementById("dlCustomers").value;
var status = document.getElementById("divStatus");
//var svc = new DataAccess();
if(cacheData[currSel]==null)
{
DataAccess.FetchOrders(currSel,OnCompleteCallback,OnErrorCallback,
OnTimeOutCallback);
cacheData[currSel] = seedData;
status.innerHTML = "[Live Result]";
}
else
{
status.innerHTML = "[Cached Result]";
var cacheobject = FetchDataFromCache(currSel);
RenderData(cacheobject);
}
document.getElementById("dlCustomers").focus();
}
نکته ایی که شما باید به آن دقت داشته باشید اینست که cache کردن اطلاعات در سمت کلاینت یک تکنیک بسیار خوب برای بهبود زمان پاسخ دهی سریع برنامه های شماست،اما شما می توانید داده های مورد نیاز خود را قبل از اینکه کاربر بخواهد کاری انجام دهد شروع به cache کردن کنید (prefetching data) تا هنگام عمل کاربر، به سرعت به اطلاعات دسترسی پیدا کنید.
امیدوارم از این مقاله بتواند مورد فایده واقع شود.
مترجم:علیرضا عبدالهی
