jonguenther/ajax.html

## ajax.html
<?php
?>

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Import jquery and Ajax script-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="ajax.js"></script>
  <!-- Bootstrap makes everything pretty <3 -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
</head>
<div class="container row">
  <div class="col mx-auto">
    <h1 style="text-align:center">
      Ajax-Test
    </h1>
      <textarea style="border:solid 4px lightgrey;width:100vw; height: 400px; overflow-y:auto; overflow-x: auto"id="out">

      </textarea>
    <button class="btn">
      Click me, Senpai!
    </button> <input class="input-group" placeholder="URL to Call" id="url" />
  </div>
</div>
</html>

## ajax.js
$(document).ready(function () {
    $('button').click(function () {
      //when button clicked, fetch ajax from provided url or get data from default(dflt)
      var dflt = "https://graph.facebook.com/16453004404_481759124404/comments?access_token=my_token&callback=?";
      var uri = $('#url').val() == "" ? dflt : $('#url').val();
      var request = $.ajax({
        url: uri,
        method: "GET", //changable to any Call method you want(e.g. POST/PUT/DELETE/...)
        data: {}, //wanna send some data? (e.g. when POSTING, can be omitted otherwise)
        headers: {}, //if API needs custom headers, define them here
        success: function (msg) {
          //this function is being called if the call was succesful
          console.log(msg);
        },
        error: function(e) {
          //this function is being called if any error occured (e.g. when server responds with any 4xx messsages)
          console.log(e);
        },
        dataType: "json" //only JSON works, everything else is being blocked by CORS! Read https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS for more information
      });
      request.done(function (msg) {
        //this function is being called when the Ajax request is done, no matter if succesful or not
        $('#out').html(JSON.stringify(msg, null, 2));
      });
    });
  });
	<?php
	?>

	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!-- Import jquery and Ajax script-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="ajax.js"></script>
	<!-- Bootstrap makes everything pretty <3 -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
	</head>
	<div class="container row">
	<div class="col mx-auto">
	<h1 style="text-align:center">
	Ajax-Test
	</h1>
	<textarea style="border:solid 4px lightgrey;width:100vw; height: 400px; overflow-y:auto; overflow-x: auto"id="out">

	</textarea>
	<button class="btn">
	Click me, Senpai!
	</button> <input class="input-group" placeholder="URL to Call" id="url" />
	</div>
	</div>
	</html>
	$(document).ready(function () {
	$('button').click(function () {
	//when button clicked, fetch ajax from provided url or get data from default(dflt)
	var dflt = "https://graph.facebook.com/16453004404_481759124404/comments?access_token=my_token&callback=?";
	var uri = $('#url').val() == "" ? dflt : $('#url').val();
	var request = $.ajax({
	url: uri,
	method: "GET", //changable to any Call method you want(e.g. POST/PUT/DELETE/...)
	data: {}, //wanna send some data? (e.g. when POSTING, can be omitted otherwise)
	headers: {}, //if API needs custom headers, define them here
	success: function (msg) {
	//this function is being called if the call was succesful
	console.log(msg);
	},
	error: function(e) {
	//this function is being called if any error occured (e.g. when server responds with any 4xx messsages)
	console.log(e);
	},
	dataType: "json" //only JSON works, everything else is being blocked by CORS! Read https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS for more information
	});
	request.done(function (msg) {
	//this function is being called when the Ajax request is done, no matter if succesful or not
	$('#out').html(JSON.stringify(msg, null, 2));
	});
	});
	});