Skip to content

Instantly share code, notes, and snippets.

@wahyusa

wahyusa/get-json.html

Last active September 2, 2020 05:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wahyusa/63c2f19fc1bf9b02c0613a94c095a63b to your computer and use it in GitHub Desktop.
Save wahyusa/63c2f19fc1bf9b02c0613a94c095a63b to your computer and use it in GitHub Desktop.
Download ZIP
Basic Pure Plain Ajax Request Example to Get Data From Github API (Read Json Data Through Pure Plain Ajax)
Raw
get-json.html
<!DOCTYPE html>
<html>
<body>
<form action="" method="GET">
<button id="btn">Get Data</button>
</form>
<pre id="result"></pre>
<span id="json_selected" style="background:yellow;color:red;font-weight:bold"></span>
<script>
const btn = document.querySelector("#btn");
btn.onclick = function () {
event.preventDefault();
var fulltext_result = document.querySelector("#result");
var json_selected = document.querySelector("#json_selected");
var machine = new XMLHttpRequest();
machine.open("GET", "https://api.github.com/users/wahyusa", true);
machine.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
// response by text
var textonly = this.responseText;
fulltext_result.innerHTML = textonly;
// get data from json
var response = JSON.parse(this.responseText);
// get github url
var github_url = response.html_url;
// get username
var username = response.login;
json_selected.innerHTML = "User : "+username+"<br>URL : "+github_url;
}
};
machine.send();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment