Use jQuery to replace XMLHttpRequest

Question

I am quite new to JavaScript libraries. I wanted to replace my current code with 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

$.get(url, callback);

However it doesn't call my callback function.

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

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

19

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

answered Sep 19, 2008 at 18:39

Lasar

5,5274 gold badges27 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

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

3

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

edited Sep 19, 2008 at 19:07

answered Sep 19, 2008 at 18:42

Jim

74.1k15 gold badges105 silver badges114 bronze badges

Comments

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

2

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

answered Sep 19, 2008 at 18:30

Wes P

9,87014 gold badges44 silver badges48 bronze badges

Comments

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

2

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, 2008 at 18:31

ceejayoz

181k42 gold badges311 silver badges382 bronze badges

5 Comments

ceejayoz Over a year ago

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.

Blair Conrad Over a year ago

"data" is key/value pairs that will be sent the server. Also, the examples at docs.jquery.com/Ajax/jQuery.get show calls that omit the data parameter.

Bernie Perez Over a year ago

hmm... I tried url = "/My_Servlet/response"; jQuery.get(url, "key=" + escape(key.value), callback); still wont call the callback function.

John Millikin Over a year ago

If callback is undefined and data is a function, jQuery will swap the parameters automatically.

Jim Over a year ago

setTimeout() calls a function once. setInterval() is the correct function to use when you want something called again and again.

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

2

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

answered Sep 19, 2008 at 18:46

John Millikin

202k41 gold badges216 silver badges228 bronze badges

Comments

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

0

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.

answered Sep 19, 2008 at 21:07

Bernie Perez

12.6k13 gold badges50 silver badges55 bronze badges

Collectives™ on Stack Overflow

Use jQuery to replace XMLHttpRequest

6 Answers 6

Comments

Comments

Comments

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related