關於jQuery AJAX cache參數
4 | 44,229 |
網友DD04問到$.ajaxSetup({ cache: false })的用途,我寫了一個小範例說明:
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (Request["m"] == "t" )
{
Response.ContentType = "text/plain";
System.Threading.Thread.Sleep(2000);
Response.Write("Time: " + DateTime.Now.ToString("HH:mm:ss.fff") + "\n");
Response.Write("Method: " + Request.HttpMethod + "\n");
Response.Write("QueryString: " + Request.Url.Query + "\n");
Response.Write("PostData: ");
foreach (string key in Request.Form.Keys)
Response.Write("\n" + key + "->" + Request.Form[key]);
Response.End();
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Ajax Cache Demo</title>
<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//$.ajaxSetup({ cache: false });
$("#btnPostTest").click(function() {
$.post("default.aspx", { m: "t" }, showResult);
});
$("#btnGetTest").click(function() {
$.get("default.aspx", { m: "t" }, showResult);
});
function showResult(d) {
alert(d);
}
});
</script>
</head>
<body>
<input type="button" id="btnPostTest" value="Post Test"/>
<input type="button" id="btnGetTest" value="Get Test"/>
</body>
</html>
以上的程式碼可以存成default.aspx後實際跑來玩(記得要校正jquery.1.3.2.js的網址)。在網頁裡我做了兩顆按鈕,按下後會分別觸發$.get()及$.post(),而呼叫的對象就是default.aspx本身。在Page_Load()裡有段邏輯,當Request["m"] == "t"時不顯示網頁,而是將Request相關資訊Response.Write回去給Javascript端。為了突顯Cache效應,我特別放了一個Thread.Sleep(2000),也就是說,每次執行時,要停頓兩秒後才會得到結果。
首先你可以按兩次Post Test,每次應該都會在兩秒後得到結果。接著按兩次Get Test試試,第一次測試跟Post Test差不多,兩秒後得到結果(此時留意一下結果中的時間 Time: HH:mm:ss.fff),但第二次按鈕的結果很有趣,按下後不需等待兩秒,結果就立即彈出,而其中顯示的時間還跟第一次傳回的值完全相同。這證明了$.get()預設會啟用Cache功能,同樣的Request第二次不會真的送出,而是直接由Cache取回結果。
接著,我們將$.ajaxSetup()前方的//封印解除,再測試一次。這回不管按Get Test幾次,每次都要等兩秒才會得到結果,表示結果不是來自Cache,而是真的送至後端執行。由傳回結果,我們可以發現QueryString中被加了料:
Time: 12:38:59.985
Method: GET
QueryString: ?_=1243921137980&m=t
PostData:
當我們設定cache=false時,jQuery在我們每次發出Request時,會補上一個參數"_",而其內容是每次皆不同的亂數,這是Javascript端很常見的迴避Cache技巧。由於參數值不相同,每次Request都被視為不同,就能避開Cache裡的舊資料,強迫每次都將Request送至Server端執行。
呼叫$.ajax()時可以指定cache參數,在$.get()時則無從設起,因此範例中用$.ajaxSetup()設定全域適用的cache選項。
Comments
# by DD04
謝謝黑暗大大提供的例子解說,也比較瞭解 $.ajaxSetup({ cache: false }); 的用意是做什麼的!! 所以使用 JQuery 在做 Ajax 的時候,透過「$.ajax()」或「$.post()」這兩個方式來做,是會比較安全且保險的囉!!?
# by coac
一直不明白后面_参数是怎么回事,今天终于明白了
# by 罗洁琼
学习,不过还是有点模糊
# by Henry
多謝分享~