ASP.NET MVC中使用jQuery時的瀏覽器緩衝問題

標籤：click   imp   mod   上下文   control   code   處理   輸出   option   

介紹

雖然jQuery在瀏覽器ajax調用的時候對緩衝提供了非常好的支援，還是有必要瞭解一下怎樣高效地使用http協議。

首先要做的事情是在server端支援HTTP GET，定義不同的URL輸出不同的資料（MVC裡相應的就是action）。

假設要使用同一個地址擷取不同的資料，那就不正確了。一個HTTP POST也不行由於POST不能被緩衝。很多開發人員使用POST主要有2個原因：明白了資料不能被緩衝，或者是避免JSON攻擊（JSON返回數組的時候能夠被入侵）。

緩衝解釋

jQuery全域對象裡的ajax方法提供了一些options來支援緩衝和Conditional GETs功能。

$.ajax({    ifModified: [true|false],    cache: [true|false],});

ifModified選項定義的是在ajax調用的時候是否支援Conditional GETs功能。jQuery會自己主動幫我們處理server端返回的名為Last-Modified的header值，然後在隨後的請求裡的header裡發送If-Modified-Since。這須要我們的MVC Controller要實現Conditional GETs功能才幹用。

Conditional GETs功能在http緩衝上下文中用於又一次驗證緩衝中到期的條目。假設jQuery覺得一個條目已經到期了，它首先會請求server使用Conditional GETs功能又一次驗證該條目，假設server返回狀態代碼304（Not modified），jQuery會又一次使用緩衝裡的該項目，這種話，我們能夠節約非常多流量去下載頁面內容。

cache選項基本上是覆蓋server端返回的http header裡的全部關於緩衝的設定，假設設定cache選項為false的話，jQuery會在請求的URL後面附件一個時間戳記，以便區分之前的URL地址，這樣沒錯請求的內容都是最新的，也就是說瀏覽器每次接收的都是新地址，自然返回的都是最新資料。

讓我們來看幾個情境：

server端響應裡設定No-Cache

server端為王。假設server端明白定義了response響應不能被緩衝的話，jQuery也無能為力。ajax裡的cache選項將被忽略。

JS代碼：

$(‘#nocache‘).click(function () {    $.ajax({        url: ‘/Home/NoCache‘,        ifModified: false,        cache: true,        success: function (data, status, xhr) {            $(‘#content‘).html(data.count);        }    });});

C#代碼：

public ActionResult NoCache(){   // 禁用緩衝   Response.Cache.SetCacheability(HttpCacheability.NoCache);   return Json(new { count = Count++ }, JsonRequestBehavior.AllowGet);}

server端響應裡設定到期時間

server端設定到期時間用於快取資料。該條目在client將根據到期時間被緩衝。

JS代碼：

$(‘#expires‘).click(function () {    $.ajax({        url: ‘/Home/Expires‘,        ifModified: false,        cache: true,        success: function (data, status, xhr) {            $(‘#content‘).html(data.count);        }    });});

C#代碼：

public ActionResult Expires(){    Response.Cache.SetExpires(DateTime.Now.AddSeconds(5));    return Json(new { count = Count++ }, JsonRequestBehavior.AllowGet);}

client從來不快取資料

client決定每次都要最新的資料（不能使用緩衝），也就是說ajaxi裡的cache選項設定為false。無論server端怎樣定義，jQuery每次請求的URL地址都是唯一不同的，目的是每次都擷取最新的內容。

JS代碼：

$(‘#expires_nocache‘).click(function () {    $.ajax({        url: ‘/Home/Expires‘,        ifModified: false,        cache: false, // 這裡是關鍵        success: function (data, status, xhr) {            $(‘#content‘).html(data.count);        }    });});

C#代碼：

public ActionResult Expires(){    // 無論server端怎麼設定都沒用    Response.Cache.SetExpires(DateTime.Now.AddSeconds(5));    return Json(new { count = Count++ }, JsonRequestBehavior.AllowGet);}

server端和client使用Conditional Gets功能驗證快取資料

client將條目放在緩衝裡。在到期之後又一次驗證。server端必須實現Conditional GET功能（使用ETags或者last modified的header）。

JS代碼：

$(‘#expires_conditional‘).click(function () {    $.ajax({        url: ‘/Home/ExpiresWithConditional‘,        ifModified: true, // 這裡是關鍵        cache: true,        success: function (data, status, xhr) {            $(‘#content‘).html(data.count);        }    });});

C#代碼：

public ActionResult ExpiresWithConditional(){    if (Request.Headers["If-Modified-Since"] != null && Count % 2 == 0)    {        return new HttpStatusCodeResult((int)HttpStatusCode.NotModified);    }    Response.Cache.SetExpires(DateTime.Now.AddSeconds(5));    Response.Cache.SetLastModified(DateTime.Now);    return Json(new { count = Count++ }, JsonRequestBehavior.AllowGet);}

上述MVC action中的代碼僅僅是一個範例（非真實代碼），在真實的實現中，server端應該可以知道資料自從上次響應以後是否被改動過。

總結

具體通過這4個情境，大家應該瞭解了ajax請求的緩衝技術了吧，我就不做總結了。

ASP.NET MVC中使用jQuery時的瀏覽器緩衝問題