Use jQuery para reemplazar XMLHttpRequest

Question

Soy bastante nuevo en las bibliotecas de JavaScript. Quería reemplazar mi código actual con jQuery. Mi código actual es el siguiente:

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 cambiar mi código con algo un poco más amigable como la de jQuery

$.get(url, callback); 

Sin embargo, no llamar 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 manera de hacer eso?

Answer 1

no creo jQuery implementa una función de tiempo de espera, pero el viejo y simple javascript lo hace bastante bien :)

Answer 2

Según the docs, los argumentos de jQuery.get son url, data, callback, no 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

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

deberían hacer el truco. A su función podría simplificarse así:

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

Answer 4

Sacar la readyState y comprobaciones de estado

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

incluso más cortos

O . 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 usar data en lugar de req.responseText.

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

Así, 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 5

No hay necesidad de ajustar los parámetros GET en la URL, jQuery fijará automáticamente. Pruebe 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 6

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é.