如何緩存一個jQuery的Ajax請求和解析

我正在構建一個應用程序，它是一個圖像庫，但有很多圖像（它用於瀏覽文檔的存檔）;基本應用程序執行此：如何緩存一個jQuery的Ajax請求和解析

顯示的圖像
顯示「前一個」和左「下一個」的鏈路，所述第一圖像

的前一個和下鏈路的權利從一個XML檢索文件，按順序列出所有圖像;每組中有大約1000-2000幅圖像（每組一個XML文件）。爲了避免必須查找前後的同胞元素，我將每個前後圖像的名稱都包含爲每個圖像的屬性。

所以XML文件基本上是：

<list> 
    ... 
    <image previous="ww.jpg" next="yy.jpg">xx.jpg</image> 
    <image previous="xx.jpg" next="zz.jpg">yy.jpg</image> 
    <image previous="yy.jpg" next="aa.jpg">zz.jpg</image> 
    ... 
    </list>

我在做什麼是這樣的：

function display(img) { 
    var lookingfor = 'image:contains('+img+')'; 
    $.ajax({ 
    type: "GET", 
    url: "pns.xml", 
    dataType: "xml", 
    success: function(xml) { 
     $(xml).find(lookingfor).each(function(){ 
     // display the actual image and the links from @previous and @next attributes 
     }); 
     } 
    }); 
    } 

$(document).ready(function(){ 
    var image = $.query.get('img'); 
    display(image); 
    });

第一次加載頁面時，腳本：

得到要從url參數'img'顯示圖像的名稱
加載t他的XML文件從同一文件中包含的所有圖像
的名字被前面和後面的圖像名稱
顯示圖像
顯示鏈接到一個和下一個圖像

到目前爲止好。我的問題是與其他圖像。

鏈接到一個或下一個圖像是：

display('image_id');

我希望無需重新加載頁面，只需再次調用「顯示」功能，我就不會再獲得XML文件，不必再解析它。但是，似乎並非如此：每次新的「顯示」函數調用後，XML文件都會重新加載。

首次加載頁面時出現明顯延遲是可以接受的;但每張圖片的延遲時間似乎都很慢，而且很不愉快。

我完全可以控制應用程序;如果有一個比XML文件更有效的解決方案來保存參數，那很好。但是，應用程序必須脫機工作，所以我無法查詢服務器以獲取前/後圖像的名稱。

此外，使用：contains（）選擇器可能不是最快的方法：什麼會更好？

編輯：使用XML並在外部加載它顯然遠非最佳;一個更好更簡單的方法是讓一個大對象包含每個圖像的一個數組並且只加載一次該對象（當腳本第一次加載時）。另一種方法是使用一些本地存儲/ SQL設施;我可以使用提供這些工具的Google Gears來嘗試。

來源

2009-12-08 Bambax

也許Ajax將圖像XML第一次轉換成全局JS變量，然後在隨後的調用中查詢JS變量。所以：

<script type="text/javascript"> 
    var imgXML = null; 

    // document ready 
    $(function() { 
    $.ajax({ 
     type: "GET", 
     url: "pns.xml", 
     dataType: "xml", 
     success: function(xml) { 
     imgXML = xml; 
     var image = $.query.get('img'); 
     display(image); 
     } 
    }); 
    }  

    // subsequent display goes straight to the XML data in memory 
    function display(img) { 
    if(imgXML != null) { 
     var lookingfor = 'image:contains('+img+')'; 
     $(imgXML).find(lookingfor).each(function(){ 
     // display image and links 
     } 
    } 
    } 
</script>

我相信還有其他優化，但這應該解決您重新加載XML問題。

來源

2009-12-08 01:38:12 patrickmcgraw

這確實奏效，謝謝。我在ajax調用中添加了'async：false'，這樣第一次調用就等待xml在做任何顯示內容之前做好準備;如果不是，則當第一次調用display（）時imgXML始終爲空（因爲xml未完成加載），因此不會顯示任何圖像和鏈接... – Bambax 2009-12-08 08:59:38

將cache設置爲true怎麼樣？

$.ajaxSetup({ 
    cache: true 
});

來源

2009-12-08 01:45:18

這是不是真的被defualt？ http://docs.jquery.com/Ajax/jQuery.ajax#options 我認爲問題在於他正在通過每個請求上的xml文件。 – TheVillageIdiot 2009-12-08 01:54:12

是的，這是默認情況下，它似乎沒有做任何事情。 – Bambax 2009-12-08 08:31:47

的一種方法是分別獲得第一圖像（圖像從取回功能）之前獲取XML文件，並在一個陣列讀取所有圖像名稱（雖然這將是一個大的陣列）。

//pseduo code 
<script type="text/javascript"> 
    var currentImage=-1; 
    var imageName=new Array(); 

    loadXML(){ 
     GETXML; 
     var i=0; 
     for(image in images_in_xml){ 
      imageName.push(image); 
      if(image == CURRENT_IMAGE_NAME) 
       currentImage = i; 
      i++; 
     }    
    } 
</script>

現在你有當前圖像的指數，你可以很容易地通過簡單地使用currentImage-1和currentImage+1

來源

2009-12-08 01:48:57 TheVillageIdiot

看起來你正在做的每一次完整的XML請求得到一個和上一個圖像的名字，這在許多情況下不是最好的主意。根據你的情況，你可能想要使用優化的數據庫，一個較小的/優化的動態XML解決方案或開始尋找專家...

從簡要說明你給，我會建議一個jQuery的插件 - 但當然你可能有一個不使用該選項的理由。

順便說一句，我注意到你寫道：「第一次加載頁面時的顯着延遲是可以接受的」，並試圖理解邏輯......第一次訪問者訪問您的網站是第一印象，每個人都知道第一印象最後（特別是在線，3秒鐘感覺像是一個永恆）'

來源

2009-12-08 01:51:26

根據我的理解（「用於在當前頁面上疊加圖像的lightbox插件」），我認爲它與我的問題沒有多大關係？ – Bambax 2009-12-08 08:33:48

關於延遲：「網站」是針對需要訪問文檔的專業人員的特殊離線應用程序;他們可以處理一個小的熱身延遲。但是，如果延遲對每一頁都重複出現，那當然是不一樣的。 – Bambax 2009-12-08 08:35:32

如何緩存一個jQuery的Ajax請求和解析

回答

相關問題