caedes
7/1/2015 - 2:06 PM

Light Postman in 81 LOC

Light Postman in 81 LOC

index.html
content_copyfile_download
<!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>