熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> .NET編程 >> 正文

jQuery調用Ajax高效緩存:.NET MVC實戰

2013-11-13 09:53:34  來源: .NET編程 

  盡管jQuery在浏覽器ajax調用的時候對緩存提供了很好的支持還是有必要了解一下如何高效地使用http協議

  首先要做的事情是在服務器端支持HTTP GET定義不同的URL輸出不同的數據(MVC裡對應的就是action)如果要使用同一個地址獲取不同的數據那就不對了一個HTTP POST也不行因為POST不能被緩存許多開發人員使用POST主要有個原因明確了數據不能被緩存或者是避免JSON攻擊(JSON返回數組的時候可以被入侵)

  緩存解釋

  jQuery全局對象裡的ajax方法提供了一些options來支持緩存和Conditional GETs功能

  $ajax({

  ifModified: [true|false]

  cache: [true|false]

  })

  ifModified選項定義的是在ajax調用的時候是否支持Conditional GETs功能jQuery會自動幫我們處理服務器端返回的名為LastModified的header值然後在隨後的請求裡的header裡發送IfModifiedSince這需要我們的MVC Controller要實現Conditional GETs功能才能用Conditional GETs功能在http緩存上下文中用於重新驗證緩存中過期的條目如果jQuery認為一個條目已經過期了它首先會請求服務器使用Conditional GETs功能重新驗證該條目如果服務器返回狀態碼(Not modified)jQuery會重新使用緩存裡的該項目這樣的話我們可以節約很多流量去下載頁面內容

  cache選項基本上是覆蓋服務器端返回的http header裡的所有關於緩存的設置如果設置cache選項為false的話jQuery會在請求的URL後面附件一個時間戳以便區分之前的URL地址這樣沒錯請求的內容都是最新的也就是說浏覽器每次接收的都是新地址自然返回的都是最新數據

  讓我們來看幾個場景

  服務器端響應裡設置NoCache

  服務器端為王如果服務器端明確定義了response響應不能被緩存的話jQuery也無能為力ajax裡的cache選項將被忽略

  JS代碼

  $(#nocacheclick(function () {

  $ajax({

  url: /Home/NoCache

  ifModified: false

  cache: true

  success: function (data status xhr) {

  $(#contenthtml(unt)

  }

  })

  })

  C#代碼

  public ActionResult NoCache()

  {

  // 禁用緩存

  ResponseCacheSetCacheability(HttpCacheabilityNoCache)

  return Json(new { count = Count++ } JsonRequestBehaviorAllowGet)

  }

  服務器端響應裡設置過期時間

  服務器端設置過期時間用於緩存數據該條目在客戶端將依據過期時間被緩存

  JS代碼

  $(#expiresclick(function () {

  $ajax({

  url: /Home/Expires

  ifModified: false

  cache: true

  success: function (data status xhr) {

  $(#contenthtml(unt)

  }

  })

  })

  C#代碼

  public ActionResult Expires()

  {

  ResponseCacheSetExpires(DateTimeNowAddSeconds())

  return Json(new { count = Count++ } JsonRequestBehaviorAllowGet)

  }

  客戶端從來不緩存數據

  客戶端決定每次都要最新的數據(不能使用緩存)也就是說ajax裡的cache選項設置為false不管服務器端如何定義jQuery每次請求的URL地址都是唯一不同的目的是每次都獲取最新的內容

  JS代碼

  $(#expires_nocacheclick(function () {

  $ajax({

  url: /Home/Expires

  ifModified: false

  cache: false // 這裡是關鍵

  success: function (data status xhr) {

  $(#contenthtml(unt)

  }

  })

  })

  C#代碼

  public ActionResult Expires()

  {

  // 不管服務器端怎麼設置都沒用

  ResponseCacheSetExpires(DateTimeNowAddSeconds())

  return Json(new { count = Count++ } JsonRequestBehaviorAllowGet)

  }

  服務器端和客戶端使用Conditional Gets功能驗證緩存數據

  客戶端將條目放在緩存裡在過期之後重新驗證服務器端必須實現Conditional GET功能(使用ETags或者last modified的header)

  JS代碼

  $(#expires_conditionalclick(function () {

  $ajax({

  url: /Home/ExpiresWithConditional

  ifModified: true // 這裡是關鍵

  cache: true

  success: function (data status xhr) {

  $(#contenthtml(unt)

  }

  })

  })

  C#代碼

  public ActionResult ExpiresWithConditional()

  {

  if (RequestHeaders[IfModifiedSince] != null && Count % ==

  {

  return new HttpStatusCodeResult((int)HttpStatusCodeNotModified)

  }

  ResponseCacheSetExpires(DateTimeNowAddSeconds())

  ResponseCacheSetLastModified(DateTimeNow)

  return Json(new { count = Count++ } JsonRequestBehaviorAllowGet)

  }

  上述MVC action中的代碼只是一個例子(非真實代碼)在真實的實現中服務器端應該能否知道數據自從上次響應以後是否被修改過

  總結

  詳細通過這個場景大家應該了解了ajax請求的緩存技術了吧我就不做總結了


From:http://tw.wingwit.com/Article/program/net/201311/11886.html
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.