Ajax не кеширует запросы - PullRequest
Новая
       16

Ajax не кеширует запросы

0 голосов
/ 06 сентября 2018

Как я могу получить содержимое файла, используя JS, , позволяя файлу кэшироваться браузером ?

Один из возможных способов - сделать этот файл .js и присвоить ему значение var SuperVar = 'BASE64-ENCODED-CONTENT' (base64 для экранирования специальных символов), но доступ к реальному содержимому и его обслуживание станут действительно трудными. В конце концов я пытаюсь получить нормальные файлы.

Поскольку файлы имеют размер 1-100 КБ и неограниченное количество, то localStorage не вариант (не хватит места).

Попробовал с <iframe>. Браузеры разбирают файлы .html несколько хорошо. Файлы должны начинаться с <html>, иначе они будут заключены в тег <pre>. По другим типам файлов IE создает <object> и предлагает файл для загрузки.

Смысл в том, чтобы JS работал с одним и тем же содержимым файлов при нескольких загрузках страниц, не загружая их каждый раз.

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

Вы должны отправить заголовок управления кэшированием со своего сервера, чтобы браузер мог кэшировать ваш запрос ajax.

index.html 

<button id="btn">GET</button>
<script>
    btn.onclick = function() {
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
            console.log(xhr.response);
        };
        xhr.open('GET', 'cached.php');
        xhr.send();
    };
</script>

cached.php 

<?php
header('Cache-Control: private, must-revalidate, max-age=60');
echo file_get_contents("file.any");

file.any 

Contents
of
File...

Вы увидите код состояния 200, но если вы проверите столбец Размер в chrome developer-tools вы можете увидеть, загружен ли он из кеша.

chrome developer tools network panel

0 голосов
/ 10 сентября 2018

Вы можете просто использовать AJAX, который будет использовать кеш, если ваш сервер настроен правильно, и если вы делаете запросы GET. 

btn.onclick = function() {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    console.log(xhr.response.substr(0, 20));
  };
  xhr.open('GET', 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js');
  xhr.send();
};
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Open your dev-tools Network panel to see how it has been transferred.</p>
<button id="btn">request jQuery</button>
...