javascript - example - Use jQuery para reemplazar XMLHttpRequest

xmlhttprequest javascript example

Question

Soy bastante nuevo en las bibliotecas de JavaScript. Quería reemplazar mi código actual con jQuery. Mi código actual se ve así:

var req;

function createRequest() {
   var key = document.getElementById("key");
   var keypressed = document.getElementById("keypressed");
   keypressed.value = key.value;
   var url = "/My_Servlet/response?key=" + escape(key.value);
   if (window.XMLHttpRequest) {
      req = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
      req = new ActiveXObject("Microsoft.XMLHTTP");
   }
   req.open("Get", url, true);
   req.onreadystatechange = callback;
   req.send(null);
}

function callback() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var decimal = document.getElementById(''decimal'');
         decimal.value = req.responseText;
      }
   }
   clear();
}

Quería reemplazar mi código por algo un poco más amigable como jQuery''s

$.get(url, callback);

Sin embargo, no llama a mi función de devolución de llamada.

También me gustaría llamar continuamente a una función llamada createRequest . ¿JQuery tiene una buena forma de hacer eso?

Answer 1

Al final, creo que se agregó el tipo. Esto parece funcionar para mí.

  function convertToDecimal(){ 
    var key = document.getElementById("key"); 
    var keypressed = document.getElementById("keypressed"); 
    keypressed.value = key.value; 
    var url = "/My_Servlet/response?key="+ escape(key.value);
    jQuery.get(url, {}, function(data){
       callback(data);}
       , "text" );
  }

  function callback(data){
    var decimal = document.getElementById(''decimal'');
    decimal.value = data;
    clear();
  }

Gracias a todos por la ayuda. Te votaré.

Answer 2

De acuerdo con los documentos , los argumentos de jQuery.get son url, data, callback , not url, callback .

Una llamada a la función setTimeout de JavaScript al final de su función de devolución de llamada debería ser suficiente para que esto se ejecute continuamente.

Answer 3

No creo que jQuery implemente una función de tiempo de espera, pero el antiguo javascript lo hace bastante bien :)

Answer 4

No es necesario establecer los parámetros GET en la URL, jQuery los configurará automáticamente. Prueba este código:

var key = document.getElementById("key");
[...]
var url = "/My_Servlet/response";
$.get (url, {''key'': key}, function (responseText)
{
    var decimal = document.getElementById (''decimal''); 
    decimal.value = responseText;
});

Answer 5

Saque las comprobaciones de estado preparado y de estado. jQuery solo llama su devolución de llamada cuando tiene éxito. Su devolución de llamada se suministra con los argumentos (data, textStatus) , por lo que debe utilizar los data lugar de req.responseText .

window.setTimeout() según lo sugerido por otra respuesta no hará lo que usted desea: solo espera y luego llama a su función una vez. Necesita usar window.setInterval() lugar, que llamará a su función periódicamente hasta que la cancele.

Entonces, en resumen:

var interval = 500; /* Milliseconds between requests. */
window.setInterval(function() {
    var val = $("#key").val();
    $("#keypressed").val(val);
    $.get("/My_Servlet/response", { "key": val }, function(data, textStatus) {
        $("#decimal").val(data);
    });
}), interval);

Answer 6

$.get(url, {}, callback);

debería hacer el truco. Su devolución de llamada podría simplificarse así:

function callback(content){
    $(''#decimal'').val(content);
}

O incluso más corto:

$.get(url, {}, function(content){
    $(''#decimal'').val(content);
});

Y, en general, creo que esto debería funcionar:

function createRequest() {
    var keyValue = $(''#key'').val();
    $(''#keypressed'').val(keyValue);
    var url = "/My_Servlet/response";
    $.get(url, {key: keyValue}, function(content){
        $(''#decimal'').val(content);
    });
}