litch/make-request.html

## gistfile1.txt
I inlined the code from microAjax there, to keep dependencies at 0.  I think the following cite satisfies the license?

https://code.google.com/archive/p/microajax/

This code was referenced extensively:
https://bitbucket.org/snippets/jdubray/9dgKp/sam-sample

## make-request.html
<html>
  <body>

  <div id="representation">
    <blockquote>Something went wrong. =/</blockquote>
  </div>

  <script type="text/javascript">
    function microAjax(B,A){this.bindFunction=function(E,D){return function(){return E.apply(D,[D])}};this.stateChange=function(D){if(this.request.readyState==4){this.callbackFunction(this.request.responseText)}};this.getRequest=function(){if(window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest()}}return false};this.postBody=(arguments[2]||"");this.callbackFunction=A;this.url=B;this.request=this.getRequest();if(this.request){var C=this.request;C.onreadystatechange=this.bindFunction(this.stateChange,this);if(this.postBody!==""){C.open("POST",B,true);C.setRequestHeader("X-Requested-With","XMLHttpRequest");C.setRequestHeader("Content-type","application/x-www-form-urlencoded");C.setRequestHeader("Connection","close")}else{C.open("GET",B,true)}C.send(this.postBody)}};

    var model = {
      balance: null,
      started: false,
      fetched: false,
      errored: false
    }

    model.present = function(data) {
      console.log("Model asked to present: ", data);
      if (state.fetching(model)) {
        model.fetched = data.fetched || false;
        model.balance = data.balance;
      } else {
        if (state.ready(model)) {
          model.started = data.started || false;
        }
      }
      console.log('rendering model: ', model);
      state.render(model);
    }

    var view = {};

    view.init = function(model) {
      return view.ready(model);
    }

    view.ready = function(model) {
      return (
        "<p>Start action?</p>\n\
          <form onSubmit=\"JavaScript:return actions.start({});\">\n\
            <input type=\"submit\" value=\"Start\">\n\
          </form>"
      );
    }

    view.fetching = function(model) {
      return("<p>Fetching</p>")
    }

    view.fetched = function(model) {
      return("<p>Balance: $" + model.balance / 100 + "</p>")
    }

    view.display = function(representation) {
      var stateRepresentation = document.getElementById('representation');
      stateRepresentation.innerHTML = representation;
    }

    view.display(view.init(model));

    var state = { view: view };

    state.representation = function(model) {
      var representation = "Oops, invalid state";

      if (state.ready(model)) {
        representation = state.view.ready(model);
      }

      if (state.fetching(model)) {
        representation = state.view.fetching(model);
      }

      if (state.fetched(model)) {
        representation = state.view.fetched(model);
      }

      state.view.display(representation);
    }

    state.ready = function(model) {
      return (!model.fetched && !model.started);
    }

    state.started = function(model) {
      return (model.started && !model.errored && !model.fetched);
    }

    state.fetching = function(model) {
      return (!model.fetched && model.started);
    }

    state.fetched = function(model) {
      return (model.balance && model.fetched && model.started);
    }

    state.nextAction = function (model) {
      if (state.started(model)) {
        actions.fetch({});
      }
    }

    state.render = function(model) {
      state.representation(model);
      state.nextAction(model);
    }

    var actions = {};

    actions.start = function(data, present) {
      present = present || model.present;
      data.started = true;
      console.log("Start called", data);
      present(data);
      return false;
    }

    actions.fetch = function(data, present) {
      present = present || model.present;
      microAjax('http://localhost:3000', function(res) {
        console.log(res);
        actions.receive(res, present);
      })
    }

    actions.receive = function(data, present) {
      present = present || model.present;
      var _data = {
        fetched: true,
        balance: 5
      }

      present(_data);
    }

    </script>
  </body>
</html>
	I inlined the code from microAjax there, to keep dependencies at 0. I think the following cite satisfies the license?

	https://code.google.com/archive/p/microajax/

	This code was referenced extensively:
	https://bitbucket.org/snippets/jdubray/9dgKp/sam-sample
	<html>
	<body>

	<div id="representation">
	<blockquote>Something went wrong. =/</blockquote>
	</div>

	<script type="text/javascript">
	function microAjax(B,A){this.bindFunction=function(E,D){return function(){return E.apply(D,[D])}};this.stateChange=function(D){if(this.request.readyState==4){this.callbackFunction(this.request.responseText)}};this.getRequest=function(){if(window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest()}}return false};this.postBody=(arguments[2]\|\|"");this.callbackFunction=A;this.url=B;this.request=this.getRequest();if(this.request){var C=this.request;C.onreadystatechange=this.bindFunction(this.stateChange,this);if(this.postBody!==""){C.open("POST",B,true);C.setRequestHeader("X-Requested-With","XMLHttpRequest");C.setRequestHeader("Content-type","application/x-www-form-urlencoded");C.setRequestHeader("Connection","close")}else{C.open("GET",B,true)}C.send(this.postBody)}};

	var model = {
	balance: null,
	started: false,
	fetched: false,
	errored: false
	}

	model.present = function(data) {
	console.log("Model asked to present: ", data);
	if (state.fetching(model)) {
	model.fetched = data.fetched \|\| false;
	model.balance = data.balance;
	} else {
	if (state.ready(model)) {
	model.started = data.started \|\| false;
	}
	}
	console.log('rendering model: ', model);
	state.render(model);
	}

	var view = {};

	view.init = function(model) {
	return view.ready(model);
	}

	view.ready = function(model) {
	return (
	"<p>Start action?</p>\n\
	<form onSubmit=\"JavaScript:return actions.start({});\">\n\
	<input type=\"submit\" value=\"Start\">\n\
	</form>"
	);
	}

	view.fetching = function(model) {
	return("<p>Fetching</p>")
	}

	view.fetched = function(model) {
	return("<p>Balance: $" + model.balance / 100 + "</p>")
	}

	view.display = function(representation) {
	var stateRepresentation = document.getElementById('representation');
	stateRepresentation.innerHTML = representation;
	}

	view.display(view.init(model));

	var state = { view: view };

	state.representation = function(model) {
	var representation = "Oops, invalid state";

	if (state.ready(model)) {
	representation = state.view.ready(model);
	}

	if (state.fetching(model)) {
	representation = state.view.fetching(model);
	}

	if (state.fetched(model)) {
	representation = state.view.fetched(model);
	}

	state.view.display(representation);
	}

	state.ready = function(model) {
	return (!model.fetched && !model.started);
	}

	state.started = function(model) {
	return (model.started && !model.errored && !model.fetched);
	}

	state.fetching = function(model) {
	return (!model.fetched && model.started);
	}

	state.fetched = function(model) {
	return (model.balance && model.fetched && model.started);
	}

	state.nextAction = function (model) {
	if (state.started(model)) {
	actions.fetch({});
	}
	}

	state.render = function(model) {
	state.representation(model);
	state.nextAction(model);
	}

	var actions = {};

	actions.start = function(data, present) {
	present = present \|\| model.present;
	data.started = true;
	console.log("Start called", data);
	present(data);
	return false;
	}

	actions.fetch = function(data, present) {
	present = present \|\| model.present;
	microAjax('http://localhost:3000', function(res) {
	console.log(res);
	actions.receive(res, present);
	})
	}

	actions.receive = function(data, present) {
	present = present \|\| model.present;
	var _data = {
	fetched: true,
	balance: 5
	}

	present(_data);
	}

	</script>
	</body>
	</html>