borrar - Detener jQuery. La respuesta de carga de la caché

borrar cache ajax jquery

Question

Tengo el siguiente código para hacer una solicitud GET en una URL:

$(''#searchButton'').click(function() {
    $(''#inquiry'').load(''/portal/?f=searchBilling&pid='' + $(''#query'').val());            
});

Pero el resultado devuelto no siempre se refleja. Por ejemplo, hice un cambio en la respuesta que escupió una traza de pila pero la traza de pila no apareció cuando hice clic en el botón de búsqueda. Miré el código PHP subyacente que controla la respuesta ajax y tenía el código correcto y al visitar la página directamente se mostraba el resultado correcto, pero la salida devuelta por .load era antigua.

Si cierro el navegador y lo vuelvo a abrir, funciona una vez y luego comienza a devolver la información obsoleta. ¿Puedo controlar esto con jQuery o necesito tener los encabezados de salida de mi script PHP para controlar el almacenamiento en caché?

Answer 1

Aquí hay un ejemplo de cómo controlar el almacenamiento en caché por solicitud.

$.ajax({
    url: "/YourController",
    cache: false,
    dataType: "html",
    success: function(data) {
        $("#content").html(data);
    }
});

Answer 2

Debe usar una función más compleja como $.ajax() si desea controlar el almacenamiento en caché por solicitud. O, si solo quieres apagarlo para todo, pon esto en la parte superior de tu script:

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

Answer 3

Este código puede ayudarte

var sr = $("#Search Result");
sr.load("AJAX-Search.aspx?q=" + $("#q")
.val() + "&rnd=" + String((new Date).getTime())
.replace(//D/gi, ""));

Answer 4

Esto es de particular molestia en IE. Básicamente, tiene que enviar los encabezados HTTP ''no-cache'' nuevamente con su respuesta del servidor.

Answer 5

NO use la marca de tiempo para crear una URL única, ya que para cada página que visita se almacena en caché en DOM por jquery mobile y pronto tendrá problemas para quedarse sin memoria en los móviles.

$jqm(document).bind(''pagebeforeload'', function(event, data) {
    var url = data.url;
    var savePageInDOM = true;

    if (url.toLowerCase().indexOf("vacancies") >= 0) {
        savePageInDOM = false;
    }

    $jqm.mobile.cache =  savePageInDOM;
})

Este código se activa antes de que se cargue la página, puede usar url.indexOf () para determinar si la URL es la que desea almacenar en caché o no y configurar el parámetro de caché en consecuencia.

No utilice window.location = ""; para cambiar la URL, de lo contrario, navegará a la dirección y la página anterior no se activará. Para solucionar este problema, simplemente use window.location.hash = "";

Answer 6

Noté que si algunos servidores (como Apache2) no están configurados para permitir o denegar específicamente cualquier "almacenamiento en caché", entonces el servidor puede enviar por defecto una respuesta "almacenada en caché", incluso si configura los encabezados HTTP en "no-caché". Así que asegúrese de que su servidor no esté "guardando en caché" nada antes de enviar una respuesta:

En el caso de Apache2 tienes que

1) edite el archivo "disk_cache.conf": para deshabilitar el caché agregue la directiva "CacheDisable / local_files"

2) cargar módulos mod_cache (en Ubuntu "sudo a2enmod cache" y "sudo a2enmod disk_cache")

3) reinicie Apache2 (Ubuntu "sudo service apache2 restart");

Esto debería hacer el truco de desactivar el caché en el lado de los servidores. ¡Aclamaciones! :)

Answer 7

Otro enfoque para colocar la línea de abajo solo cuando necesite obtener datos del servidor, agregue la línea de abajo junto con su url de ajax.

''? _ ='' + Math.round (Math.random () * 10000)

Answer 8

Para PHP, agregue esta línea a su script que sirva la información que desea:

header("cache-control: no-cache");

o, agregue una variable única a la cadena de consulta:

"/portal/?f=searchBilling&x=" + (new Date()).getTime()

Answer 9

Prueba esto:

