ajax synchronous call with timeout - ajax

New to ajax, so asking a very basic question.
-- Is there no way to make a Synchronous ajax call (async:false) with timeout set on it.?
http://www.ajaxtoolbox.com/request/
Timeout works perfect with Asynchronous call though in my application,
but for one particular scenario, I need a Synchronous call (the javascript should actually wait untill it hears back from the server), and this also works fine. But I need to handle a scenario where the sever could take long and a ajax timeout may be called.
Is there any other piece of standard documentation for ajax I could refer to?
Thanks

Basically, during a synchronous ajax request, the browser is blocked and no javascript can be executed while the browser is blocked. Because of this, jQuery can't abort the ajax request after a set timeout because jQuery is javascript and javascript can't be executed while the browser is blocked. This is the primary flaw in synchronous ajax.
Anytime you might want a synchronous request, you should instead use an asynchronous one with what should happen afterwards in the callback, as shown below;
$.ajax({
url : 'webservices.php',
timeout: 200,
dataType : 'json',
data : {
'cmd' : 'ping',
},
success : function(data, textStatus) {
$.ajax({
url : 'webservices.php',
async: false,
dataType : 'json',
data : {
'cmd' : 'feedback',
'data' : data,
'userinfo' : window.dsuser
},
success : function(data, textStatus) {
// success!
Status("Thanks for the feedback, "
+ window.dsuser.user + "!");
}
});
},
error : function(jqhdr, textStatus,
errorThrown) {
Status("There was trouble sending your feedback. Please try again later");
}
});

I don't believe it's possible to set a timeout on a synchronous call. When you set "async:false", I believe the browser actually locks up while waiting for the response. You should only use a synchronous request if you absolutely need to (because of the browser locking up).

Related

ajax post returns Object { readyState=0, status=0, statusText="error"}

I have a json string with me {offer.offer.offerId.USSellerId: {$gt: 50}}. All i wanted to do was to call a POST REST Service with this json query as payload and get the returned JSON.
I was able to call that service using chrome advanced rest client and I get the data back. But my problem is when I tried to call this service using below line of code I get the following errors
$.ajax({
url:"http://10.242.172.12:8080/cqs/services/services/cqs/search",
Accept: "application/json",
type: "POST",
contentType: "application/json",
data: {"offer.offer.offerId.USSellerId": {"$gt": 50}},
async:true,
crossDomain: true,
always: function(data, textStatus, errorThrown) {
console.log(data)
console.log(textStatus)
},
success: function (data) {
console.log(data)
alert(data);
},
error: function (data, status, err) {
console.log(data)
console.log(status)
console.log(err)
}
});
I see the following in the console:
Object { readyState=0, status=0, statusText="error"}
error
emptry string..
I could not understand anything from this error. When i did google this error, many suggestion tell that it could be cross browser problem. I have no control over server side code.
How can i fix that cross browser error from client side?
Please check the XMLHttpRequests being stopped:
If you end up with an XMLHttpRequest having status=0 and
statusText=null, it means that the request was not allowed to be
performed. It was UNSENT. A likely cause for this is when the
XMLHttpRequest origin (at the creation of the XMLHttpRequest) has
changed when the XMLHttpRequest is then open(). This case can happen
for example when one has an XMLHttpRequest that gets fired on an
onunload event for a window: the XMLHttpRequest gets in fact created
when the window to be closed is still there, and then the request is
sent (ie open()) when this window has lost its focus and potentially
different window has gained focus. The way to avoid this problem is to
set a listener on the new window "activate" event that gets set when
the old window has its "unload" event fired.

Ajax request error when changepage

guys. I have a juerymobile multi-page, and I have a button in #page-index, when click it, will send a ajax request to server, and changepage to #page-column, It run will in PC, but when i deploy the multi-page in phonegap, the button click can just run only twice, code is below:
function test()
{
$.mobile.changePage('#page_column');
$.ajax({
url: "http://192.168.168.120:8090/fcmobile/getTest",
dataType: "json"
}).done(function(data) {
alert(data.content);
});
}
I found if I remove $.mobile.changePage('#page_column');, the ajax request can be run well any times. but when I add the changePage code, it only can be run twice, in third time, ajax request can't even be send. Dose anybody know reason?
AJAX is made to be asynchronous, so no need to set async to false to get it working. Use events instead.
For example:
function test () {
$.ajax({
'url': "http://192.168.168.120:8090/fcmobile/getTest",
'dataType': 'json',
'success': function (json_data) {
$(document).trigger('test_json_data_loaded');
console.log(data);
}
});
}
$(document).on('test_json_data_loaded', function () {
$.mobile.changePage('#page_column');
});
When you set async to false, you're basically making it so that every time this AJAX request is made, the user will have to wait until all the data is fully loaded before the application/website can do/execute anything else...not good.

