使用 jQuery 替换 XMLHttpRequest

Posted 2023-05-08

【中文标题】使用 jQuery 替换 XMLHttpRequest

【英文标题】：Use jQuery to replace XMLHttpRequest

【发布时间】：2010-09-11 09:14:15

【问题描述】：

我对 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 之类更友好的代码替换我的代码

$.get(url, callback);

但是它没有调用我的回调函数。

我还想连续调用一个名为createRequest 的函数。 jQuery 有一个很好的方法吗？

【参考方案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);
    );

【参考方案2】：

取出 readyState 和 status 检查。 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);

【参考方案3】：

我不认为 jQuery 实现了超时功能，但是普通的旧 javascript 做得很好:)

【参考方案4】：

根据the docs，jQuery.get 的参数是url, data, callback，而不是url, callback。

在回调函数结束时调用 JavaScript 的 setTimeout 函数应该足以让它持续执行。

【讨论】：

随你喜欢。如果您不需要任何传递，请使用 NULL，否则您可能会移动 key=?从查询字符串到数据参数。有关示例代码，请参阅文档。

"data" 是将发送到服务器的键/值对。此外，docs.jquery.com/Ajax/jQuery.get 的示例显示了省略数据参数的调用。

嗯...我试过 url = "/My_Servlet/response"; jQuery.get(url, "key=" + escape(key.value), 回调);仍然不会调用回调函数。

如果callback是未定义的并且data是一个函数，jQuery会自动交换参数。

setTimeout() 调用一次函数。当您想要一次又一次地调用某些东西时，setInterval() 是正确的函数。

【参考方案5】：

不需要在 URL 上设置 GET 参数，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;
);

【参考方案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();
  

感谢大家的帮助。我会投票给你。