This Question have 3 answers right now.

Use jQuery to replace my XMLHttpRequest

By : Travis
Source: Stackoverflow.com
Question!

I am kind of new to JavaScript library's. I wanted to replace my current code with a JS lib jQuery. My current code looks like this.

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

I wanted to replace my code with something a little friendlier like jQuery's

jQuery.get(url, callback);

However I it doesn't call my callback function.

Also I would like to call this function createRequest to be called continuously. Does jQuery have a nice way of doing that?

By : Travis


Answers

In the end I guess it was added the type. This seems to work for me.

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

Thanks Everyone for the help. I'll vote you up.



Take out the readyState and status checks. jQuery only calls your callback upon success. Your callback is supplied the arguments (data, textStatus), so you should use data instead of req.responseText.

window.setTimeout() as suggested by another answer won't do what you want - that only waits and then calls your function once. You need to use window.setInterval() instead, which will call your function periodically until you cancel it.

So, in summary:

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);
By : Jim


There's no need to set the GET parameters on the URL, jQuery will set them automatically. Try this 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;
});


Video about Use jQuery to replace my XMLHttpRequest