How do browsers handle AJAX requests across tabs

Question

I have run into a situation that I cannot really explain and am coming to think it may be the way I am misunderstanding how the browser is handling my AJAX requests.

For reference you can assume I am running Codeigniter on an Apache server and firing off my AJAX requests using jQuery. The browser in question is Chrome.

I have a page in my application that is intended to display a few different graphs. When you navigate to this page specific information about the graphs to be displayed on the page get passed to the server as GET params in the URL. These params are used to fire off an elastic search query for some data that is then manipulated and passed back to the client to render some graphs. This approach works fine when rendering a single page.

However, if a handful of tabs are opened. Say you open five or six tabs that should all render different graphs, SOMETIMES (it can be a little bit unpredictable). A few of the tabs will render the same data. I am wondering if for some reason when opening multiple tabs. Chrome is receiving the AJAX response in multiple tabs. It just sees a response coming back, sends it to each tab regardless of whether it was the correct response and this is causing the graphs to show up the same across multiple tabs.

The main questions I have is how does chrome (or any other browser) handle a connection across multiple tabs. Obviously it is treating it as a single connection as we are able to persist the session. Also how are AJAX requests identified, would it help to pass a unique identifier and try and listen for that? But that seems as if it wouldn't work because it looks as if (if i'm right) that the browser is just picking the first response that is returned and accepting that. Is it getting confused and recognizing that a connection has already been established when opening multiple tabs and just waiting for a response?

So many questions but if anyone could offer any insight or help on how to solve this it would be extremely appreciated.

Edit: To be clear I am most interested in how to prevent this behaviour and correctly receive the data specific to the tab the request originated from.

Answer 1

In a few of my apps we had similar issues. The work around we did was creating new windows instead of tabs so each browser stands on its own session. This way AJAX doesn't get confused. The only other way we managed to fix other apps that needed a tab based design was to create unique session id's for each tab. That way AJAX can be pointed to that specific session id. Btw the tab way requires html5's session storage to work.