Skip to content

Instantly share code, notes, and snippets.

@DeoThemes

DeoThemes/AJAX GET practice

Last active November 11, 2017 05:02
Show Gist options
  • Save DeoThemes/49f63cb29f9a9ddff0adccbb3ca57ba6 to your computer and use it in GitHub Desktop.
Save DeoThemes/49f63cb29f9a9ddff0adccbb3ca57ba6 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin// source http://jsbin.com/xevukep
Raw
AJAX GET practice
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="posts"></div>
<script id="jsbin-javascript">
var request = new XMLHttpRequest();
var method = "GET";
var url = "https://jsonplaceholder.typicode.com/users";
var postsContainer = document.querySelector("#posts");
request.open(method, url);
request.onreadystatechange = function() {
if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
var data = JSON.parse(request.responseText);
printOutput(data);
} else if (request.readyState === XMLHttpRequest.DONE && request.status !== 200) {
console.log("Request failed!");
}
}
request.send();
function printOutput(data) {
var htmlString = "";
htmlString += "<ul>";
for (var i = 0; i < data.length; i++) {
htmlString += "<li>" + data[i].name + "</li>";
}
htmlString += "</ul>";
postsContainer.innerHTML = htmlString;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var request = new XMLHttpRequest();
var method = "GET";
var url = "https://jsonplaceholder.typicode.com/users";
var postsContainer = document.querySelector("#posts");
request.open(method, url);
request.onreadystatechange = function() {
if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
var data = JSON.parse(request.responseText);
printOutput(data);
} else if (request.readyState === XMLHttpRequest.DONE && request.status !== 200) {
console.log("Request failed!");
}
}
request.send();
function printOutput(data) {
var htmlString = "";
htmlString += "<ul>";
for (var i = 0; i < data.length; i++) {
htmlString += "<li>" + data[i].name + "</li>";
}
htmlString += "</ul>";
postsContainer.innerHTML = htmlString;
}</script></body>
</html>
Raw
jsbin.xevukep.js
var request = new XMLHttpRequest();
var method = "GET";
var url = "https://jsonplaceholder.typicode.com/users";
var postsContainer = document.querySelector("#posts");
request.open(method, url);
request.onreadystatechange = function() {
if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
var data = JSON.parse(request.responseText);
printOutput(data);
} else if (request.readyState === XMLHttpRequest.DONE && request.status !== 200) {
console.log("Request failed!");
}
}
request.send();
function printOutput(data) {
var htmlString = "";
htmlString += "<ul>";
for (var i = 0; i < data.length; i++) {
htmlString += "<li>" + data[i].name + "</li>";
}
htmlString += "</ul>";
postsContainer.innerHTML = htmlString;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment