how to cancel http request using javascript

Question

i have a page on which there an event handler attached to an onclick event. when the event fires it passes contents of a textbox to a GET request. since the url is not in the same domain so i create a script tag and and attach the url to its source like this

elem.onclick=fire;

function fire()
{
var text=document.getElementById('text').value;
var script=document.createElement("script");
script.className="temp";
script.src="some url"+"?param="+text;
document.body.appendChild(script);
}

now if that event is fired and more than one time i want to cancel all the previous GET request(because they still might be receiving response) and make the GET request with latest text. But for this i need to cancel the previous requests. i tried

document.body.removeChild(script);
script.src=null;

but this does not work in Firefox(i am using Firefox 5) although this works in Google Chrome.Does anyone know if these requests can be cancelled in Firefox and if yes then how?

UPDATE As suggested by Alfred, i used window.stop to cancel a request but does not cancel a request but hangs it up. It means that when i look into firebug it looks like the request is being made but there is no response.

Would you consider using a library like [jQuery](http://jquery.com)? — Matt Ball, Jul 28 '11 at 21:02
@Matt Ball i certainly would. but can u also suggest plain javascript bcoz i want to understand how its done? — lovesh, Jul 28 '11 at 21:08
I did a search on stackoveflow.com and found the [following answer][1] [1]: http://stackoverflow.com/questions/117551/javascript-cancel-all-kinds-of-requests/117628#117628 — Alfred, Aug 01 '11 at 07:28
@Alfred hey thanks a lot but u knw when i checked in firefug's net panel the request seems to have hung up and not cancelled actually and i cannot make any other requests too — lovesh, Aug 01 '11 at 07:42
@lovesh okay :). P.S: JQuery can also stop requests(I believe even/also JSON-p / script tags). Maybe you should inspect JQuery source-code to see how they do this => http://pastebin.com/VSKPDCbh — Alfred, Aug 01 '11 at 08:51

duri · Answer 1 · 2011-08-01T08:57:14.010

4

The solution is simple: for creating HTTP requests, use <img> instead of <script> element. Also you always have to change the src attribute of the same element.

var img;
function fire()
{
    var text = document.getElementById('text').value;
    var im = img || (img = new Image());
    im.src = "url"+"?param="+text;
}

You may ascertain that it actually works by doing the following: the URL you request should have a huge response time (you can ensure this using e.g. PHP's sleep function). Then, open Net tab in Firebug. If you click the button multiple times, you'll see that all incomplete requests are aborted.

edited Aug 01 '11 at 08:57

answered Aug 01 '11 at 08:49

duri

14,991
3
44
49

and how do i cancel the request? – lovesh Aug 01 '11 at 08:59
@lovesh The incomplete requests are automatically canceled if you create another request. If you would like to cancel requests and not to create another one, you can do this by setting `img.src = '';`. – duri Aug 01 '11 at 09:06

score 2 · Answer 2 · answered Jul 29 '11 at 14:32

2

This is entirely shooting from the hip, but if the script tag has not finished loading you can probably simply script.parentElement.removeChild( script ). That is more or less what mootools does anyway. (Technically, they replace /\s+/ with ' ' first, but that does not seem to be terribly important).

answered Jul 29 '11 at 14:32

cwallenpoole

79,954
26
128
166

this means that the HTTP request is not cancelled? – lovesh Jul 29 '11 at 15:05
1

It should be the equivalent of `XMLHttpRequest.abort();` but no guarantees, I've never actually done that before. – cwallenpoole Jul 29 '11 at 15:16

score 1 · Answer 3 · edited Jul 29 '11 at 19:58

1

I'm not sure if this is what you're looking for, but it seems like a similar issue: http://www.velocityreviews.com/forums/t506018-how-to-cancel-http-request-from-javascript.html

edited Jul 29 '11 at 19:58

Brad Larson

170,088
45
397
571

answered Jul 28 '11 at 21:02

dwmcc

1,034
8
19

i m doing this all client-side. couldnt find anything helpful in that – lovesh Jul 28 '11 at 21:07
Despite the title of the linked article, it is really about getting postback to an ASP.NET server to work, and is intimately involved with details specific to ASP.NET. – ToolmakerSteve Aug 07 '14 at 01:27

score 1 · Answer 4 · answered Jul 28 '11 at 21:05

1

Would it be ok for you to use a JS framework? If so, MooTools has this functionality built into its Request.JSONP object

answered Jul 28 '11 at 21:05

Ruy Diaz

3,084
24
36

i dont mind using a framework but i wud like to know how its done. can u explain or give a link that explains – lovesh Jul 28 '11 at 21:09
can u explain how its done? i saw the link and i know that this can be done in javascript +1 – lovesh Jul 28 '11 at 21:12
Looking through the source code for it, it appears to be just removing the script tag from the DOM and setting the script variable to null. Maybe this last step is what you're missing since perhaps the request doesn't get cancelled as long as there is a reference to it. Not sure about this, though. – Ruy Diaz Jul 28 '11 at 21:16
i tried it but doesnt work. i can see in firebug requests still being processed – lovesh Jul 28 '11 at 21:21

score 0 · Answer 5 · answered Aug 08 '11 at 09:04

To get around the cross-domain issue, you might be able to use CORS instead (assuming you can change what's on the server): http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/

If you do this, you could then use the more standard XMLHttpRequest's abort() function.

CORS is compatible with all the major modern browsers except Opera (http://caniuse.com/cors).

how to cancel http request using javascript

5 Answers5

Linked