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

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 b开发者_如何学运维y 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.

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.

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

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/

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

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.