{"id":811,"date":"2013-11-28T14:12:33","date_gmt":"2013-11-28T14:12:33","guid":{"rendered":"http:\/\/invisiblezero.net\/?p=811"},"modified":"2013-11-28T14:12:33","modified_gmt":"2013-11-28T14:12:33","slug":"javascript-continuously-respectively-send-requests-to-server","status":"publish","type":"post","link":"http:\/\/ndthanh.com\/javascript-continuously-respectively-send-requests-to-server\/","title":{"rendered":"Javascript – continuously, respectively send requests to server"},"content":{"rendered":"

\"continuous\"<\/a><\/p>\n

Sometime you may want to send requests continuously to server with one request each time ( like a foreach in PHP, or for x in array or .each in Ruby \u2026). we have \u2018for’ and ‘for .. in’ loop but it\u2019s not smart enough to wait for an Ajax request to be responded. so it doesn\u2019t help us to fulfill our target. what should we do to loop through array, send Ajax request to server with data from array element and wait for response before sending new request ?<\/p>\n

I experienced this case several times and i have a small trick for it. you can call it an algorithm if you want (actually, i named it \u2018left hand – right hand algorithm). see the below code<\/p>\n

\nvar todo = JSON.parse('<?php echo $todo ?>');\nvar total = <?php echo $urlcount ?>;\nvar counter=0;\nvar progressBar;\nprogressBar = new ProgressBar("results", {'width':'650px', 'height':'20px'});\n\nfunction updateProgressBar(counter, total)\n{\n  var percent = counter\/total * 100;\n  percent = Math.ceil(percent);\n  percent = percent < 100 ? percent : 100;\n\n  progressBar.setPercent(percent);\n}\n\nfunction updateCurrentUrl(url)\n{\n  $('currenturl').innerHTML = url;\n}\n\nfunction finalAction()\n{\n  $('final').show();\n  \/\/ redirect to previous page\n}\n\nEvent.observe(window, 'load', function(){\n  function left() {\n    new Ajax.Request(\n      '<?php echo Mage::helper('adminhtml')>getUrl("fpcwarming\/adminhtml_index\/ajaxload")?>',\n      {\n        method: 'post',\n        parameters: {id: todo[counter]['id']},\n        onLoading: updateCurrentUrl(todo[counter]['url']),\n        onSuccess: function(response){\n          updateProgressBar(++counter, total);\n          if (counter < total) {\n            right();\n          }\n          else {\n            finalAction();\n          }\n        }\n      }\n      );\n  }\n\n  function right() {\n    new Ajax.Request(\n        '<?php echo Mage::helper('adminhtml')>getUrl("fpcwarming\/adminhtml_index\/ajaxload")?>',\n        {\n          method: 'post',\n        parameters: {id: todo[counter]['id']},\n        onLoading: updateCurrentUrl(todo[counter]['url']),\n        onSuccess: function(response){\n          updateProgressBar(++counter, total);\n          if (counter < total) {\n            left();\n          }\n          else {\n            finalAction();\n          }\n        }\n        }\n        );\n  }\n\n  left();\n});\n\n<\/pre>\n
As you can see, i supply this Javascript script with an array from PHP first. we will also need ‘total’ and ‘counter’ to control our custom loop. I defined a progressBar object to show current process of this continuous Ajax request call. Next 2 function is for updating the progress bar Next function is finalAction(). you can define action at the end of your loop here Ok, let\u2019s start rocking with our next two big stars : left() and right() – i named it as left hand, right hand algorithm, still remember ? Left() and right() are almost identical at ajax request parameters. the only difference here is function call on success. in case counter doesn\u2019t exceed total AKA size of array. left() will call right() on success. likewise, right() will call left() on success, this loop will be terminated when counter exceed total. at this point, we call finalAction(). I hope this description will give you a good overview of the trick i mentioned. have fun!! \ud83d\ude00<\/p>\n","protected":false},"excerpt":{"rendered":"
Sometime you may want to send requests continuously to server with one request each time ( like a foreach in PHP, or for x in array or .each in Ruby \u2026). we have \u2018for’ and ‘for .. in’ loop but it\u2019s not smart enough to wait for an Ajax request to be responded. so it…<\/p>\n
Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[74,45],"tags":[79,62,51,55],"aioseo_notices":[],"views":6,"_links":{"self":[{"href":"http:\/\/ndthanh.com\/wp-json\/wp\/v2\/posts\/811"}],"collection":[{"href":"http:\/\/ndthanh.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ndthanh.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ndthanh.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ndthanh.com\/wp-json\/wp\/v2\/comments?post=811"}],"version-history":[{"count":0,"href":"http:\/\/ndthanh.com\/wp-json\/wp\/v2\/posts\/811\/revisions"}],"wp:attachment":[{"href":"http:\/\/ndthanh.com\/wp-json\/wp\/v2\/media?parent=811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ndthanh.com\/wp-json\/wp\/v2\/categories?post=811"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ndthanh.com\/wp-json\/wp\/v2\/tags?post=811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}