Используйте jQuery для замены XMLHttpRequest

Question

Я новичок в библиотеках JavaScript. Я хотел заменить свой текущий код на jQuery. Мой текущий код выглядит так:

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

Я хотел заменить свой код на что-нибудь более дружелюбное, например, jQuery's

$.get(url, callback);

Однако он не вызывает мою функцию обратного вызова.

Также я хотел бы постоянно вызывать функцию с именем createRequest. У jQuery есть хороший способ сделать это?

Answer 1

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

должен сделать свое дело. Ваш обратный вызов может быть упрощен следующим образом:

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

Или даже короче:

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

И в целом, я думаю, это должно работать:

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

Answer 2

Уберите готовые состояния и проверки состояния. JQuery только вызывает ваш обратный вызов в случае успеха. Ваш обратный вызов содержит аргументы (data, textStatus), поэтому вы должны использовать data вместо req.responseText.

window.setTimeout(), как предполагает другой ответ, не будет делать то, что вы хотите - он только ждет и затем вызывает вашу функцию один раз. Вместо этого вам нужно использовать window.setInterval(), который будет периодически вызывать вашу функцию, пока вы не отмените ее.

Итак, в итоге:

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 3

Нет необходимости устанавливать параметры GET для URL, jQuery установит их автоматически. Попробуйте этот код:

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 4

Согласно документам , аргументами jQuery.get являются url, data, callback, а не url, callback.

Вызов функции JavaScript setTimeout в конце функции обратного вызова должен быть достаточным для ее непрерывного выполнения.

Answer 5

Я не думаю, что jQuery реализует функцию тайм-аута, но простой старый javascript делает это довольно хорошо:)

Answer 6

В конце концов, я думаю, что был добавлен тип. Кажется, это работает для меня.

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

Спасибо всем за помощь. Я проголосую за тебя.