如何缓存一个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请求和解析

回答

相关问题