{"id":72892,"date":"2026-05-16T03:01:00","date_gmt":"2026-05-15T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=72892"},"modified":"2026-05-14T17:41:47","modified_gmt":"2026-05-14T07:41:47","slug":"asynchronous-clientside-fetch-idea-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/asynchronous-clientside-fetch-idea-tutorial\/","title":{"rendered":"Asynchronous Clientside Fetch Idea Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sleepjs.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Asynchronous Clientside Fetch Idea Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jssleep_fetch.jpg\" title=\"Asynchronous Clientside Fetch Idea Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Asynchronous Clientside Fetch Idea Tutorial<\/p><\/div>\n<p>Further to the day before yesterday&#8217;s <a title='Asynchronous Clientside Ideas Tutorial' href='#acit'>Asynchronous Clientside Ideas Tutorial<\/a> <font color=blue>today we introduce<\/font> &#8230;<\/p>\n<blockquote>\n<ul>\n<li>the talents <strong>A<\/strong>jax (ie. <a target=\"_blank\" title='Ajax information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Ajax_(programming)' rel=\"noopener\">Asynchronous JavaScript and XML<\/a>) can introduce as a clientside <strong>A<\/strong>synchronous tool &#8230; as another choice to &#8230;<\/li>\n<li><a target=\"_blank\" title='Promise object information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_promise.asp' rel=\"noopener\">promise<\/a> object methodologies<\/li>\n<li><font color=blue><a target=\"_blank\" title='Fetch API information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/api_fetch.asp' rel=\"noopener\">fetch<\/a> API methodologies<\/font><\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; as another clientside tool for your armoury of asynchronous processing credentials.<\/p>\n<p>So feel free to (re-)try <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sleepjs.html-GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sleepjs.html-GETME\" rel=\"noopener\">second draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sleepjs.html\" rel=\"noopener\">sleepjs.html Asynchronous Ideas<\/a> web application&#8217;s execution run (<a href='#myifx'>also below<\/a>), helped out by <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jssleep.js--GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jssleep.js--GETME\" rel=\"noopener\">jssleep.js<\/a> external Javascript helper.<\/p>\n<p><i><b>Did you know?<\/b><\/i><\/p>\n<p>Today&#8217;s work made <a target=\"_blank\" title='Fetch API information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/api_fetch.asp' rel=\"noopener\">Fetch<\/a> our preferred third column choice rather than a second <a target=\"_blank\" title='Ajax information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Ajax_(programming)' rel=\"noopener\">Ajax<\/a> incarnation idea.  Why?  Well, we found there were issues when two or more Ajax object sets were existent at any one point in time.  Fetch, thankfully, can live happily and concurrently with an existent Ajax object set in play.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/asynchronous-clientside-fetch-idea-tutorial\/' rel=\"noopener\">Asynchronous Clientside Fetch Idea Tutorial<\/a>.<\/p-->\n<hr>\n<p id='acit'>Previous relevant <a target=\"_blank\" title='Asynchronous Clientside Ideas Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/asynchronous-clientside-ideas-tutorial\/' rel=\"noopener\">Asynchronous Clientside Ideas Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sleepjs.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Asynchronous Clientside Ideas Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jssleep.jpg\" title=\"Asynchronous Clientside Ideas Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Asynchronous Clientside Ideas Tutorial<\/p><\/div>\n<p>The recent Ajax (clientside) calling (serverside) PHP work of <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/shower-song-sharing-tutorial\/' title='Shower Song Sharing Tutorial' rel=\"noopener\">Shower Song Sharing Tutorial<\/a> reminded us of &#8230;<\/li>\n<ul>\n<li>the talents <strong>A<\/strong>jax (ie. <a target=\"_blank\" title='Ajax information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Ajax_(programming)' rel=\"noopener\">Asynchronous JavaScript and XML<\/a>) can introduce as a clientside <strong>A<\/strong>synchronous tool &#8230; as another choice to &#8230;<\/li>\n<li><a target=\"_blank\" title='Promise object information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_promise.asp' rel=\"noopener\">promise<\/a> object methodologies<\/li>\n<\/ul>\n<p>And so we were saved from the tautological blunder of our &#8220;first thought of&#8221; today&#8217;s blog posting title being &#8220;Asynchronous Ajax Clientside Ideas Tutorial&#8221; &#8230; though, into the future, who knows &#8230; you could have two <font size=1>(or even more, come to think of it)<\/font> cleaners promising to use Ajax concurrently while working on their &#8220;for loop&#8221; drills?!   Hmmmmmm.  Watcha doin&#8217; in 2029?<\/p>\n<p>With this in mind we wanted to &#8220;compare the pair&#8221; with a triple pike, whereby we wrote a proof of concept &#8230;<\/p>\n<p><iframe id=myifx src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/sleepjs.html' style=width:95%;height:1200px;><\/iframe> <\/p>\n<p> &#8230; offering three modes of asynchronous usage mode scenarios, they being &#8230;<\/p>\n<table style=width:90%; cellspacing=5 cellpadding=2 border=5>\n<tr>\n<th>Promise<\/th>\n<th>Ajax (processing then delay)<\/th>\n<th>Ajax (working within delay)<\/th>\n<\/tr>\n<\/table>\n<p> &#8230; that if you click that top button can be set off (almost) synchronously, in their asynchronous pursuits, that are logged in a rudimentary way within the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sleepjs.html_GETME\" rel=\"noopener\">first draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sleepjs.html\" rel=\"noopener\">sleepjs.html Asynchronous Ideas<\/a> web application&#8217;s execution run, helped out by our <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jssleep.js-GETME\" rel=\"noopener\">jssleep.js<\/a> external Javascript helper.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d72886' onclick='var dv=document.getElementById(\"d72886\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/promise\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d72886' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d72892' onclick='var dv=document.getElementById(\"d72892\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/fetch\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d72892' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Further to the day before yesterday&#8217;s Asynchronous Clientside Ideas Tutorial today we introduce &#8230; the talents Ajax (ie. Asynchronous JavaScript and XML) can introduce as a clientside Asynchronous tool &#8230; as another choice to &#8230; promise object methodologies fetch API &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/asynchronous-clientside-fetch-idea-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,12,14,37],"tags":[69,1614,212,4286,5480,2380,327,5458,5479,576,652,849,3989,2357,3719,2124,1319,1345],"class_list":["post-72892","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-ajax","tag-asynchronous","tag-client","tag-clientside","tag-concurrent","tag-delay","tag-did-you-know","tag-fetch","tag-fetch-api","tag-html","tag-javascript","tag-object","tag-programmming","tag-promise","tag-promise-object","tag-response","tag-tutorial","tag-url"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72892"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=72892"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72892\/revisions"}],"predecessor-version":[{"id":72902,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72892\/revisions\/72902"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=72892"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=72892"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=72892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}