【问题标题】:How to cache the JS files from innerHTML of/from Ajax()?如何缓存来自/来自 Ajax() 的 innerHTML 的 JS 文件?
【发布时间】:2013-10-31 03:30:13
【问题描述】:

有没有可能将PHP脚本回显的JS文件缓存到DIV等元素的innerHTML或$('#id').html(data)?脚本源(js文件)输出到类似元素后会自动保存到访问者缓存吗??

在查看页面源码中可以看到的脚本源属性(js文件/外部)可以保存到访问者缓存中。 但是由于需要 AJAX 响应而无法在页面源中看到的脚本源,例如,它不会保存到访问者的缓存中。 (请稍后查看我的代码/脚本)。

我多次尝试过多种方式,改变JS文件内容,改变alert()里面的值,我基于alert(),然后刷新页面看看alert消息会出来什么,随便我输入了alert(),它在页面中显示了准确的值,就像没有缓存保存一样..

我使用的是谷歌Chrome浏览器,我找到了一个ChromeCacheViewer,我看到http://my_host.com/SendCoins.js?_=13digits_here有不同的数字。每当我点击同一个<a onclick="FUNCTION(showpage)">时,缓存历史记录中的另一个缓存文件将是添加http://my_host.com/SendCoins.js?_=another13digits)..从缓存列表中,文件名是13位数字。 查看图片:http://goo.gl/NEpvR9

缓存是一种用于临时存储(缓存)文档或数据的机制,以减少访问时间。

有没有可能?如果有,怎么做?

对不起,我无法清楚地解释清楚或无法理解,但我可以提供我正在解释的示例。

例如 AJAX:(page.js)

 function GoToPage(Page_Post)
  var form_data = {
   Page: Page_Post
  };
  $.ajax({
   type: "POST",
   url: "PAGE.php",
   data: form_data,
   success: function(data)
   {
    $('#PAGE').html(data); // innerHTML
   }
  });
 }

AJAX: (sendcoins.js)

$(document).ready(function() {
 $("form#sendcoins").submit(function() {
  alert("Change this whenever you/visitor have used the GoToPage() and submitted the form"); //We will base on alert if it is really save to cache.
  var form_data = {
   Coins: $('#Coins').val()
  };
  $.ajax({
   type: "POST",
   url: "SendCoins.php",
   data: form_data,
   success: function(data)
   {
    $('#message').html(data); // innerHTML
   }
  });
 });
});

HTML:

<a onclick="GoToPage('SendCoins')">Send Coins</a>
<div id=PAGE></div>

PHP:

<?php
$Page = $_POST[Page];
if( $Page == 'SendCoins' ){
 ......blah.....
 echo '<script type="text/javascript" src="js/SendCoins.js"></script>';
 echo '<img src="images/coin.png">';
 echo '<form id="sendcoins" onsubmit="return false" >
  <input type=number id=Coins> <input> submit .. blah.. blah..
 </form>';
}
?>

所以,源文件被echo到innerHTML后,会被保存到访问者的缓存中。

【问题讨论】:

    标签: javascript ajax caching


    【解决方案1】:

    您可以在 ajax 调用中使用缓存参数。默认情况下,缓存属性设置为 false,这就是您在请求中看到这些数字的原因。

    例如:

    $.ajax({
        type: "POST",
        url: "SendCoins.php",
        data: form_data,
        cache: true, 
        success: function(data)
        {
            $('#message').html(data); // innerHTML
        }
    });
    

    有关缓存属性的更多信息,您可以查看here

    【讨论】:

    • 你看过这张图片吗?? goo.gl/NEpvR9这就是我的意思,一个已经保存到访问者缓存中的缓存文件示例。
    • 在每个请求的url后面加上不同的数字,使得每个请求都不一样,从而避免了浏览器的缓存。如果设置cache:true,则不会添加数字
    • 好的,我会尝试这样做。谢谢
    • 还是一样的@codingstill,即使我添加了cache:true。看这张图片:goo.gl/Znh8wq 我已经在 PAGE2.js 和 acc_bounty.js 中添加了 cache:true 但仍然相同,acc_bounty 在 URL 的末尾有一个随机的 13 位数字,可以在缓存历史记录/ChromeCacheViewer 中看到. acc_bounty.JS 只能在 PAGE2.js 的 ajax 响应时输出到页面。我将 PAGE2.js 用于 标记,例如 ,因此每当我单击它调用该函数时,都会保存另一个 acc_bounty.js 缓存。顺便说一下,我没有在脚本源网址末尾添加任何数字
    • 您的代码显示 .php 文件的 ajax 调用。在您的屏幕截图中,您向我展示了 .js 文件的问题。你如何加载你的 .js 文件?
    猜你喜欢
    • 2020-04-27
    • 2020-01-04
    • 1970-01-01
    • 2010-09-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多