Skip to content

Commit 1171b5b

Browse files
dinanathsj29dinanathsj29
authored
examples of chapter 3/4/5 uploaded
examples of chapter 3/4/5 uploaded
1 parent 52250fa commit 1171b5b

14 files changed

+522
-0
lines changed

‎_examples-ajax/3-ajax-live-demo/3.1-xhr-req-res-live.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>3.1-xhr-req-res-live.html</title>
9+
10+
<link type="text/css" rel="stylesheet" href="styles.css">
11+
<!-- Without async or defer , browser will run your script immediately, before rendering the elements that's below your script tag. -->
12+
<script type="text/javascript" src="3.1-xhr-req-res-live.js" defer></script>
13+
14+
</head>
15+
16+
<body>
17+
18+
<h1><center>3.1-xhr-req-res-live</center></h1>
19+
<section class="button-container">
20+
<button id="getButton" class="button">GET DATA</button>
21+
<button id="postButton" class="button">POST LOGIN DATA</button>
22+
</section>
23+
24+
</body>
25+
26+
</html>

‎_examples-ajax/3-ajax-live-demo/3.1-xhr-req-res-live.js

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
console.log('3.1-xhr-req-res-live.js loaded');
2+
3+
// get buttons from html/DOM
4+
const getButton = document.getElementById('getButton');
5+
const postButton = document.getElementById('postButton');
6+
7+
// define function to get data
8+
fn_getData = () => {
9+
console.log('getButton clicked - in fn_getData');
10+
11+
var xhr = new XMLHttpRequest();
12+
// use fake rest api `https://reqres.in/`, below url get list of users
13+
xhr.open('GET', 'https://reqres.in/api/users');
14+
15+
// convert XMLHttpRequest results to 'json' bydefault
16+
xhr.responseType = 'json';
17+
18+
xhr.onload = () => {
19+
let results = xhr.response;
20+
console.log('results:', results);
21+
22+
//convert string data to json/javascript object - ommit by using xhe.responseType = 'json'
23+
// const jsonData = JSON.parse(results);
24+
// console.log('jsonData:', jsonData);
25+
}
26+
27+
xhr.send();
28+
}
29+
30+
// define function to post/send data
31+
fn_postData = () => {
32+
console.log('postButton clicked - in fn_postData');
33+
34+
const postData = {
35+
"email": "eve.holt@reqres.in",
36+
"password": "pistol"
37+
};
38+
39+
var xhr = new XMLHttpRequest();
40+
// use fake rest api `https://reqres.in/`, below url get list of users
41+
xhr.open('POST', 'https://reqres.in/api/register');
42+
43+
// convert XMLHttpRequest results to 'json' bydefault
44+
// xhr.responseType = 'json';
45+
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
46+
47+
xhr.onload = function () {
48+
var results = JSON.parse(xhr.responseText);
49+
console.log(results);
50+
51+
};
52+
53+
xhr.send((JSON.stringify(postData)));
54+
}
55+
56+
// add event listener to button
57+
getButton.addEventListener('click', fn_getData);
58+
postButton.addEventListener('click', fn_postData);

‎_examples-ajax/3-ajax-live-demo/3.2-xhr-req-res-live-advanced.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>3.2-xhr-req-res-live-advanced.html</title>
9+
10+
<link type="text/css" rel="stylesheet" href="styles.css">
11+
<!-- Without async or defer , browser will run your script immediately, before rendering the elements that's below your script tag. -->
12+
<script type="text/javascript" src="3.2-xhr-req-res-live-advanced.js" defer></script>
13+
14+
</head>
15+
16+
<body>
17+
18+
<h1><center>3.2-xhr-req-res-live-advanced</center></h1>
19+
<section class="button-container">
20+
<button id="getButton" class="button">GET DATA</button>
21+
<button id="postButton" class="button">POST LOGIN DATA</button>
22+
</section>
23+
24+
<section class="user-container">
25+
<h1 class="user-name"></h1>
26+
<span class="user-email"></span> <br/> <br/>
27+
<img class="user-image" src=" " />
28+
</section>
29+
30+
</body>
31+
32+
</html>

