What is the best way to implement an Ajax request queue using jQuery? Specifically, I want to accomplish the following:
A user triggers any number of Ajax requests within a web page, which need to be queued up and submitted sequentially.
The web page needs to receive responses from the server and adjust itself accordingly.
Finally, if an error occurs (connection lost, server failed to respond, etc.), I want jQuery to invoke a JavaScript function.
I'm struggling with the last requirement in particular, as the error handling mechanism in jQuery's Ajax functions is not very intuitive. Are there any examples/tutorials that could help me with this task?
Thanks!
I've made a few buffers like this. Some examples can be found simple task Buffer and deferred item queue.
As for error handling you can always use .ajaxError
jQuery ajax has an error attribute where you can attach a function and the method will only fire if an error occurs. See the below example:
jQuery.ajax({
type: "POST",
url: "url",
dataType:"json",
data:{},
success:function(data){
alert("Succeed!");
},
error:function (xhr, ajaxOptions, thrownError){
alert(xhr.status);
alert(thrownError);
}
});
I hope you find this helpful.
Related
We have a report where it will pull data from server with jQuery ajax call, since data growing, server taking long time to return the data but after 30secs request getting timeout with 502 error. Kindly let me know alternatives to get data in 1-5mins without getting timeout.
502's are usually thrown server-side, i.e. the server, or something in-between such as a proxy, is temporarily overloaded.
Not usually something that is controllable on the clientside (apart from retrying, but that's usually not the best option)
Is there a timeout on the server itself?
Try This
$.ajax({
type:"POST",
url:"data.php",
data:dataString,
timeout:5000,
success: function(response) {
alert(response);
},
});
Note: timeout:5000,
I ame facing issues with Primefaces Ajax requests where the Server does not respond for a longer time (say 30 seconds). In that case, it seems that the Ajax request is running into a timeout (either the browser or the Network stack times out). Essentially, what happens then is that the Ajax Animation (that turning circle) runs indefinitely (even if the Response arrives after that time, it does not get considered).
Since users reported to face that Kind of issue espacially during mobile usage, I started to investigate further. To reproduce, I use fiddler and set the oSession["response-trickle-delay"] = "30000";
I tried to search on Google and Stackoverflow but most of the other questions seem to be related to session timeout. There, the proposed solution is to implement an exception handler on the Server. In my case though, there is no session timeout.
I assume that in all the cases where it Comes to a request timeout, poor Network is the cause. Therefore, I rather would want to set something like a timeout on the cient side to tell the application to stop waiting for the Response to return.
I know that in jquery something like this can be done with the following code. Is there an equivalent Approach for Primefaces?
$.ajax({
url: "/your_ajax_method/",
type: "GET",
dataType: "json",
timeout: 3000,
success: function(response) { alert(response); },
error: function(jqXHR, textStatus, errorThrown) {... }
});
Thanks!
In my application I have many ajax request that executes every now and then. I have one that executes with a settimeout another is with a user interaction. My problem is the user interaction part.
The scenario is when the user sets the parameter and clicks the button it executes a ajax request. If he makes a mistake with its parameter the user will adjust something and then execute again the ajax request, with the previous request still on going.
I want to abort the previous request without using the abortall() because like I said before there are other request that should not be interrupted. So its like selecting a request to abort. How do I do that? Please Help.
There is a property on Ext.Ajax autoAbort : Boolean
Whether a new request should abort any pending requests.
Defaults to: false
Available since: 1.1.0
set this prop to true on your Ajax sent by user, so it will not interfere with setInterval ajax's. Also, make sure that you have a client side and a server side validation, so bad params will be avoided. Solving bad params on client side is much quicker, cheaper and user friendly thing to do than let user submit falsy data!
Ext.Ajax.request({
url: '/echo/json/',
params: {
id: 1
},
autoAbort : true,
success: function(response){
//do something
},
failure:function(response){
//do something
}
});
Here is example on fiddle!
I am writing a web application that takes a script input from a client-side browser and sends it to a Java servlet through AJAX. Upon receiving the script, the Java class executes the script and sends some information back to the web page.
An important component of the web application that I am testing right now is the connection timeout and when/if a browser connection will timeout after long periods of time. For me, it is important that the connection does NOT timeout before the Java servlet sends a response, or at least the timeout should be handled.
I have researched ways of handling this and I have a vague understanding of what needs to be done, but first thing is first, I decided to try to get the connection to timeout in order to understand how everything will behave WITHOUT any sort of error handling. Yesterday, I sent the servlet a command from the script input of the client-side which told the servlet to sleep until this morning. I come back this morning to find that in Chrome, the servlet response was successfully received and happily showing itself in the browser.
In IE7, I did not have as much luck :(
After over 15 hours of waiting on a response, IE7 timed out and Chrome did not. I figured either both would time out or neither would.
Also, it might be helpful to know that I am using Struts2 framework.
Can anyone explain this?
Thanks!
P.S. I tried to be as detailed as I could in my question explanation, but I will be happy to include any extra information. I also did not include code, because I did not think any would be relevant, but again, please tell me what code you'd want me to include if you'd like to see some.
Turns out that Chrome is just awesome and IE is not (surprise!). Here's what I am pretty sure happened:
On the ajax call, since no timeout was set, Chrome let the timeout default to 0 i.e. never timeout.
IE7 being the obnoxious browser that it is (and unfortunately the one I MUST develop for), didn't want that to happen, so it stuck with its registry-set default timeout of 60 minutes.
JQuery and AJAX made handling this error a breeze with a bit of longpolling, or at least what I understand to be longpolling. Here's what I did:
Initial AJAX Request (contained in a function):
$.ajax({
beforeSend: function() {
inUse = true;
disableInput();
},
url: "executeScript.do",
data: params,
dataType: "text",
type: "post",
success: function(responseText) {
onSuccess(responseText);
},
error: function(jqXHR, textStatus, errorThrown) {
if(textStatus == "timeout") {
pollServlet();
}
}
});
...
Longpolling(?)
function pollServlet() {
var params = "testID=" + document.getElementById("testIDValue").value;
$.ajax({
url: "servletQuery.do",
dataType: "text",
type: "post",
data: params,
success: function(response) {
if(!isNaN(parseInt(response, 10))) {
setTimeout(pollServlet, parseInt(response, 10));
} else {
onSuccess(response);
}
}
});
}
This works! One thing I noticed, however, is IE7 returns a textStatus of "error" on a timeout instead of "timeout"... odd!
I am using JQuery ajax call which is perfectly running in local server. but when i deploy it on the actuall server. Ajax call is taking much time almost 1 second for every call [In some cases there is no data in return]. I am populating 5 dropdowns from Ajax call and it is taking 5 seconds which is very much. Please can anyone guide me towards the actuall solution. Thanks in Advanced.
Here is my code
function DropDownList() {
$.ajax({
data: '{}',
url: urlAddress + 'LoadDropDown',
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
type: "POST"
success: OnSuccess,
error: OnError
});
}
The slow down maybe because of a number of reasons. It might be that the server is overloaded or that your internet bandwidth is slow. Since the response is fast on your local machine then slowdown is obviously not because of jQuery.
check the response time in firebug's net tab. also check the data returned from the server. it might be that the data returned might be taking too much time to process in your success method.
please avoid using remote jquery server like
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
instead u can download from source and use it like
<script src="JS/jquery-1.10.1.min.js"></script>
so only ajax and jquery functions and events will perform faster.