ummahusla/ajax_request

## ajax_request
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://code.jquery.com/jquery-2.1.1.js">
</script>
    <script >
      $(function(){
        $('#btnSearch').click(function(){
          var searchTerm = $('#txtSearch').val() ;
          var stateObj = { searchTerm: searchTerm}
          window.history.pushState(stateObj,"title that is ignored","?eventid=1&text=" +searchTerm ); //third param is relative url change

        });

         $('#btnBack').click(function(){
           window.history.back();
         });

          $('#btnForward').click(function(){
            window.history.forward();
         });
      });

      window.onpopstate = function(e)
      {
        console.log("state changed");
        if (e.state && e.state.searchTerm) {
          alert(e.state.searchTerm);
          console.log("state is:" + searchTerm);
        }
      }
    </script>
  </head>

  <body>

  <label for="txtSearch"> Type a word to search for and click the search button</label>
   <input type="text" id="txtSearch"/>
   <input type="button" id="btnSearch" value="search"/>

   <p> After searching twice you can go back (to an empty state) and then forward again to the next state etc.
   If you ran this in a real browser you should see the page url change when pushing the state.</p>

   <div style="padding-top:10px;">
   <input type="button" id="btnBack" value="back"/>
   <input type="button" id="btnForward" value="forward"/>
   </div>
  </body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<link rel="stylesheet" href="style.css">
	<script src="http://code.jquery.com/jquery-2.1.1.js">
	</script>
	<script >
	$(function(){
	$('#btnSearch').click(function(){
	var searchTerm = $('#txtSearch').val() ;
	var stateObj = { searchTerm: searchTerm}
	window.history.pushState(stateObj,"title that is ignored","?eventid=1&text=" +searchTerm ); //third param is relative url change

	});

	$('#btnBack').click(function(){
	window.history.back();
	});

	$('#btnForward').click(function(){
	window.history.forward();
	});
	});

	window.onpopstate = function(e)
	{
	console.log("state changed");
	if (e.state && e.state.searchTerm) {
	alert(e.state.searchTerm);
	console.log("state is:" + searchTerm);
	}
	}
	</script>
	</head>

	<body>

	<label for="txtSearch"> Type a word to search for and click the search button</label>
	<input type="text" id="txtSearch"/>
	<input type="button" id="btnSearch" value="search"/>

	<p> After searching twice you can go back (to an empty state) and then forward again to the next state etc.
	If you ran this in a real browser you should see the page url change when pushing the state.</p>

	<div style="padding-top:10px;">
	<input type="button" id="btnBack" value="back"/>
	<input type="button" id="btnForward" value="forward"/>
	</div>
	</body>

	</html>