.NET Tips: غيرفعال كردن كش مرورگر هنگام استفاده از jQuery Ajax

براي استفاده از قابليت‌هاي Ajax كتابخانه jQuery ، شش متد زير در اختيار برنامه نويس‌ها است:


$.ajax(), load(), $.get(), $.getJSON(), $.getScript(), and $.post()

كه در حقيقت 5 مورد آخر ذكر شده صرفا بيان اولين متد ajax فوق به نحوي ديگر مي‌باشند و محصور كننده‌ توانايي‌هاي آن هستند.

براي مثال كد زير زمان جاري را از سرور دريافت كرده و نتيجه را در سه تكست باكس قرار داده شده در صفحه نمايش مي‌دهد.
ابتدا وب سرويس ساده زير را در نظر بگيريد كه زمان شمسي جاري را بر مي‌گرداند:


using System;
using System.Globalization;
using System.Web.Script.Services;
using System.Web.Services;

namespace TestJQueryAjax
{
 [WebService(Namespace = "http://tempuri.org/")]
 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 [System.ComponentModel.ToolboxItem(false)]
 [ScriptService]
 public class AjaxSrv : WebService
 {
     public class TimeInfo
     {
         public string Date { set; get; }
         public string Hr { set; get; }
         public string Min { set; get; }
     }

     [WebMethod(EnableSession = true)]
     [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
     public TimeInfo GetTime()
     {
         DateTime now = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day);
         PersianCalendar pc = new PersianCalendar();
         string today = string.Format("{0}/{1}/{2}",
                                         pc.GetYear(now),
                                         pc.GetMonth(now).ToString("00"),
                                         pc.GetDayOfMonth(now).ToString("00"));
         TimeInfo ti = new TimeInfo
         {
             Date = today,
             Hr = DateTime.Now.Hour.ToString("00"),
             Min = DateTime.Now.Minute.ToString("00")
         };
         return ti;
     }
 }
}

سپس اگر از تابع Ajax كتابخانه jQuery جهت دريافت زمان جاري از وب سرويس استفاده نمائيم، كد صفحه ما به صورت زير خواهد بود:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestFillCtrls.aspx.cs"
 Inherits="TestJQueryAjax.TestFillCtrls" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>

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

 <script type="text/javascript">
     function validate() {
         $.ajax({
             type: "POST",
             url: 'AjaxSrv.asmx/GetTime',
             data: '{}',
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             success:
                 function(msg) {                     
                     $("#<%=txtDate.ClientID %>").val(msg.d.Date);
                     $("#<%=txtHr.ClientID %>").val(msg.d.Hr);
                     $("#<%=txtMin.ClientID %>").val(msg.d.Min);
                 },
             error:
                 function(XMLHttpRequest, textStatus, errorThrown) {
                     alert("خطايي رخ داده است");
                 }
         });
         //debugger;
     } 
 </script>

</head>
<body>
 <form id="form1" runat="server">
 <div>
     <asp:TextBox ID="txtDate" runat="server" />
     <br />
     <asp:TextBox ID="txtHr" runat="server" />
     <br />
     <asp:TextBox ID="txtMin" runat="server" />
     <br />
     <asp:Button ID="btnGetTime" runat="server" Text="Click here!" UseSubmitBehavior="false"
             OnClientClick="validate();return false;" />
 </div>
 </form>
</body>
</html>

تنها نكته‌ي جديد اين اسكريپت، نحوه‌ي استفاده از خروجي JSON وب متد ما است كه از نوع TimeInfo تعريف شده است. خروجي نمونه اين وب متد به صورت زير مي‌تواند باشد:


{"d":{"__type":"TestJQueryAjax.AjaxSrv+TimeInfo","Date":"1388/07/14","Hr":"12","Min":"59"}}

كه نحوه‌ي دسترسي به اجزاي آن‌را در متد validate‌ ملاحظه مي‌نمائيد.

بايد به خاطر داشت كه براي هر 6 متد Ajax ايي jQuery ، عمليات كش شدن اطلاعات در مرورگر كاربر به صورت پيش فرض فعال است. اما اين نكته تنها زمانيكه dataType مورد استفاده از نوع script يا jsonp باشد، صادق نبوده و كش شدن به صورت خودكار غيرفعال مي‌گردد.
روش سنتي غيرفعال كردن كش در حين عمليات اجكسي، استفاده از يك كوئري استرينگ متغير در پايان url درخواستي است. به اين صورت مرورگر درخواست صادره را جديد فرض كرده و از كش خود استفاده نمي‌نمايد (همين مورد در حالت كش شدن تصاوير هم صادق است).
jQuery نيز همين عمليات را در پشت صحنه انجام داده اما تنظيم آن‌را به نحوي مطلوب‌تري ارائه مي‌دهد. يا پارامتر cache را در تعريف متد ajax خود اضافه نموده و مقدار آن را مساوي false قرار دهيد و يا جهت تاثير گذاري بر روي كليه متدهاي مورد استفاده، پيش از استفاده از آن‌ها اين تنظيم را مشخص سازيد:


$.ajaxSetup({cache: false});

۱۳۸۸/۰۷/۱۴

غيرفعال كردن كش مرورگر هنگام استفاده از jQuery Ajax