{"id":1688,"date":"2010-09-14T21:06:27","date_gmt":"2010-09-14T15:36:27","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=1688"},"modified":"2016-12-19T15:04:56","modified_gmt":"2016-12-19T09:34:56","slug":"asynchronous-behavior-of-ajax","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/asynchronous-behavior-of-ajax\/","title":{"rendered":"Asynchronous behavior of AJAX"},"content":{"rendered":"

Ajax (shorthand for Asynchronous JavaScript and XML) is used to retrieve data from the server asynchronously without interfering with the display and behavior of the existing page. Forgetting this asynchronous behavior will produce incorrect result if it depends on the response from Ajax call.<\/p>\n

Lets take an example(I am using JQuery<\/a> to illustrate the example). Here is a JavaScript function to perform server side check of the form. Depending on the response of Ajax call the function either submits the form or does nothing.<\/p>\n

\n
function submitForm(){\r\n\tvar isFormValid=false;\r\n\tvar dataToBeSent=$('form').serialize();\r\n\t$.get(url, dataToBeSent, function(result){\r\n\t\tisFormValid=result;\r\n\t})\r\n\tif(isFormValid){\r\n\t\t$('form').submit();\r\n\t}\r\n}<\/pre>\n<\/div>\n
The statement  $('form').submit()<\/code> will never be called irrespective of the result<\/code> (AJAX call response). After executing $.get<\/code> statement it will execute the next statement\u00a0 if(isFormValid) <\/code>without waiting for the statement isFormValid=result<\/code> inside the callback function to be executed.<\/p>\n
There exist a dirty solution for the problem : using JavaScript sleep API. But how long you are going to halt the execution of JavaScript code. You are back to the same problem of getting the incorrect behavior.<\/p>\n
One good solution is to make the $.get call synchronous by making changes to the global AJAX configuration like :<\/p>\n
\n
$.ajaxSettings.async=false;<\/pre>\n<\/div>\n
or using calls like :<\/p>\n
\n
$.ajax({type: \"GET\", url: url, data: dataToBeSent, success: function(){\r\n\t\tisFormValid=result;\r\n\t}\r\n});<\/pre>\n<\/div>\n
Now the if(isFormValid) <\/code>statement will be executed only after the $.ajax <\/code>statement has completed its execution. However this approach has its own drawback. Obvious one is the execution of JavaScript halts until it receives the response.<\/p>\n
However the better solution\u00a0 is to execute $('form').submit()<\/code> inside the callback function like :<\/p>\n
\n
$('submitButton').click(function(){\r\n\tvar isFormValid=false;\r\n\tvar dataToBeSent=$('form').serialize();\r\n\t$.get(url, dataToBeSent, function(result){\r\n\t\tisFormValid=result;\r\n\tif(isFormValid){\r\n\t\t$('form').submit();\r\n\t}\r\n\t})\r\nreturn false;  \/\/ Needless if the button is not a submit button\r\n})<\/pre>\n<\/div>\n
return false<\/code> statement at the end of the function prevents the form from being submitted. Now the form submission code will be executed only after the response to $.get<\/code> statement is true.<\/p>\n
There exist JQuery plugins (e.g. JQuery validation plugin) for doing form validation in a better way where you get support for server side validation also. But the case discussed above was to make you understand the asynchronous behavior of AJAX calls.<\/p>\n
Hope this helps you while using Ajax.\u00a0 \ud83d\ude42<\/p>\n
Cheers,
\n~~Bhagwat Kumar~~
\nbhagwat(at)intelligrape(dot)com<\/p>\n
http:\/\/www.tothenew.com<\/p>\n","protected":false},"excerpt":{"rendered":"
Ajax (shorthand for Asynchronous JavaScript and XML) is used to retrieve data from the server asynchronously without interfering with the display and behavior of the existing page. Forgetting this asynchronous behavior will produce incorrect result if it depends on the response from Ajax call. Lets take an example(I am using JQuery to illustrate the example). […]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":1},"categories":[1],"tags":[96,410,408,27,409],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/1688"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=1688"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/1688\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=1688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=1688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=1688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}