AJAX calls from multiple browser tabs at the same time: - ajax

When an user tries to send AJAX requests simultaneously from multiple browser tabs, the earlier requests get completed and the page loads but the other AJAX calls are preempted. AS a result of which the response is empty for the other calls. Only one call survives.
In my application using struts 2.0, JSP and javascript and the prototype framework, i found that the server response is empty in the cases mentioned above though the data gets updated in teh database with the request parameters. The onSucess event handler for Ajax.request gets called but the the response is empty.
Can you please help?
Thanks

I'm not quite sure what's happening to cause this, but here's one thing to try: The last large AJAX-centric application I developed, we had to add a random number parameter to each query string to ensure there was no caching on either the client or server side (or ISP side, these days).
Guaranteeing the query URL is different in each tab could solve your problem.

I think we should get ready status from Ajax call before starting making another call to server (except you were creating a new ajax object for each call), but i could be wrong.
I never use prototype, but i use Adobe Spry for years and have no problem with multiple Ajax call, but this one is for prototype, read this it should helpful.
Multiple Ajax Requests

Related

AJAX POST does not always occur

I have tried to incorporate AJAX into an application that I built.
The basic function is:
-The user clickes a button, which triggers JS code that makes an AJAX call that does a POST to a Servlet(sending account data).
-The Servlet(which has an EJB injected into it), communicates with an EJB through it's local interface.
-The EJB(on init) initializes a DAO object, injects an EntityManager into it, and uses that DAO object to communicate with a database through JPA (Hibernate as the provider).
-The local interface methods of the EJB return Data Transfer Objects, which are parsed in the Servlets doPost() method, and the DTO's are used to build an HTML table(String) that the Servlet responds to the AJAX call with.
-On the client side, I use that HTML table(responseText) to update a div on the page.
I have 2 questions:
1) Is using a data-centric approach to the AJAX call (returning an HTML table instead of JSON Strings) a common choice in enterprise level applications that make use of AJAX?
2)I've noticed that sometimes the POST is not even called. It seems to be intermittent. I tried to add the Cache Control header, but that doesn't seem to work. This concerns me especially when I think about eventually deploying the application to production, that maybe AJAX is not the way to go, but when it works, the application works smoothly.
1) Using AJAX to submit data or update the web page is very common. Page at a time applications are the old way web applications used to be done where you would need to reload the entire page just to update a little bit of information - which would be inefficient and not to mention would create a bad user experience. These days, updating just "Part of a page" is very common and is mostly done using AJAX, and if not WebSockets.
Now you question regarding updating the page using the servers response which is HTML - to update the page, or just get a JSON String, and manipulate the DOM (ie adding tables etc). I have used a combination of these. For example if needed to add a row to a table, you could get the server to generate the HTML using a tempting engine (groovy or similar). In addition you you need a response code, so you can package the HTML and Response code in a JSON, and send it back to the client. Any combination of these works depending on your use case.
JsonObject json = new JsonObject();
json.addProperty("responseCode", responseCode);
json.addProperty("html", html);
2) You can write a simple script to send multiple requests to the AJAX url to see if it is the server that is not able to handle the amount of requests. If it works, then you can narrow down the problem to be client side. Make sure you are not using blocking techniques. You can also setup a callback function to see if there is any response if any. AJAX Post is similar to a normal POST request, just make sure you have some indicator for the user notifying them that the request is in progress/complete.

Effective way to avoid caching during Jquery Get (AJAX)

I am experiencing random occurrences of caching of Ajax requests created through Jquery's get.
The Jquery gets are done in the most straight forward conventional way (route + params + callback)
I am already using
$.ajaxSetup({cache:false});
But it doesn't seem to always work. I get how ajaxSetup no cache works, and I see the added random parameter being added to my request url.
My current browser is IE 8.0
Does anyone know of another solution besides the ajaxSetup way...
The browser itself is simply not allowed/able to cache requests with distinct parameters, as added by {cache:false}.
It sounds like the caching is happening somewhere else in your chain, possibly in your web server/app.
Use firebug's net tab to check exactly what is being requested by the browser, and what the URLs are exactly, then take it from there.
It turns out I was wrong about my assumption about caching of ajax requests.
The real issue was caching of subsequent redirect to action requests that took place on the server (in response to the original ajax call).
The solution ended up being the following attribute.
[OutputCache(Location = OutputCacheLocation.None)]
It can be either applied at the controller level or the action level.

is it possible to do partial postback on web?

