AJAX documentation and examples

README.md

@@ -14,7 +14,7 @@ Function can be defined directly in the main thread or called from an external j
 Plugin is built on HTML5 "Web Worker" technology.
 (old version of the plugin can be found under tag 0.5.7)
 
-- file size: 1.8k minified / 3.6k development
+- file size: 3.5k minified / 5.5k development
 - Doesn't have any dependecies.
 
 **Basic usage:**

html/doc.html

@@ -22,4 +22,31 @@ <h4>vkThread.execAll ( [param1, param2, ... ] )</h4>
 	param -- object (see above )
 </code></pre>
 
-<p></p><p></p>
+<p></p>
+
+
+<h4>$http( url, args )</h4>
+<p>Run XMLHttpRequest in a threads.</p>
+<pre><code data-language="javascript">
+	@return -- string
+
+	@url             - string; URL
+	@args (optional) - object; data you send to server with POST or PUT methods
+
+</code></pre>
+<p>$http Usage:</p>
+<pre><code data-language="javascript">
+	$http(url).get().then(...);
+
+	$http(url, args).post().then(...);
+
+	$http(url, args).put().then(...);
+
+	$http(url).delete().then(...);
+
+</code></pre>
+
+<p></p>
+
+
+<p></p>

html/function.html

@@ -14,7 +14,7 @@
     return ret;
 }</code></pre>
 
-	<input type="button" value="Run in Thread" onclick="run_promiseTest_in_thread()" />
+	<input type="button" value="Run in Thread" onclick="run_foo_in_thread()" />
 
 	<span class="span_demo_result"  id="demo_result_thread"></span>
 	<input value="clear"  type="button"  onclick="document.getElementById('demo_result_thread').innerHTML =''"/>

html/http.html

@@ -0,0 +1,84 @@
+<table style="text-align:justify;">
+<tr><td>
+<div class="h6">Ajax in Thread</div>
+<p>
+To download and process data in a thread vkthread provides promise-style <b>$http()</b> function.
+</p>
+
+
+
+<p>
+<b>Example GET:</b>
+<br/>
+In this example function requests data from a github server (see URL below), sorts result based on<br/>
+star counter and returns name and number of stars for the most popular project in my github repo.
+</p>
+
+<pre><code data-language="javascript">function foo(url){
+	return $http(url).get().then(function(data){
+
+        var obj = JSON.parse(data)
+                      .sort( (a,b) => b.stargazers_count - a.stargazers_count )[0];
+
+		return obj.name + ' : ' + obj.stargazers_count + ' stars';
+	});
+}
+
+</code></pre>
+
+	<input type="button" value="Run GET" onclick="run_promiseTestGET_in_thread()" />
+
+	<span class="span_demo_result"  id="demo_result_thread"></span>
+	<input value="clear"  type="button"  onclick="document.getElementById('demo_result_thread').innerHTML =''"/>
+<br/><br/>
+<pre>
+<code data-language="javascript">var param = {
+	fn: foo,
+	args:['https://api.github.com/users/vkiryukhin/repos']
+};
+
+vkthread.exec(param).then(
+	function(data){
+		console.log(data);
+	}
+);
+</code></pre>
+
+
+<p>
+<b>Example POST:</b>
+<br/>
+In this example function requests file LICENSE from the origin server and returns the first line of the text.
+</p>
+<pre><code data-language="javascript">function foo(url){
+	return $http(url, args).post().then(function(data){
+		return data.split('\n')[0];
+	});
+}
+
+</code></pre>
+
+	<input type="button" value="Run POST" onclick="run_promiseTestPOST_in_thread()" />
+
+	<span class="span_demo_result"  id="demo_result_thread_2"></span>
+	<input value="clear"  type="button"  onclick="document.getElementById('demo_result_thread_2').innerHTML =''"/>
+<br/><br/>
+<pre>
+<code data-language="javascript">var param = {
+	fn: foo,
+	args:[ '../LICENSE', {id:123, name:'John'} ]
+};
+
+vkthread.exec(param).then(
+	function(data){
+		console.log(data);
+	}
+);
+</code></pre>
+
+
+
+</p>
+
+
+</td></tr></table>

