ProfAvery/ajax-jquery.rb

## ajax-jquery.rb
#!/usr/bin/env ruby

require 'sinatra'
require 'redis'

configure do
  REDIS = Redis.new
end

get '/' do
  erb :index
end

get '/ajax.js' do
  content_type 'text/javascript'
  erb :ajaxjs
end

post '/' do
  key = params[:key]
  begin
    result = REDIS.get(key).inspect
  rescue => e
    result = e.to_s
  end
  result
end

__END__
@@index
<!DOCTYPE html>
<html>
  <head>
    <title>Redis values</title>
  </head>
  <body>
    <h1>Enter a Redis key:</h1>
    <form method="POST">
      <input id="key" type="text" name="key" />
      <input id="submit" type="submit" value="Go" />
    </form>
    <p>
      <span id="result"></span>
    </p>
    <script src="/jquery-1.7.2.js"></script>
    <script src="/ajax.js"></script>
  </body>
</html>

@@ajaxjs
$(document).ready(function () {
    $("#submit").click(function (e) {
        $.post(
            "/",
            { key: $("#key").val() },
            function (response) {
              $("#result").html("Result: " + response);
            }
        );
        e.preventDefault();
    });
});

## ajax.rb
#!/usr/bin/env ruby

require 'sinatra'
require 'redis'

configure do
  REDIS = Redis.new
end

get '/' do
  erb :index
end

get '/ajax.js' do
  content_type 'text/javascript'
  erb :ajaxjs
end

post '/' do
  key = params[:key]
  begin
    result = REDIS.get(key).inspect
  rescue => e
    result = e.to_s
  end
  result
end

__END__
@@index
<!DOCTYPE html>
<html>
  <head>
    <title>Redis values</title>
  </head>
  <body>
    <h1>Enter a Redis key:</h1>
    <form method="POST">
      <input id="key" type="text" name="key" size="50" />
      <input id="submit" type="submit" value="Go" />
    </form>
    <p>
      <span id="result"></span>
    </p>
    <script src="/ajax.js"></script>
  </body>
</html>

@@ajaxjs
var doGet = function (key) {
    var xhr = new XMLHttpRequest(),
        result = document.getElementById("result");

    xhr.open("POST", "/", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function () {
        var response, text, child;
        if (xhr.readyState !== 4) {
            return;
        }

        response = xhr.responseText;
        text = document.createTextNode("Result: " + response);
        child = result.firstChild;
        if (result.firstChild === null) {
          result.appendChild(text);
        } else {
          result.replaceChild(text, child);
        }
    };
    xhr.send("key=" + key);
}

window.onload = function () {
  var submit = document.getElementById("submit"),
      key = document.getElementById("key");

  submit.onclick = function () {
      doGet(key.value);
      return false;
  };
};

## non-ajax.rb
#!/usr/bin/env ruby

require 'sinatra'
require 'redis'

configure do
  REDIS = Redis.new
end

get '/' do
  erb :index
end

post '/' do
  key = params[:key]
  begin
    @result = REDIS.get(key).inspect
  rescue => e
    @result = e
  end
  erb :index
end

__END__
@@index
<!DOCTYPE html>
<html>
  <head>
    <title>Redis values</title>
  </head>
  <body>
    <h1>Enter a Redis key:</h1>
    <form method="POST">
      <input type="text" name="key" size="50" />
      <input type="submit" value="Go" />
    </form>
    <% if @result %>
      <p>
        Result: <%= @result %>
      </p>
    <% end %>
  </body>
</html>
	#!/usr/bin/env ruby

	require 'sinatra'
	require 'redis'

	configure do
	REDIS = Redis.new
	end

	get '/' do
	erb :index
	end

	get '/ajax.js' do
	content_type 'text/javascript'
	erb :ajaxjs
	end

	post '/' do
	key = params[:key]
	begin
	result = REDIS.get(key).inspect
	rescue => e
	result = e.to_s
	end
	result
	end

	__END__
	@@index
	<!DOCTYPE html>
	<html>
	<head>
	<title>Redis values</title>
	</head>
	<body>
	<h1>Enter a Redis key:</h1>
	<form method="POST">
	<input id="key" type="text" name="key" />
	<input id="submit" type="submit" value="Go" />
	</form>
	<p>
	<span id="result"></span>
	</p>
	<script src="/jquery-1.7.2.js"></script>
	<script src="/ajax.js"></script>
	</body>
	</html>

	@@ajaxjs
	$(document).ready(function () {
	$("#submit").click(function (e) {
	$.post(
	"/",
	{ key: $("#key").val() },
	function (response) {
	$("#result").html("Result: " + response);
	}
	);
	e.preventDefault();
	});
	});