I read some paragraphs in a book saying that it is not possible to do a partial postback for web, even AJAX is employed. Ajax will postback everything and update only ajaxfied controls.
However, on pages I made using ajax, I used Fiddler to monitor the transportation. I found when the page initial load, it loaded everything include pictures .... However, when I click a button and do a ajax postback. I can only see the some data were loaded.... Looks like it doesn't need to reload the whole page again.
I don't know if what I see is correct? Or the book I read is correct?
Thank you guys.
That depends what you put in the term "postback".
The AJAX call will send the complete form data back to the server, just as if the form was posted normally. The server will answer with a partial response that only contains the parts of the page that should be updated.
So, the request is not partial, but the response is.
I am not sure how you are posting back from the client side. I am guessing you are using UpdatePanels. How well you 'AJAX-ify' a web page depends on what method you employ.
UpdatePanels - Read Dave Ward's posting on them - http://encosia.com/2007/07/11/why-aspnet-ajax-updatepanels-are-dangerous/
PageMethods to post back to a web service, get the data and update the DOM to display the result
JQuery and other such AJAX frameworks to post back to a web service
I am sure the link above should clear things up a bit
I'm having a hard time understanding your terminology. I'm not really sure what a "postback" is, much less a "partial" one. I do know that one of the basic ways to transmit information to an HTTP server is via a POST request, which is usually used when submitting forms. If you mean to say that the entire form is transmitted when you click a submit button, I believe you'd be right.
You also seem to be doing something with AJAX, but it's difficult to tell. The whole point of AJAX is to have dynamic data displayed on a page without resorting to reloading it. Defining what to send and what to do with the results is entirely up to your own JavaScript. So unless you're using a framework, which you don't specify, there is no such thing as "ajaxified controls."
In any case, "AJAX" usually means using the XMLHttpRequest() method of modern browsers to send data to servers without refreshing the page. When you call this function, you specify exactly what data to send. This has nothing to do with HTML forms. One caveat: if you are indeed using a library for AJAX, it might impose additional limits on how you structure information to send.

Ajax request during a file upload takes a long time to complete

I'm using a Webphere server. I am performing a file upload through a servlet using the Apache FileUpload methods.
I attach a listener to this FileUpload which updates a "percentage" field denoting what percentage of the request has been processed. The request gets directed to an iframe (form's target is an iframe) so that the page that fired the request doesn't have to wait for the response to complete and therefore it won't show the user just a blank page. I add a reference to the progress listener to the session as well.
From the JSP page as soon as I fire the submit on the form, after 1 second and then every second I fire an ajax request which goes to a servlet which looks up the ProgressListener and responds with the percentage field. The process works fine, but on Websphere sometimes this Ajax request can take up to 30 seconds to complete! I tested the same thing on a simple Tomcat server and there the request/response comes out within a second.
What could be wrong? Is it a server setting?
Thank you,
Edit: The code inside the servlet that gets the percentage from the session runs as soon as the request is made. The bottleneck seems to be in delivering the request back to the client browser.
Do you have websphere configured to compile and cache the jsp page, or is it recompiling each time?
You may want to use AOP, either AspectJ or Spring, or a profiler, to see what is going on with the ajax call, so that you can monitor without changing any code in the jsp page.
The profiler may be a better starting point, just so you can look globally at what is going on, then use aspects to monitor in a fine-grained fashion and decide where the bottleneck is.
You could also see if precompiling the jsp pages will help. This tutorial should be useful:
http://publib.boulder.ibm.com/infocenter/wchelp/v6r0m0/index.jsp?topic=/com.ibm.commerce.samples.doc/tutorial/tdedeployjsp.htm

Ajax updater not working in internet explorer

I have a problem with ajax updater that i couldnt solve.
I have this code Servicii
It works perfectly in firefox but in internet explorer it does nothing.Also if i open the site from my harddrive it works but it only works for the link once then i have to reload the whole page...
Does anybody have an ideea on how to solve this problem?
Thank you
I've had this exact problem. I'm assuming that you've got a function which periodically makes a request to the server to fetch data then updates the page if that data has changed since the last time you made the request.
Internet Explorer will cache the results of Ajax calls to the same resource even if you tell it not to in your HTTP headers. So if you make a request to get_data?id=whatever over and over again, IE will make the request once and then stop making it in the future and simply return the result of the first request.
The solution is to add a dummy parameter to the request string. So first you request get_data?id=whatever&ie_hack=0 then get_data?id=whatever&ie_hack=1 etc. This will stop IE from caching the results and force it to make the request each time, since it sees a different query string for each request.
I also ran into a problem like this, not with caching but with race conditions. IE executed the render part of the function before the any data was returned. Here's the issue, and solution:
Returned AJAX html breaks IE click events

Resources