‎_examples-ajax/3-ajax-live-demo/3.2-xhr-req-res-live-advanced.js

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
console.log('3.2-xhr-req-res-live-advanced.js loaded');
2+
3+
// get buttons from html/DOM
4+
const getButton = document.getElementById('getButton');
5+
const postButton = document.getElementById('postButton');
6+
7+
// common function to send receive http call
8+
const fn_sendhttpRequest = (httpMethod, httpUrl, data) => {
9+
// promise
10+
const httpPromise = new Promise((resolve, reject) => {
11+
12+
const xhr = new XMLHttpRequest();
13+
14+
// use fake rest api `https://reqres.in/`, below url get list of users
15+
xhr.open(httpMethod, httpUrl);
16+
17+
// convert XMLHttpRequest results to 'json' bydefault
18+
xhr.responseType = 'json';
19+
20+
if (data) {
21+
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
22+
}
23+
24+
xhr.onload = () => {
25+
if (xhr.status >= 400) {
26+
reject(xhr.response);
27+
} else {
28+
resolve(xhr.response);
29+
}
30+
}
31+
32+
xhr.onerror = () => {
33+
reject('Please verify...something went wrong!');
34+
}
35+
36+
xhr.send(JSON.stringify(data));
37+
38+
});
39+
40+
return httpPromise;
41+
42+
}
43+
44+
// define function to get data
45+
const fn_getData = () => {
46+
console.log('getButton clicked - in fn_getData');
47+
48+
fn_sendhttpRequest('GET', 'https://reqres.in/api/users').then(respenseResultData => {
49+
console.log('respenseResultData:', respenseResultData);
50+
document.getElementsByClassName('user-name')[0].innerHTML = respenseResultData.data[0].first_name + ' ' + respenseResultData.data[0].last_name;
51+
document.getElementsByClassName('user-email')[0].innerHTML = respenseResultData.data[0].email;
52+
document.getElementsByClassName('user-image')[0].src = respenseResultData.data[0].avatar;
53+
});
54+
55+
}
56+
57+
// define function to post/send data
58+
const fn_postData = () => {
59+
console.log('postButton clicked - in fn_postData');
60+
61+
const postLoginData = {
62+
"email": "eve.holt@reqres.in",
63+
"password": "pistol"
64+
};
65+
66+
fn_sendhttpRequest('POST', 'https://reqres.in/api/register', postLoginData).then(respenseResultData => {
67+
console.log('respenseResultData:', respenseResultData);
68+
}).catch(err => {
69+
console.log('errors: ', err);
70+
});
71+
72+
}
73+
74+
// add event listener to button
75+
getButton.addEventListener('click', fn_getData);
76+
postButton.addEventListener('click', fn_postData);

‎_examples-ajax/3-ajax-live-demo/styles.css

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/* 3.1. */
2+
.button-container {
3+
width: 80%;
4+
margin: 0 auto;
5+
text-align: center;
6+
border: 2px solid #e4e4e4;
7+
padding: 20px;
8+
}
9+
10+
.button {
11+
padding: 5px 15px;
12+
cursor: pointer;
13+
margin: 0px 5px;
14+
}
15+
16+
.button:hover {
17+
color:teal;
18+
}
19+
20+
/* 3.2. */

‎_examples-ajax/4-fetch-api-demo/4.2-fetch-api-advanced.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>4.2-fetch-api-advanced</title>
9+
10+
<link type="text/css" rel="stylesheet" href="styles.css">
11+
<!-- Without async or defer , browser will run your script immediately, before rendering the elements that's below your script tag. -->
12+
<script type="text/javascript" src="4.2-fetch-api-advanced.js" defer></script>
13+
14+
</head>
15+
16+
<body>
17+
18+
<h1><center>4.2-fetch-api-advanced</center></h1>
19+
<section class="button-container">
20+
<button id="getButton" class="button">GET DATA</button>
21+
<button id="postButton" class="button">POST LOGIN DATA</button>
22+
</section>
23+
24+
<section class="user-container">
25+
<h1 class="user-name"></h1>
26+
<span class="user-email"></span> <br/> <br/>
27+
<img class="user-image" src=" " />
28+
</section>
29+
30+
</body>
31+
32+
</html>

‎_examples-ajax/4-fetch-api-demo/4.2-fetch-api-advanced.js

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
console.log('4.2-fetch-api-advanced.js loaded');
2+
3+
// get buttons from html/DOM
4+
const getButton = document.getElementById('getButton');
5+
const postButton = document.getElementById('postButton');
6+
7+
// common function to send receive http call
8+
const fn_sendhttpRequest = (httpMethod, httpUrl, data) => {
9+
10+
return fetch(httpUrl, {
11+
method: httpMethod,
12+
body: JSON.stringify(data),
13+
headers: data ? {'Content-type': 'application/json'} : {}
14+
}).then(respenseResult => {
15+
console.log('respenseResult:', respenseResult);
16+
if (respenseResult.status >= 400) {
17+
return respenseResult.json().then(errResponseData => {
18+
const error = new Error('Please verify...something went wrong!');
19+
error.data = errResponseData;
20+
throw error;
21+
})
22+
}
23+
// to convert response body: ReadableStream to json
24+
return respenseResult.json();
25+
})
26+
27+
}
28+
29+
// define function to get data
30+
const fn_getData = () => {
31+
console.log('getButton clicked - in fn_getData');
32+
33+
fn_sendhttpRequest('GET', 'https://reqres.in/api/users')
34+
.then(respenseResultData => {
35+
console.log('respenseResultData:', respenseResultData);
36+
37+
document.getElementsByClassName('user-name')[0].innerHTML = respenseResultData.data[0].first_name + ' ' + respenseResultData.data[0].last_name;
38+
document.getElementsByClassName('user-email')[0].innerHTML = respenseResultData.data[0].email;
39+
document.getElementsByClassName('user-image')[0].src = respenseResultData.data[0].avatar;
40+
});
41+
42+
}
43+
44+
// define function to post/send data
45+
const fn_postData = () => {
46+
console.log('postButton clicked - in fn_postData');
47+
48+
const postLoginData = {
49+
email: "eve.holt@reqres.in",
50+
password: "pistol"
51+
};
52+
53+
fn_sendhttpRequest('POST', 'https://reqres.in/api/register', postLoginData)
54+
.then(respenseResultData => {
55+
console.log('respenseResultData:', respenseResultData);
56+
})
57+
.catch(err => {
58+
console.error('Request failed', err)
59+
})
60+
61+
}
62+
63+
// add event listener to button
64+
getButton.addEventListener('click', fn_getData);
65+
postButton.addEventListener('click', fn_postData);

‎_examples-ajax/4-fetch-api-demo/4.2-fetch-api.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>4.2-fetch-api</title>
9+
10+
<link type="text/css" rel="stylesheet" href="styles.css">
11+
<!-- Without async or defer , browser will run your script immediately, before rendering the elements that's below your script tag. -->
12+
<script type="text/javascript" src="4.2-fetch-api.js" defer></script>
13+
14+
</head>
15+
16+
<body>
17+
18+
<h1><center>4.2-fetch-api</center></h1>
19+
<section class="button-container">
20+
<button id="getButton" class="button">GET DATA</button>
21+
<button id="postButton" class="button">POST LOGIN DATA</button>
22+
</section>
23+
24+
<section class="user-container">
25+
<h1 class="user-name"></h1>
26+
<span class="user-email"></span> <br/> <br/>
27+
<img class="user-image" src=" " />
28+
</section>
29+
30+
</body>
31+
32+
</html>

0 commit comments

Comments
 (0)