codepants/gist:5307165

## gistfile1.txt
require 'webrick'
require 'json'
DB = {}
class Simple < WEBrick::HTTPServlet::AbstractServlet
  def do_GET request, response
    p = request.path.split "/"
    response.status, response['Content-Type'], response.body = 200, 'text/plain', p.length < 4 ? DB[p[2].to_sym].to_json : DB[p[2].to_sym][p[3].to_sym].to_json
  end
end
class SimpleP < WEBrick::HTTPServlet::AbstractServlet
  def do_POST request, response
    p = request.path.split "/"
    x = {p[3].to_sym => p[4]}
    (DB[p[2].to_sym]||={}).merge! x
    response.status, response['Content-Type'], response.body = 200, 'text/plain', "loaded #{p.join "-->"}"
  end
end
class Tester < WEBrick::HTTPServlet::AbstractServlet
  def do_GET request, response
    response.status, response['Content-Type'], response.body = 200, 'text/html', DATA
  end
end
server = WEBrick::HTTPServer.new(:Port => 8699)
trap 'INT' do server.shutdown end
server.mount '/fetch', Simple
server.mount '/load', SimpleP
server.mount '/', Tester
server.start
__END__

<html><body>
<form id='fetching'><label for='param'>params:</label><input id='liveinput' type='text' name='param' placeholder='e.g. abc/def'></form>
<hr></hr>
<form id='loading'><label for='param'>params:</label><input type='text' name='param' placeholder='e.g. abc/def'><label for='param'>params:</label><input type='text' name='val'>
<input type='submit' value='load'></input>
</form>
<hr></hr>
<div id='response'></div>
  <style>
    div.butt {background: red; width: 50px}
  </style>
  <script type='text/javascript'>
    function reqListener () {
      document.getElementById('response').innerHTML = '...' + this.responseText
    };
    var fetch = function() {
      var oReq = new XMLHttpRequest();
      oReq.onload = reqListener;
      oReq.open('get', '/fetch/'+document.forms.fetching.param.value, true);
      oReq.send();
    }
    var load = function() {
      var oReq = new XMLHttpRequest();
      oReq.onload = reqListener;
      oReq.open('post', '/load/'+document.forms.loading.param.value +'/'+document.forms.loading.val.value, true);
      oReq.send();
      return false;
    }
    window.load = load
    document.getElementById('liveinput').oninput = fetch
    document.getElementById('loading').onsubmit = load
  </script>
</body></html>
	require 'webrick'
	require 'json'
	DB = {}
	class Simple < WEBrick::HTTPServlet::AbstractServlet
	def do_GET request, response
	p = request.path.split "/"
	response.status, response['Content-Type'], response.body = 200, 'text/plain', p.length < 4 ? DB[p[2].to_sym].to_json : DB[p[2].to_sym][p[3].to_sym].to_json
	end
	end
	class SimpleP < WEBrick::HTTPServlet::AbstractServlet
	def do_POST request, response
	p = request.path.split "/"
	x = {p[3].to_sym => p[4]}
	(DB[p[2].to_sym]\|\|={}).merge! x
	response.status, response['Content-Type'], response.body = 200, 'text/plain', "loaded #{p.join "-->"}"
	end
	end
	class Tester < WEBrick::HTTPServlet::AbstractServlet
	def do_GET request, response
	response.status, response['Content-Type'], response.body = 200, 'text/html', DATA
	end
	end
	server = WEBrick::HTTPServer.new(:Port => 8699)
	trap 'INT' do server.shutdown end
	server.mount '/fetch', Simple
	server.mount '/load', SimpleP
	server.mount '/', Tester
	server.start
	__END__

	<html><body>
	<form id='fetching'><label for='param'>params:</label><input id='liveinput' type='text' name='param' placeholder='e.g. abc/def'></form>
	<hr></hr>
	<form id='loading'><label for='param'>params:</label><input type='text' name='param' placeholder='e.g. abc/def'><label for='param'>params:</label><input type='text' name='val'>
	<input type='submit' value='load'></input>
	</form>
	<hr></hr>
	<div id='response'></div>
	<style>
	div.butt {background: red; width: 50px}
	</style>
	<script type='text/javascript'>
	function reqListener () {
	document.getElementById('response').innerHTML = '...' + this.responseText
	};
	var fetch = function() {
	var oReq = new XMLHttpRequest();
	oReq.onload = reqListener;
	oReq.open('get', '/fetch/'+document.forms.fetching.param.value, true);
	oReq.send();
	}
	var load = function() {
	var oReq = new XMLHttpRequest();
	oReq.onload = reqListener;
	oReq.open('post', '/load/'+document.forms.loading.param.value +'/'+document.forms.loading.val.value, true);
	oReq.send();
	return false;
	}
	window.load = load
	document.getElementById('liveinput').oninput = fetch
	document.getElementById('loading').onsubmit = load
	</script>
	</body></html>