Verwenden Sie jQuery, um XMLHttpRequest zu ersetzen

Question

Ich bin ziemlich neu in JavaScript-Bibliotheken. Ich wollte meinen aktuellen Code durch jQuery ersetzen. Meine aktuellen Code sieht wie folgt aus:

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

Ich wollte meinen Code mit etwas ein wenig freundlicher wie jQuery

$.get(url, callback); 

ersetzen aber es ist nicht meine Callback-Funktion nicht aufruft.

Auch ich möchte eine Funktion createRequest kontinuierlich aufrufen. Hat jQuery eine gute Möglichkeit das zu tun?

Answer 1

Ich glaube nicht, jQuery eine Timeout-Funktion implementiert, aber das gute alte Javascript tut es ziemlich gut :)

Answer 2

Nach the docs, jQuery.get Argumente sind url, data, callback, nicht url, callback.

Ein Aufruf der JavaScript-Funktion setTimeout am Ende der Callback-Funktion sollte ausreichen, um dies kontinuierlich auszuführen.

Answer 3

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

sollte den Trick tun. Ihr Rückruf könnte wie folgt vereinfacht werden:

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

Oder noch kürzer:

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

Und alles in allem denke ich, das sollte funktionieren:

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

die Readystate und Statusüberprüfungen herausnehmen . jQuery ruft Ihren Callback nur bei Erfolg auf. Ihr Callback wird mit den Argumenten (data, textStatus) versorgt. Verwenden Sie daher data statt req.responseText.

window.setTimeout() wie von einer anderen Antwort vorgeschlagen wird nicht tun, was Sie wollen - das nur wartet und ruft dann Ihre Funktion einmal. Sie müssen stattdessen window.setInterval() verwenden, wodurch Ihre Funktion regelmäßig aufgerufen wird, bis Sie sie abbrechen.

So in der Zusammenfassung:

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

Es gibt keine Notwendigkeit, die GET-Parameter auf der URL zu setzen, jQuery wird sie automatisch eingestellt. Versuchen Sie diesen Code:

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

Am Ende ich denke, es wurde der Typ hinzugefügt. Das scheint für mich zu funktionieren.

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

Danke Jeder für die Hilfe. Ich werde dich stimmen.