Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Aborting jQuery JSONP request will throw error

Tags:

jquery

jsonp

i am making simple autosuggestion (autocompleter) plugin with jQuery. Unfortunately i have to use jsonp. It is ok and it works, but when i am aborting request it will throw error.

Uncaught TypeError: Property 'jQuery171036404498340561986_1330693563756' of object [object Window] is not a function

There is code

if(xhr) {xhr.abort()};
xhr = $.ajax({
    url: "someurl/getmedata",
    type: 'get',
    dataType: 'jsonp',
    data: {q: "query"},
    success: function(results) {},
    error: function() {}
})

Classic way with json, xml or other request works fine.

Anny suggestion?

like image 311
Schovi Avatar asked Mar 02 '12 13:03

Schovi


People also ask

How does Jsonp request work?

It works by dynamically adding a <script> tag to the DOM and calling a predefined function with the remote web service's JSON data as the parameter. The <script> tag is not subject to the same origin policy and therefore can request content cross-domain.

What is Jsonp in Ajax?

JSONP stands for JSON with Padding. Requesting a file from another domain can cause problems, due to cross-domain policy. Requesting an external script from another domain does not have this problem. JSONP uses this advantage, and request files using the script tag instead of the XMLHttpRequest object.

What is Jsonp dataType?

dataType: jsonp for cross-domain request, that means request to different domain and dataType: json for same domain-same origin request. Loads in a JSON block using JSONP. Adds an extra "? callback=?" to the end of your URL to specify the callback.

What is jqXHR in Ajax?

The jqXHR Object. The jQuery XMLHttpRequest (jqXHR) object returned by $.ajax() as of jQuery 1.5 is a superset of the browser's native XMLHttpRequest object. For example, it contains responseText and responseXML properties, as well as a getResponseHeader() method.


1 Answers

JSONP does not use XMLHTTPRequest but actually creates a <script> tag within the document to be able to make the cross-domain requests.

You simply cannot abort JSONP requests.

It is stated in the $.ajax() documentation:

Some types of Ajax requests, such as JSONP and cross-domain GET requests, do not use XHR; in those cases the XMLHttpRequest and textStatus parameters passed to the callback are undefined.

As for jQuery 1.5+, previously was returning the XHR object from $.ajax(), now it returns a superset jqXHR object which encapsulates the XHR object.

When the transport mechanism is something other than XMLHttpRequest (for example, a script tag for a JSONP request) the jqXHR object simulates native XHR functionality where possible.

So it returns an object but some functionnalities are actually not available, like .abort().


The plugin jQuery-JSONP seems to offer the possibility to manually abort JSONP requests. I haven't used it myself but it's worth giving it a try.

like image 99
Didier Ghys Avatar answered Nov 23 '22 11:11

Didier Ghys