Using JavaScript to perform a GET request without AJAX

Question

Out of curiosity, I'm wondering about the best (easiest, fastest, shortest, etc; make your pick) way to perform a GET request in JavaScript without using AJAX or any external libraries.

It must work cross-browser and it's not allowed to distort the hosting web page visually or affect it's functionality in any way.

I don't care about headers in the request, just the url-part. I also don't care about the result of the request. I just want the server to do something as a side effect when it receives this request, so firing it is all that matters. If your solution requires the servers to return something in particular, that's ok as well.

I'll post my own suggestion as a possible answer, but I would love it if someone could find a better way!

Do you need to work with the return value, or is making the request enough? — Pekka
– Pekka, Commented Dec 20, 2010 at 13:40
This is a really wierd thing to do. Why wouldn't you just make a request via AJAX? — annakata
– annakata, Commented Dec 20, 2010 at 13:43
One could create an iframe dynamically, and load the resource in there. If it's on the same domain, you can even access the return data — Pekka
– Pekka, Commented Dec 20, 2010 at 13:45
@annakata: this piece of code is required in an environment where I can't use external libraries and cross-browser AJAX in that case is a little messy. An easier solution should be possible (especially since I don't need something returned from the request) — Jakob
– Jakob, Commented Dec 20, 2010 at 13:47
@Jakob - Messier than a clunky create/remove script element which achieves what you want almost as a side effect? A fire-and-forget AJAX GET is the correct solution because it does exactly what you want and no more. — annakata
– annakata, Commented Dec 20, 2010 at 14:15

Ian Oxley · Accepted Answer · 2010-12-20 13:42:49Z

8

Have you tried using an Image object? Something like:

var req = new Image();
req.onload = function() {
    // Probably not required if you're only interested in
    // making the request and don't need a callback function
}
req.src = 'http://example.com/foo/bar';

answered Dec 20, 2010 at 13:42

Ian Oxley

11.1k6 gold badges45 silver badges49 bronze badges

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

4 Comments

Jakob Over a year ago

Ah, I don't have to actually include the image on the page? Clever.

user447356 Over a year ago

unless the response is valid image, I don't think onload will be executed, just onerror. :)

annakata Over a year ago

Image could always be a transparent px or hidden or positioned -1000px offscreen...

Ian Oxley Over a year ago

I've done something similar before and did what @annakata suggests and just returned a 1px x 1px transparent image after the server had finished processing the request.

Jakob · Accepted Answer · 2010-12-20 13:40:44Z

1

function GET(url) {
  var head = document.getElementsByTagName('head')[0];
  var n = document.createElement('script');
  n.src = url;
  n.type = 'text/javascript';
  n.onload = function() { // this is not really mandatory, but removes the tag when finished.
    head.removeChild(n);
  };
  head.appendChild(n);
}

answered Dec 20, 2010 at 13:40

Jakob

24.5k9 gold badges48 silver badges58 bronze badges

2 Comments

Quentin Over a year ago

You probably want to hit it onerror too. It might not be a script.

John Leidegren Over a year ago

The n.type = 'text/javascript'; surprisingly so, is unnecessary. The fun part is that the request is optimistically made here n.src = url; (yes, the assignment triggers the request) but the result is obviously not available until you add it to the document. FYI the Google Maps JavaScript API loads like this. On a related note, Comet applications can be implemented like this by streaming a continuous javascript for partial evaluation to enable push notifications at very low response times.

user447356 · Accepted Answer · 2010-12-20 13:56:28Z

1

I would go with Pekka idea and use hidden iframe, the advantage is that no further parsing will be done: for image, the browser will try to parse the result as image, for dynamically creating script tag the browser will try to parse the results as JavaScript code.. iframe is "hit and run", the browser doesn't care what's in there.

Changing your own solution a bit:

function GET(url) {
    var oFrame = document.getElementById("MyAjaxFrame");
    if (!oFrame) {
        oFrame = document.createElement("iframe");
        oFrame.style.display = "none";
        oFrame.id = "MyAjaxFrame";
        document.body.appendChild(oFrame);
    }
    oFrame.src = url;
}

answered Dec 20, 2010 at 13:56

user447356

Collectives™ on Stack Overflow

Using JavaScript to perform a GET request without AJAX

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related