Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7332ee4

Browse files
All souce coode of Advance JavaScript.Which i learn from Thapa Technical Yt channel
0 parents commit 7332ee4

File tree

6 files changed

+1378
-0
lines changed

6 files changed

+1378
-0
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎Usman.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
"i am muhammad usman practing AJAX from code with Harray"

‎adnvacejs.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>ADvance Javascript</title>
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
9+
</head>
10+
<body>
11+
<h1>advance JS</h1>
12+
<div id="google_translate_element"></div>
13+
<h1>Heading </h1>
14+
<h3>I am Muhammad usman</h3>
15+
<h3>How are you</h3>
16+
<div class="container" id="content">
17+
<h1>Employee List</h1>
18+
<button type="button" id="FetchBtn" class="btn btn-primary">Fetch Data</button>
19+
<button type="button" id="backupBtn" class="btn btn-secondary">Back UP</button>
20+
21+
</div>
22+
23+
24+
25+
26+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
27+
<script type="text/javascript">
28+
function googleTranslateElementInit() {
29+
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
30+
}
31+
</script>
32+
33+
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
34+
<script src="./js/advance.js"></script>
35+
</body>
36+
</html>

‎ajax.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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">
6+
7+
<!-- bootsrtap CSS -->
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
9+
<title>AJAX</title>
10+
</head>
11+
<body>
12+
<h1>AJAX</h1>
13+
14+
<button type="button" id="FetchBtn" class="btn btn-primary">Fetch Data</button>
15+
<button type="button" id="backupBtn" class="btn btn-secondary">Back UP</button>
16+
<div class="container">
17+
<h1>Employee List</h1>
18+
<ul id="list"></ul>
19+
20+
</div>
21+
22+
23+
24+
25+
26+
<!-- custom js -->
27+
<script src="./ajax.js"></script>
28+
<!-- botstrap JS -->
29+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
30+
</body>
31+
</html>

‎ajax.js‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
console.log(`HLo File testing`);
2+
3+
const fetchBtn=document.querySelector('#FetchBtn');
4+
5+
fetchBtn.addEventListener('click',Btnevet)
6+
7+
function Btnevet(){
8+
console.log(`Button is clicked`);
9+
10+
// Initiate the Object
11+
12+
let xhr=new XMLHttpRequest();
13+
14+
// open object
15+
16+
// GET REquest
17+
// xhr.open('GET','https://jsonplaceholder.typicode.com/todos/1',true)
18+
// xhr.open('GET','Usman.txt',true)
19+
20+
// use This for POST Request
21+
xhr.open('POST','https://dummy.restapiexample.com/api/v1/create',true)
22+
xhr.getResponseHeader('Content_tpye','application/JSON');
23+
24+
// what to do on progress (OPtional)
25+
xhr.onprogress=()=>{
26+
console.log(`This is on Progress`);
27+
}
28+
29+
// what to do on load
30+
31+
xhr.onload=function(){
32+
if(this.status===200){
33+
console.log(this.responseText);
34+
}
35+
else{
36+
console.log("Error occured");
37+
}
38+
}
39+
40+
// on ready state
41+
42+
xhr.onreadystatechange=function(){
43+
console.log("ready state is", xhr.readyState);
44+
}
45+
46+
// send the request
47+
48+
// for POST Request
49+
prms=`{"name":"test","salary":"123","age":"23"}`
50+
51+
52+
xhr.send(prms);
53+
54+
// for Get Request
55+
// xhr.send();
56+
57+
58+
console.log(`The Process is completed`);
59+
60+
}
61+
62+
const popBtn=document.querySelector('#backupBtn');
63+
64+
popBtn.addEventListener('click',popevent)
65+
66+
function popevent(){
67+
console.log(`Back up Button is clicked`);
68+
69+
// Initiate the Object
70+
71+
let xhr=new XMLHttpRequest();
72+
73+
// open object
74+
75+
// GET REquest
76+
xhr.open('GET','https://dummy.restapiexample.com/api/v1/employees',true)
77+
78+
// what to do on progress (OPtional)
79+
xhr.onprogress=()=>{
80+
console.log(`This is on Progress`);
81+
}
82+
83+
// what to do on load
84+
85+
xhr.onload=function(){
86+
if(this.status===200){
87+
let obj=JSON.parse(this.responseText);
88+
console.log(obj);
89+
let list=document.querySelector("#list");
90+
str="";
91+
for(key in obj){
92+
str+="<li>"+obj[key]+"</li>"
93+
}
94+
list.innerHTML=str;
95+
}
96+
else{
97+
console.log("Error occured");
98+
}
99+
}
100+
101+
// on ready state
102+
103+
// xhr.onreadystatechange=function(){
104+
// console.log("ready state is", xhr.readyState);
105+
// }
106+
107+
// send the request
108+
109+
// for Get Request
110+
xhr.send();
111+
112+
113+
console.log(`we get the data of ALL employees`);
114+
115+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /