Skip to content

Commit 74d859c

Browse files
last-endcodelast-endcode
committed
update
1 parent 4378308 commit 74d859c

11 files changed

+199
-5
lines changed

‎AJAX/JSON_example.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>AJAX Tutorials</title>
7+
<style>
8+
body {
9+
text-align: center;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<h1>AJAX</h1>
15+
<button class="btn">Show Text</button>
16+
</body>
17+
<script src="./json_example.js"></script>
18+
</html>

‎AJAX/addBtn.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>AJAX Tutorials</title>
7+
<style>
8+
body {
9+
text-align: center;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<h1>AJAX</h1>
15+
<button class="btn">Show Text</button>
16+
</body>
17+
<script src="./addBtn.js"></script>
18+
</html>

‎AJAX/addBtn.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// AJAX
2+
3+
const btn = document.querySelector('.btn');
4+
5+
// construct xhr
6+
const xhr = new XMLHttpRequest();
7+
8+
// addEvent if clicked
9+
btn.addEventListener('click', () => {
10+
getData();
11+
});
12+
13+
function getData() {
14+
// method : get/post/put, url
15+
xhr.open('GET', './api/simple.txt');
16+
// callback jika setiap readyState changes
17+
xhr.onreadystatechange = function () {
18+
if (xhr.readyState === 4 && xhr.status === 200) {
19+
const text = document.createElement('p');
20+
text.textContent = xhr.responseText;
21+
// add to browser
22+
document.body.appendChild(text);
23+
} else {
24+
// if not
25+
console.log({
26+
status: xhr.status,
27+
readyState: xhr.readyState,
28+
});
29+
}
30+
};
31+
xhr.send(); // for request to server
32+
}
33+
34+
/* output:
35+
{status: 200, readyState: 2}
36+
{status: 200, readyState: 3}
37+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis cum, doloremque id suscipit vel voluptates tempora laudantium totam! Eveniet?
38+
39+
Jika error status : 404
40+
41+
*/

‎AJAX/api/person.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
[
2+
{ "name": "john", "job": "developer" },
3+
{ "name": "jane", "job": "designer" },
4+
{ "name": "peter", "job": "the boss" },
5+
{ "name": "kelly", "job": "HR" }
6+
]

‎AJAX/api/simple.txt

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis cum, doloremque id suscipit vel voluptates tempora laudantium totam! Eveniet?

‎AJAX/app.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// AJAX
2+
3+
// construct xhr
4+
const xhr = new XMLHttpRequest();
5+
// console.log(xhr); //readyState:0 , status:0
6+
7+
// method : get/post/put, url
8+
xhr.open('GET', './api/simple.txt');
9+
// callback jika setiap readyState changes
10+
xhr.onreadystatechange = function () {
11+
if (xhr.readyState === 4 && xhr.status === 200) {
12+
const text = document.createElement('p');
13+
text.textContent = xhr.responseText;
14+
// add to browser
15+
document.body.appendChild(text);
16+
} else {
17+
// if not
18+
console.log({
19+
status: xhr.status,
20+
readyState: xhr.readyState,
21+
});
22+
}
23+
};
24+
xhr.send(); // for request to server
25+
26+
/* output:
27+
{status: 200, readyState: 2}
28+
{status: 200, readyState: 3}
29+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis cum, doloremque id suscipit vel voluptates tempora laudantium totam! Eveniet?
30+
31+
Jika error status : 404
32+
33+
*/
34+
35+

‎AJAX/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>AJAX Tutorials</title>
7+
<style>
8+
body {
9+
text-align: center;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<h1>AJAX</h1>
15+
</body>
16+
<script src="./app.js"></script>
17+
</html>

‎AJAX/json_example.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
const btn = document.querySelector('.btn');
2+
const url = `./api/person.json`;
3+
4+
btn.addEventListener('click', () => {
5+
getData(url);
6+
});
7+
8+
function getData(url) {
9+
// construct xhr
10+
const xhr = new XMLHttpRequest();
11+
// method open get/post/put, url
12+
xhr.open('GET', url);
13+
// untuk perubahan readyState
14+
xhr.onreadystatechange = function () {
15+
if (xhr.readyState === 4 && xhr.status === 200) {
16+
// disini dia akan convert ke obj gunakan parse
17+
const data = JSON.parse(xhr.responseText);
18+
// get obj use map
19+
const displayData = data
20+
.map((item) => {
21+
return `<p>${item.name} As ${item.job}</p>`;
22+
})
23+
.join(' ');
24+
// buat element <div></div>
25+
const element = document.createElement('div');
26+
// isi element div dgn displayData
27+
element.innerHTML = displayData;
28+
// add to browser
29+
document.body.appendChild(element);
30+
} else {
31+
console.log({
32+
status: xhr.status,
33+
response: xhr.responseText,
34+
readyState: xhr.readyState,
35+
});
36+
}
37+
};
38+
xhr.send(); // for request to server
39+
}

‎modules/01_setup.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
// import file dari export ke sini
22
import { people, random } from './utils/data.js';
33
import showPeople from './utils/showPeople.js';
4+
import get from './utils/getElement.js';
45

5-
const container = document.querySelector('.container');
6-
const btn = document.querySelector('.btn');
6+
const container = get('.container');
7+
const btn = get('.btn');
78

89
// addEvent if clicked
910
btn.addEventListener('click', () => {

‎modules/utils/getElement.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function (selection) {
2+
const element = document.querySelector(selection);
3+
// if exist getElement if not false
4+
if (element) {
5+
return element;
6+
}
7+
throw Error(`Your element can't find ${selection}`);
8+
}

‎modules/utils/showPeople.js

+13-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,16 @@
1-
const showPeople = (people) => {
1+
// const showPeople = (people) => {
2+
// const newPeople = people
3+
// .map((person) => {
4+
// const { name, job } = person;
5+
// return `<p>${name.toUpperCase()} <strong>${job.toUpperCase()}</strong></p>`;
6+
// })
7+
// .join(' ');
8+
// return newPeople;
9+
// };
10+
11+
// export default showPeople;
12+
13+
export default (people) => {
214
const newPeople = people
315
.map((person) => {
416
const { name, job } = person;
@@ -7,5 +19,3 @@ const showPeople = (people) => {
719
.join(' ');
820
return newPeople;
921
};
10-
11-
export default showPeople;

0 commit comments

Comments
 (0)