Evite que la respuesta de jQuery .load se almacene en caché

Tengo el siguiente código haciendo 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ó un seguimiento de la pila, pero el seguimiento de la 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 mostró el resultado correcto, pero el resultado devuelto por .load era antiguo.

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

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

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

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);
    }
});

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

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

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

Otro enfoque para colocar la línea a continuación solo cuando sea necesario obtener datos del servidor, anexe la línea a continuación junto con su url ajax.

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

/**
 * 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;
}

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: function (actionUrl1, actionUrl2, actionUrl3) {

var ExampleJS = {

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

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

Esto es de particular molestia en IE. Básicamente, debe devolver los encabezados HTTP 'sin caché' con su respuesta del servidor.

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

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

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

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

NO use la marca de tiempo para crear una URL única, ya que 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 cargar la página, puede usar url.indexOf () para determinar si la URL es la que desea almacenar en caché o no y establecer el parámetro de caché en consecuencia.

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

Si desea seguir con 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());            
});

Puede reemplazar la función de carga jquery con una versión que tenga caché establecida 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);

Coloque esto en un lugar global donde se ejecutará después de que jquery se cargue y debería estar listo. Su código de carga existente ya no se almacenará en caché.

Prueba esto:

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

Funciona bien cuando lo usé.

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 de forma predeterminada una respuesta "en caché", incluso si configura los encabezados HTTP en "sin caché". Así que asegúrese de que su servidor no esté "almacenando 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 deshabilitar el caché en el lado de los servidores. ¡Salud! :)

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, ""));