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