html/overview.html

@@ -40,7 +40,7 @@
 
 </code></pre>
 
-<p><b>execute this function in a thread:</b></p>
+<p>execute this function in a thread:</p>
 
 
 <pre><code data-language="javascript">var param = {

index.html

@@ -66,7 +66,7 @@ <h1>vkThread</h1>
 				<li onclick="loadTemplate('anonym')">Anonymous Function</li>
 				<li onclick="loadTemplate('lambda')">Lambda Function</li>
 				<li onclick="loadTemplate('remote')">Remote Function</li>
-        		<!--li onclick="loadTemplate('ajax')">AJAX</li-->
+        		<li onclick="loadTemplate('ajax')">AJAX</li>
 			</ul>
 		</li>
 		<!--li><b>Promise-based API</b><br/><br/>

main.js

@@ -13,7 +13,7 @@ $(document).ready(function()
 
 function foo(str) {
 	var ret;
-	for(var ix=0; ix<1e6; ix++){
+	for(var ix=0; ix<1e7; ix++){
 		ret = str.split(',').join('-');
 	}
 	return ret;
@@ -353,7 +353,11 @@ function promiseTest(){
 function promiseTestGET(url){
 
 	return $http(url).get().then(function(data){
-		return data.split('\n')[0];
+
+        var obj = JSON.parse(data)
+        			  .sort( (a,b) => b.stargazers_count - a.stargazers_count )[0];
+
+		return obj.name + ' : ' + obj.stargazers_count + ' stars';
 	});
 }
 
@@ -367,7 +371,7 @@ function promiseTestPOST(url, args){
 function run_promiseTestGET_in_thread(){
 	var param = {
 		fn: promiseTestGET,
-		args:['http://localhost/projects/app/vkthread/LICENSE']
+		args:['https://api.github.com/users/vkiryukhin/repos']
 	};
 
 	vkthread.exec(param)
@@ -382,15 +386,19 @@ function run_promiseTestGET_in_thread(){
 }
 
 function run_promiseTestPOST_in_thread(){
+	var url = location.origin+'projects/app/vkthread/LICENSE';
+	console.log(url);
 	var param = {
 		fn: promiseTestPOST,
-		args:['http://localhost/projects/app/vkthread/LICENSE', {id:123, name:'John'}]
+		args:[ location.origin+'/projects/app/vkthread/LICENSE',
+			  {id:123, name:'John'} //dummy
+			 ]
 	};
 
 	vkthread.exec(param)
 	.then(
 		function(data){
-			document.getElementById('demo_result_thread').innerHTML = data;
+			document.getElementById('demo_result_thread_2').innerHTML = data;
 		},
 		function(err){
 			alert(err);

vkthread/vkthread.js

@@ -3,7 +3,7 @@
  *
  * https://github.com/vkiryukhin/vkthread
  *
- * @version: 2.1.0
+ * @version: 2.3.0
  *
  * @author: Vadim Kiryukhin ( vkiryukhin @ gmail.com )
  *
@@ -45,7 +45,7 @@
 
   /* Create generic worker from minified version of worker.js */
 
-  var workerJs = '(function(){var JSONfn={parse:function(str,date2obj){var iso8061=date2obj?/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/:false;return JSON.parse(str,function(key,value){var prefix,func,fnArgs,fnBody;if(typeof value!=="string")return value;if(value.length<8)return value;prefix=value.substring(0,8);if(iso8061&&value.match(iso8061))return new Date(value);if(prefix==="function")return eval("("+value+")");if(prefix==="_PxEgEr_")return eval(value.slice(8));if(prefix==="_NuFrRa_"){func=value.slice(8).trim().split("=>");fnArgs=func[0].trim();fnBody=func[1].trim();if(fnArgs.indexOf("(")<0)fnArgs="("+fnArgs+")";if(fnBody.indexOf("{")<0)fnBody="{ return "+fnBody+"}";return eval("("+"function"+fnArgs+fnBody+")")}return value})}};onmessage=function(e){var obj=JSONfn.parse(e.data,true),cntx=obj.context||self;if(obj.importFiles)importScripts.apply(null,obj.importFiles);if(typeof obj.fn==="function")Promise.resolve(obj.fn.apply(cntx,obj.args)).then(function(data){postMessage(data)})["catch"](function(reason){postMessage(reason)});else postMessage(self[obj.fn].apply(cntx,obj.args))}})();function $http(url,args){var core={ajax:function(method,url,args){var promise=new Promise(function(resolve,reject){var client=new XMLHttpRequest;var uri="";if(args&&(method==="POST"||method==="PUT")){var argcount=0;for(var key in args)if(args.hasOwnProperty(key)){if(argcount++)uri+="&";uri+=encodeURIComponent(key)+"="+encodeURIComponent(args[key])}}client.open(method,url);client.send(uri);client.onload=function(){if(this.status>=200&&this.status<300)resolve(this.response);else reject(this.statusText)};client.onerror=function(){reject(this.statusText)}});return promise}};return{"get":function(){return core.ajax("GET",url,args)},"post":function(){return core.ajax("POST",url,args)},"put":function(){return core.ajax("PUT",url,args)},"delete":function(){return core.ajax("DELETE",url,args)}}};';
+  var workerJs = '(function(){var JSONfn={parse:function(str,date2obj){var iso8061=date2obj?/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/:false;return JSON.parse(str,function(key,value){var prefix,func,fnArgs,fnBody;if(typeof value!=="string")return value;if(value.length<8)return value;prefix=value.substring(0,8);if(iso8061&&value.match(iso8061))return new Date(value);if(prefix==="function")return eval("("+value+")");if(prefix==="_PxEgEr_")return eval(value.slice(8));if(prefix==="_NuFrRa_"){func=value.slice(8).trim().split("=>");fnArgs=func[0].trim();fnBody=func[1].trim();if(fnArgs.indexOf("(")<0)fnArgs="("+fnArgs+")";if(fnBody.indexOf("{")<0)fnBody="{ return "+fnBody+"}";return eval("("+"function"+fnArgs+fnBody+")")}return value})}};onmessage=function(e){var obj=JSONfn.parse(e.data,true),cntx=obj.context||self;if(obj.importFiles)importScripts.apply(null,obj.importFiles);if(typeof obj.fn==="function")Promise.resolve(obj.fn.apply(cntx,obj.args)).then(function(data){postMessage(data)})["catch"](function(reason){postMessage(reason)});else postMessage(self[obj.fn].apply(cntx,obj.args))}})();function $http(url,_args){var args=_args||"";var core={ajax:function(method,url,args){var promise=new Promise(function(resolve,reject){var client=new XMLHttpRequest;var uri="";if(args&&(method==="POST"||method==="PUT")){var argcount=0;for(var key in args)if(args.hasOwnProperty(key)){if(argcount++)uri+="&";uri+=encodeURIComponent(key)+"="+encodeURIComponent(args[key])}}client.open(method,url);client.send(uri);client.onload=function(){if(this.status>=200&&this.status<300)resolve(this.response);else reject(this.statusText)};client.onerror=function(){reject(this.statusText)}});return promise}};return{"get":function(){return core.ajax("GET",url,args)},"post":function(){return core.ajax("POST",url,args)},"put":function(){return core.ajax("PUT",url,args)},"delete":function(){return core.ajax("DELETE",url,args)}}};';
   var workerBlob = new Blob([workerJs], {type: 'application/javascript'});
 
   /* constructor */
@@ -56,7 +56,7 @@
       };
 
     // to use standalone worker.js uncomment code below
-
+    /*
       var err;
       try { throw new Error() }
       catch(e){ err = e.stack }
@@ -66,7 +66,7 @@
       } else {
         this.path = 'http'+ err.split('http')[1].split('vkthread.js').slice(0,-1) + 'worker.js';
       }
-
+    */
   }
 
   /**