Use jQuery to replace my XMLHttpRequest

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?

Lasar · Answer 1 · 2008-09-19 18:39:39Z

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

should do the trick. Your callback could be simplified like this:

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

Or even shorter:

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

And all in all I think this should work:

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

Jim · Answer 2 · 2008-09-19 19:07:24Z

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 ofreq.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);

Wes P · Answer 3 · 2008-09-19 18:30:21Z

I don't think jQuery implements a timeout function, but plain old javascript does it rather nicely :)

ceejayoz · Answer 4 · 2008-09-19 18:31:06Z

up vote2down vote

According to the docs, jQuery.get's arguments are url, data, callback, not url, callback.

A call to JavaScript's setTimeout function at the end of your callback function should suffice to get this to continually execute.

answered Sep 19 '08 at 18:31

ceejayoz
78.3k17117174

what goes in data? – Bernie Perez Sep 19 '08 at 18:32

Whatever you like. Use NULL if you don't need any passed along, or you could potentially move key=? from the query string into the data arguments. See the docs for example code. – ceejayoz Sep 19 '08 at 18:33

"data" is key/value pairs that will be sent the server. Also, the examples at docs.jquery.com/Ajax/jQuery.getshow calls that omit the data parameter. – Blair Conrad Sep 19 '08 at 18:34

hmm... I tried url = "/My_Servlet/response"; jQuery.get(url, "key=" + escape(key.value), callback); still wont call the callback function. – Bernie Perez Sep 19 '08 at 18:38

and I tried null for data as well. =( – Bernie Perez Sep 19 '08 at 18:39

show 3 more comments

John Millikin · Answer 5 · 2008-09-19 18:46:17Z

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

Bernie Perez · Answer 6 · 2008-09-19 21:07:42Z

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.

Kumar's Blog

Friday, December 13, 2013

Use jQuery to replace my XMLHttpRequest

7 Answers

No comments: