New course updates learn AJAX
AJAX requests with JavaScript coding examples
Explore AJAX and how you can use AJAX to connect to web API endpoints and get Data.
Load JSON data from external sources with JavaScript.
XHR object and modern JavaScript fetch to make requests
Example of how AJAX can be used to update page content from server request responses.
Load JSON data from external web APIs and also from local files
How to output the contents of your JSON file into your webpage.
Using JavaScript to create, update and remove page elements with code.
Create interaction with your elements using event listeners.
Create interactive web pages with JavaScript.
How to set up WebDev Environment for coding
Setup IDE
https://code.visualstudio.com/
Setup in the extensions Live Server
Create a workspace folder to use, create an index.html file and a js file.
Load a text file as HTML code into a web page with AJAX
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Course</title>
</head>
<body>
<div class=”container”>Hello</div>
<button>Click</button>
<script src=”app.js”></script>
</body>
</html>
const btn = document.querySelector(‘button’);
const main = document.querySelector(‘.container’);
const url = ‘data.txt’;
//console.log(btn);
btn.onclick = reqData;
//btn.onclick = () => { console.log(‘clicked’);}
function output(data) {
console.log(data);
console.log(this.responseText);
main.innerHTML = this.responseText;
}
function reqData() {
const xhr = new XMLHttpRequest();
xhr.addEventListener(‘load’, output);
xhr.open(‘GET’, url);
xhr.send();
console.log(xhr);
}
<h1>Laurence Svekis 2</h1>
<div>Hello World</div>
ReadyState 0-4 for xHR object
| 0 | XHR has been created but not called yet |
| 1 | XHR open() has been called |
| 2 | XHR send() has been called, headers and status available |
| 3 | Loading in progress Connecting to endpoint returning responseText partial data |
| 4 | Done responseText is loaded and ready to use |
const btn = document.querySelector(‘button’);
const main = document.querySelector(‘.container’);
const url = ‘data.txt’;
btn.onclick = () => {
const xhr = new XMLHttpRequest();
xhr.onload = () => main.innerHTML = xhr.responseText;
xhr.open(‘GET’, url);
xhr.send(null);
};
function reqData() {
console.log(‘click’);
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
console.log(`RS : ${this.readyState}`);
console.log(this.responseText);
console.log(this.status);
if (this.readyState == 4) {
console.log(`Done ${this.responseText}`);
}
}
console.log(xhr.readyState);
xhr.onprogress = function () {
console.log(`Progress : ${this.readyState}`);
console.log(this.responseText);
}
xhr.onload = function () {
console.log(`Done : ${this.readyState}`);
console.log(this.responseText);
}
xhr.open(‘GET’, url);
xhr.send(null);
}
Get JSON data with xHR request AJAX
const btn = document.querySelector(‘button’);
const main = document.querySelector(‘.container’);
const url = ‘data.json’;
btn.onclick = () => {
const xhr = new XMLHttpRequest();
xhr.onload = () => {
console.log(xhr.responseText);
const data = JSON.parse(xhr.responseText);
outputData(data);
}
xhr.open(‘GET’, url);
xhr.send();
};
function outputData(vals) {
main.innerHTML = ”;
vals.forEach((ele, ind) => {
console.log(ele.first, ele.last);
const div = document.createElement(‘div’);
main.append(div);
//div.style.color = ‘red’;
div.innerHTML = `${ind+1}. ${ele.first} ${ele.last}`;
})
}
function outputData1(vals) {
let html = ”;
vals.forEach((ele, ind) => {
console.log(ele.first, ele.last);
html += `<div>${ele.first} ${ele.last}</div>`;
})
main.innerHTML = html;
}
const data1 = [{
“first”: “Laurence”,
“last”: “Svekis”
},
{
“first”: “John”,
“last”: “Smith”
},
{
“first”: “Jane”,
“last”: “Doe”
}
];
[{
“first”: “Laurence”,
“last”: “Svekis”
},
{
“first”: “John”,
“last”: “Smith”
},
{
“first”: “Jane”,
“last”: “Doe”
}
]
xHR GET and POST with Data from input field
XHR Post requests with JavaScript Send Data body
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Course</title>
</head>
<body>
<div class=”container”></div>
<input type=”text” name=”val” value=”Laurence Svekis”>
<button id=”btn1″>GET</button>
<button id=”btn2″>POST</button>
<script src=”app.js”></script>
</body>
</html>
const btn1 = document.querySelector(‘#btn1’);
const btn2 = document.querySelector(‘#btn2’);
const myInput = document.querySelector(‘input[name=”val”]’);
const main = document.querySelector(‘.container’);
const url1 = ‘https://httpbin.org/get’;
const url2 = ‘https://httpbin.org/post’;
btn1.onclick = () => {
const xhr = new XMLHttpRequest();
const val = myInput.value;
xhr.onload = () => {
const data = JSON.parse(xhr.responseText);
main.textContent = (data.args.val);
}
xhr.open(‘GET’, url1 + ‘?val=’ + val);
xhr.send();
};
btn2.onclick = () => {
const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append(‘val’, myInput.value);
formData.append(‘id’, 2000);
const val = myInput.value;
xhr.onload = () => {
const data = JSON.parse(xhr.responseText);
console.log(data.form.val);
main.textContent = data.form.val;
}
xhr.open(‘POST’, url2);
xhr.send(formData);
};
Modern JavaScript Fetch Requests AJAX Code
const btn1 = document.querySelector(‘#btn1’);
const btn2 = document.querySelector(‘#btn2’);
const myInput = document.querySelector(‘input[name=”val”]’);
const main = document.querySelector(‘.container’);
const url1 = ‘https://httpbin.org/get’;
const url2 = ‘https://httpbin.org/post’;
const holder = [];
btn1.onclick = () => {
const val = myInput.value;
const url = `${url1}?val=${val}`;
fetch(url)
.then((response) => response.json())
.then((data) => {
//console.log(JSON.parse(data));
adder(‘GET ‘ + data.args.val);
})
}
btn2.onclick = () => {
const val = myInput.value;
const fd = new FormData();
fd.append(‘val’, val);
fd.append(‘id’, 1);
const myObj = {
val: val,
id: 500
};
fetch(url2, {
method: ‘POST’,
body: JSON.stringify(myObj)
})
.then((response) => response.json())
.then((data) => {
console.log(data.json.val);
adder(‘POST ‘ + data.json.val);
})
}
function adder(html) {
holder.push(html);
const div = document.createElement(‘div’);
div.innerHTML = `${holder.length}. ${html}`;
main.append(div);
}
JavaScript AJAX connect to local JSON file contents
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Course</title>
</head>
<body>
<div class=”container”></div>
<button id=”btn”>Click Me!</button>
<script src=”app.js”></script>
</body>
</html>
const btn = document.querySelector(‘#btn’);
const main = document.querySelector(‘.container’);
const url = ‘data.json’;
btn.addEventListener(‘click’, reqData);
function reqData() {
fetch(url)
.then(res => res.json())
.then(data => adder(data))
.catch((error) => {
console.error(error);
})
}
function adder(data) {
console.log(data);
const ul = document.createElement(‘ul’);
main.append(ul);
data.forEach((ele, ind) => {
console.log(ele);
const li = document.createElement(‘li’);
li.textContent = `${ind+1}. ${ele.first} ${ele.last}`;
ul.append(li);
})
}
[{
“first”: “Laurence”,
“last”: “Svekis”
},
{
“first”: “John”,
“last”: “Smith”
},
{
“first”: “Jane”,
“last”: “Doe”
}
]
Practice AJAX Testing endpoint get JSON data from Random User API
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Course</title>
</head>
<body>
<div class=”container”></div>
<button id=”btn”>Click Me!</button>
<script src=”app.js”></script>
</body>
</html>
const btn = document.querySelector(‘#btn’);
const main = document.querySelector(‘.container’);
const results = 5;
let url = ‘https://randomuser.me/api’;
if (results > 1) {
url += `?results=${results}`;
}
//main.textContent = url;
btn.addEventListener(‘click’, makeData);
function makeData() {
fetch(url)
.then(res => res.json())
.then(data => adder(data));
}
function adder(data) {
//console.log(data.results);
data.results.forEach(p => {
const holder = createEle(‘div’, main, ”);
holder.style.border = ‘1px solid #ddd’;
holder.style.padding = ’10px’;
holder.style.width = ‘150px’;
holder.style.display = ‘inline-block’;
holder.style.overflow = ‘hidden’;
if (p.id.name != ”) {
console.log(p.id.name);
const idEle = createEle(‘div’, holder, `${p.id.name} ${p.id.value}`);
}
const pic = createEle(‘img’, holder, ”);
pic.src = p.picture.large;
const emailEle = createEle(‘div’, holder, `Email : ${p.email}`);
const nEle = createEle(‘div’, holder, `Name : ${p.name.title} ${p.name.first} ${p.name.last}`);
console.log(p);
})
}
function createEle(t, parent, html) {
const ele = document.createElement(t);
ele.innerHTML = html;
return parent.appendChild(ele);
}
JavaScript AJAX Quiz Game from JSON data
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Course</title>
<style>
* {
box-sizing: border-box;
}
.next {
display: block;
margin: auto;
margin-top: 30px;
width: 100px;
}
.message {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.game {
margin: 10px;
padding: 10px;
background-color: #eee;
}
.question {
font-family: cursive;
font-size: 1.2em;
padding: 5px;
margin: 3px;
}
.opts button {
margin: 3px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-transform: capitalize;
padding: 3px;
color: white;
background-color: black;
min-width: 90px;
}
.container {
width: 90vw;
margin: auto;
border: 1px solid #ddd;
}
#btn {
display: block;
padding: 10px;
font-size: 2em;
margin: auto;
}
</style>
</head>
<body>
<div class=”container”></div>
<button id=”btn”>Start</button>
<script src=”app.js”></script>
</body>
</html>
const btn = document.querySelector(‘#btn’);
const main = document.querySelector(‘.container’);
const message = pageEles(main, ‘div’, ‘Press Start button’, ‘message’);
const output = pageEles(main, ‘div’, ”, ‘game’);
const url = ‘quiz.json’;
const game = {
score: 0
};
btn.onclick = loadData;
function loadData() {
btn.style.display = ‘none’;
fetch(url)
.then(res => res.json())
.then(data => {
const temp = {
total: data.length,
q: data,
counter: 0
};
createQuestion(temp);
})
}
function createQuestion(data) {
const el = pageEles(output, ‘div’, ”, ‘question’);
if (data.q.length == 0) {
message.innerHTML = `<h1>Game Over</h1><div>You scored ${game.score} correct out of ${data.total} questions.`;
} else {
const tBtn = pageEles(el, ‘button’, ‘Next’, ‘next’);
tBtn.onclick = () => {
el.remove();
createQuestion(data);
}
const question = data.q.shift();
data.counter++;
message.textContent = `Question ${data.counter} of ${data.total} `;
if (data.q.length == 0) tBtn.textContent = ‘End Game’;
tBtn.style.display = ‘none’;
outputQuestion(question, el, tBtn);
}
}
function outputQuestion(question, parent, tBtn) {
console.log(question);
const que = pageEles(parent, ‘div’, `${question.question}?`, ‘question’);
const arr = question.opt;
arr.push(question.answer);
arr.sort(() => {
return Math.random() – 0.5;
})
const btns = pageEles(parent, ‘div’, ”, ‘opts’);
arr.forEach(e => {
const optemp = pageEles(btns, ‘button’, e, ‘btns’);
optemp.onclick = () => {
if (question.answer == e) {
message.textContent = ‘Correct’;
game.score++;
} else {
message.textContent = ‘Incorrect’;
}
const temps = parent.querySelectorAll(‘.btns’);
temps.forEach(el => {
el.disabled = true;
const bgc = (question.answer == el.textContent) ? ‘green’ : ‘red’;
el.style.backgroundColor = bgc;
})
tBtn.style.display = ‘block’;
parent.append(tBtn);
}
})
console.log(arr);
}
function pageEles(parent, t, html, c) {
const ele = document.createElement(t);
ele.innerHTML = html;
ele.classList.add(c);
return parent.appendChild(ele);
}
[{
“question”: “What color is the grass”,
“answer”: “green”,
“opt”: [
“red”, “yellow”, “pink”
]
}, {
“question”: “What are you learning in this course”,
“answer”: “JavaScript”,
“opt”: [
“HTML”, “CSS”, “Java”
]
}, {
“question”: “Do you like this course”,
“answer”: “Yes”,
“opt”: [
“No”
]
}]