Page freezes for seconds when ajax post working

When i use jquery's $.post ajax function, page freezes for 2-3 seconds and then data received. Freezing time can change depends on the data received.
How can i prevent this ?
EDIT:
COde i am using, it actually receives very large data
$.post("../ajax_updates.php", { time: last_update }, function(data) {
if (data) {
if (data != "") {
$("#news_feed").prepend($(data).fadeIn('slow'));
}
}
});
If you load big amount of data through JavaScript this is normal, the problem is caused because your request is synchronous which will make your browser to wait this request to end before do anything else.
You need to make your request asynchronous
P.S. Use $.get instead of $.post to get information from the server, in some cases - specially if you code work under Windows IIS you will get an error about that.
P.S-1. And it make sense $.get is for getting data from the server and $.post is for sending data.
Try this:
$.ajaxSetup({
async: true
});
$.get("../ajax_updates.php", { time: last_update }, function(data) {
if (data && data != "") {
$("#news_feed").prepend($(data).fadeIn('slow'));
}
});
When you send the ajax request make sure that async is set to true. If it is set to false, the browser will freeze untill a response is received.
http://api.jquery.com/jQuery.ajax/

Why is my AJAX request hanging after running for a while?

My AJAX calls from a page I wrote is hanging after an indeterminate number of calls. The page makes a request after a preset amount of time (currently 5 seconds) gets data from my server then waits the amount of time again. When I put the following as my AJAX Request:
myAjax = new Ajax.Request(
url,
{
method: 'get',
asynchronous: true,
url: url,
parameters: querystring,
onInteractive: document.getElementById('meh').innerHTML='Interactive',
onSuccess: processXML
});
The div with the id "meh" will get the word Interactive written to it, but the Success condition never gets executed (same if onSuccess is replaced with onComplete).
So why is my code doing this? Thanks.
Shouldn't the onInteractive event handler be a reference to a function?
as pb said, shouldn't it be
onInteractive: function(){
document.getElementById('meh').innerHTML='Interactive'
}

Browers entering "busy" state on Ajax request

I am currently implementing a sort of HTTP Push using Long Polling for browsers that don't support multipart ajax responses.
I have to admit that while the server side is working fine, i am relativly new to front end javascript development, and thus may have made some obvious mistakes
The problem is as follows LongPolling works perfectly on IE 6,7,8 and Firefox ( even though Firefox uses multipart i tested it with long polling too ) but Safari and Chrome enter
the browsers "busy" state during the ajax requests. ( they show the windows wait cursor, and Safari also shows its "Loading" indicator in the title bar )
This is of course not desireable..
Here is my code to do the long poll based on Jquery 1.4.1:
function MepSubscribeToQueueLongPoll(name, callback) {
var queueUrl = MepGetQueueUrl(name, "LongPoll");
MepLongPollStep(queueUrl, callback);
};
function MepLongPollStep(url, callback) {
$.ajax({
url: url,
async: true,
cache: false,
success: function (data,status,request) {
callback(request.responseText);
MepLongPollStep(url, callback);
}
});
};
Note that i am bypassing the data parsing functionality of Jquery by passing the request.responseText directly to the callback because Jquery does not seem to support multipart ajax respones and i wanted to be consistent across communication paths.
Since no better answer has stepped forward, I wonder if a simple timeout would solve the problem. Sorry to give a "guess" instead of a "I know this to be true answer", but this might actually fix it.:
function MepLongPollStep(url, callback) {
$.ajax({
url: url,
async: true,
cache: false,
success: function (data,status,request) {
callback(request.responseText);
window.setTimeout( function(){
MepLongPollStep(url, callback);
},10);
}
});
};

Resources