$("#Search_Result").load("AJAX-Search.aspx?q=" + $("#q").val() + "&rnd=" + String((new Date()).getTime()).replace(//D/gi, ''''));

Funciona bien cuando lo usé.

Answer 10

Puede reemplazar la función de carga jquery con una versión que tiene el caché establecido en falso.

(function($) {
  var _load = jQuery.fn.load;
  $.fn.load = function(url, params, callback) {
  if ( typeof url !== "string" && _load ) {
        return _load.apply( this, arguments );
  }
    var selector, type, response,
      self = this,
      off = url.indexOf(" ");

    if (off > -1) {
      selector = stripAndCollapse(url.slice(off));
      url = url.slice(0, off);
    }

    // If it''s a function
    if (jQuery.isFunction(params)) {

      // We assume that it''s the callback
      callback = params;
      params = undefined;

      // Otherwise, build a param string
    } else if (params && typeof params === "object") {
      type = "POST";
    }

    // If we have elements to modify, make the request
    if (self.length > 0) {
      jQuery.ajax({
        url: url,

        // If "type" variable is undefined, then "GET" method will be used.
        // Make value of this field explicit since
        // user can override it through ajaxSetup method
        type: type || "GET",
        dataType: "html",
        cache: false,
        data: params
      }).done(function(responseText) {

        // Save response for use in complete callback
        response = arguments;

        self.html(selector ?

          // If a selector was specified, locate the right elements in a dummy div
          // Exclude scripts to avoid IE ''Permission Denied'' errors
          jQuery("<div>").append(jQuery.parseHTML(responseText)).find(selector) :

          // Otherwise use the full result
          responseText);

        // If the request succeeds, this function gets "data", "status", "jqXHR"
        // but they are ignored because response was set above.
        // If it fails, this function gets "jqXHR", "status", "error"
      }).always(callback && function(jqXHR, status) {
        self.each(function() {
          callback.apply(this, response || [jqXHR.responseText, status, jqXHR]);
        });
      });
    }

    return this;
  }
})(jQuery);

Coloca esto en un lugar global donde se ejecute después de las cargas de jquery y deberías estar listo. Su código de carga existente ya no se almacenará en caché.

Answer 11

Sasha es buena idea, yo uso una mezcla.

Creo una función

LoadWithoutCache: function (url, source) {
    $.ajax({
        url: url,
        cache: false,
        dataType: "html",
        success: function (data) {
            $("#" + source).html(data);
            return false;
        }
    });
}

E invocar para diferentes partes de mi página, por ejemplo, en init:

Init: función (actionUrl1, actionUrl2, actionUrl3) {

var ExampleJS = {

Init: function (actionUrl1, actionUrl2, actionUrl3)           ExampleJS.LoadWithoutCache(actionUrl1, "div1");

ExampleJS.LoadWithoutCache (actionUrl2, "div2"); ExampleJS.LoadWithoutCache (actionUrl3, "div3"); }},

Answer 12

Si desea mantener el método .load () de Jquery, agregue algo único a la URL como una marca de tiempo de JavaScript. "+ nueva fecha (). getTime ()". Tenga en cuenta que tuve que agregar un "& time =" para que no altere su variable pid.

$(''#searchButton'').click(function() {
$(''#inquiry'').load(''/portal/?f=searchBilling&pid='' + $(''#query'').val()+''&time=''+new Date().getTime());            
});

Answer 13

Una forma es agregar un número único al final de la url:

$(''#inquiry'').load(''/portal/?f=searchBilling&pid='' + $(''#query'').val()+''&uid=''+uniqueId());

Donde escribes uniqueId () para devolver algo diferente cada vez que se llama.

Answer 14

/**
 * Use this function as jQuery "load" to disable request caching in IE
 * Example: $(''selector'').loadWithoutCache(''url'', function(){ //success function callback... });
 **/
$.fn.loadWithoutCache = function (){
 var elem = $(this);
 var func = arguments[1];
 $.ajax({
     url: arguments[0],
     cache: false,
     dataType: "html",
     success: function(data, textStatus, XMLHttpRequest) {
   elem.html(data);
   if(func != undefined){
    func(data, textStatus, XMLHttpRequest);
   }
     }
 });
 return elem;
}