How does jQuery Ajax know which reponse data goes with which success callback?

Question

I have a web page with several jQuery ajax calls which fire asynchronously at the same time against .NET web methods.

These web methods return data back to be processed by the success callbacks for each .ajax call.

My question is probably low level. How does the jQuery/Javascript know which data goes back to which .ajax call? I looked at the return packet using a network sniffer and I couldn't see any type of identification which could be used to link it back to its originating call. My guess it has to do with the jqXHR object. If it's in the response packet, I can't see it in the sniffer.

Any technical explanation could be helpful.

Addition: I am asking this because I will use asynchronous methods in the server side. The method the .ajax originally called is not the one returning the data. A different thread is doing the work.

I lol'd Neal. @Tony_Nenrich, actually it's simple, each ajax call sends and receives it's own data, meaning they can never get mixed up. — Khez, Apr 07 '11 at 19:28
@Neal: it's good enough. I hope it's not a reason for you not to give a good answer. — Tony_Henrich, Apr 07 '11 at 19:30
@Khez: I am looking for more detail than that. Why don't they mix up? What is tieing them together? Does the channel have to be connected and open during that time? — Tony_Henrich, Apr 07 '11 at 19:37
Your question was confusing at first. Are you asking how are Ajax requests are paired with the proper response? — Eli, Apr 07 '11 at 19:39

Leopd · Accepted Answer · 2011-04-07T19:50:55.627

The same way a browser can request multiple images from a web server and know where to put each one on the page. It's part of the HTTP protocol. The browser sends a request, and the response gets sent on the same TCP socket. If the browser is waiting for multiple objects simultaneously, it has multiple TCP sockets open.

In your packet sniffer, look closely at the TCP port numbers, particularly the response port (the port which is not 80).

Your browser and your web server / framework will do the right thing. On the server side make sure you send your response to the appropriate request, and it will get back to the right place in jquery regardless of order received / how long processing took. If you've got multiple threads exchanging data on the server, you're making your life harder than it needs to be, so I assume you have a good reason to and know what you're doing.

score 1 · Answer 2 · edited May 23 '17 at 12:22

1

I believe this post may have some of the information you are looking for. HTTP requests and responses are paired through a process called exchanges.

Name for HTTP Request+Response

XMLHttpRequests return HTTP status codes (e.g. 200, 304, 500, etc.) and readyState to the browser after the request. jQuery ajax uses XMLHttpRequest to determine which codes are successful and which are failures.

https://developer.mozilla.org/En/Using_XMLHttpRequest

http://api.jquery.com/jQuery.ajax/

edited May 23 '17 at 12:22

Community

1
1

answered Apr 07 '11 at 19:28

Eli

17,397
4
36
49

1

But the browser can get several 200 status codes within a second. It still needs to know which one goes to what. – Tony_Henrich Apr 07 '11 at 19:33

score 1 · Answer 3 · answered Apr 07 '11 at 19:37

It's through a concept called closures. Put simply, the AJAX call always has a reference to your success callback, e.g.:

function ajax(params, callback){
    // fire off AJAX call
    // on response:
    callback(data);
}

if you call ajax multiple times, callback is a new variable in each one. I wrote an article on the concept years back that may help: http://www.htmlgoodies.com/primers/jsp/article.php/3606701/Javascript-Basics-Part-9.htm

score 0 · Answer 4 · answered Apr 07 '11 at 19:38

0

When an AJAX call is made, jQuery creates an internal reference to the underlying XMLHTTPRequest object and binds the event handlers to that object.

answered Apr 07 '11 at 19:38

harpo

41,820
13
96
131

score 0 · Answer 5 · answered Apr 07 '11 at 19:39

Have you ever used the XMLHttpRequest object without a library? It is pretty simple to understand if you do it. I would recommend you go and write the 10 lines of code to see how it works.

You create an instance of the XMLHttPRequest object for each request you want to make to the server. You assign it an onreadystatechange event handler that gets called in 4 times. When the readystate hits 4, it is done. In JQuery's situation when it is done it calls your callback function.

How does jQuery Ajax know which reponse data goes with which success callback?

5 Answers5