caedes/index.html

## index.html
<!doctype html>
<html>
  <head>
    <style>
      form {
        padding: 10px;
      }

      input, button, textarea {
        display: block;
        color: #333;
        margin-bottom: 20px;
        border: 1px solid #BBB;
      }

      input {
        width: 600px;
        height: 40px;
        font-size: 1.8em;
        padding: 5px;
      }

      button {
        width: 120px;
        height: 50px;
        border-radius: 5px;
        color: #535353;
        background-image: linear-gradient(to bottom, #eee, #ddd);
        font-size: 1.5em;
        font-weight: bold;
      }

      textarea {
        width: 600px;
        height: 400px;
        font-size: 1.2em;
        padding: 5px;
      }
    </style>
    <script type="text/javascript">
      function createCORSRequest(method, url) {
        var xhr = new XMLHttpRequest();
        if ('withCredentials' in xhr) {
          xhr.open(method, url, true);
        } else if (typeof XDomainRequest != 'undefined') {
          xhr = new XDomainRequest();
          xhr.open(method, url);
        } else {
          xhr = null;
        }
        return xhr;
      }

      window.addEventListener('load', function() {
        var $submit = document.getElementById('submit');
        var $api_uri = document.getElementById('api_uri');
        var $result = document.getElementById('result');

        $submit.addEventListener('click', function(event){
          event.preventDefault();

          var xhr = createCORSRequest('GET', encodeURI($api_uri.value));
          xhr.onload = function(event) {
            $result.value = xhr.response;
          };
          xhr.send();
        });

        $api_uri.focus();
      });
    </script>
  </head>

  <body>
    <form>
      <input type="url" id="api_uri" value="http://" />
      <button id="submit">Submit</button>
      <textarea id="result"></textarea>
    </form>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<style>
	form {
	padding: 10px;
	}

	input, button, textarea {
	display: block;
	color: #333;
	margin-bottom: 20px;
	border: 1px solid #BBB;
	}

	input {
	width: 600px;
	height: 40px;
	font-size: 1.8em;
	padding: 5px;
	}

	button {
	width: 120px;
	height: 50px;
	border-radius: 5px;
	color: #535353;
	background-image: linear-gradient(to bottom, #eee, #ddd);
	font-size: 1.5em;
	font-weight: bold;
	}

	textarea {
	width: 600px;
	height: 400px;
	font-size: 1.2em;
	padding: 5px;
	}
	</style>
	<script type="text/javascript">
	function createCORSRequest(method, url) {
	var xhr = new XMLHttpRequest();
	if ('withCredentials' in xhr) {
	xhr.open(method, url, true);
	} else if (typeof XDomainRequest != 'undefined') {
	xhr = new XDomainRequest();
	xhr.open(method, url);
	} else {
	xhr = null;
	}
	return xhr;
	}

	window.addEventListener('load', function() {
	var $submit = document.getElementById('submit');
	var $api_uri = document.getElementById('api_uri');
	var $result = document.getElementById('result');

	$submit.addEventListener('click', function(event){
	event.preventDefault();

	var xhr = createCORSRequest('GET', encodeURI($api_uri.value));
	xhr.onload = function(event) {
	$result.value = xhr.response;
	};
	xhr.send();
	});

	$api_uri.focus();
	});
	</script>
	</head>

	<body>
	<form>
	<input type="url" id="api_uri" value="http://" />
	<button id="submit">Submit</button>
	<textarea id="result"></textarea>
	</form>
	</body>
	</html>