Skip to content

Commit e318489

Browse files
SonicTheCatSonicTheCat
committed
AJAX LAB
1 parent d57777f commit e318489

File tree

8 files changed

+207
-0
lines changed

8 files changed

+207
-0
lines changed

‎02.AJAX Lab/01.XHR.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>XmlHttpRequest Example</title>
6+
</head>
7+
<body>
8+
<button onclick="loadRepos()">Load Repos</button>
9+
<div id="res"></div>
10+
<script>
11+
function loadRepos() {
12+
let req = new XMLHttpRequest();
13+
req.onreadystatechange = function () {
14+
if (req.readyState == 4 && req.status == 200) {
15+
document.getElementById("res").textContent = req.responseText;
16+
}
17+
};
18+
req.open("GET", "https://api.github.com/users/testnakov/repos", true);
19+
req.send();
20+
}
21+
</script>
22+
</body>
23+
</html>

‎02.AJAX Lab/02.AJAXLoad.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>AJAX Load Example</title>
6+
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
7+
<script defer src="02.AJAXLoad.js"></script>
8+
</head>
9+
<body>
10+
<div id="text">
11+
<h1>AJAX jQuery.load()</h1>
12+
<button onclick="loadTitle()">Load Title</button>
13+
</div>
14+
</body>
15+
</html>

‎02.AJAX Lab/02.AJAXLoad.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
function loadTitle() {
2+
$("#text").load("text.html");
3+
}

‎02.AJAX Lab/03.01.GithubRepos.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>GitHub Repos</title>
6+
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
7+
</head>
8+
<body>
9+
GitHub username:
10+
<input type="text" id="username" value="k1r1L"/>
11+
<button onclick="loadRepos()">Load Repos</button>
12+
<ul id="repos">
13+
<li>
14+
<a href="{repo.html_url}">
15+
{repo.full_name}
16+
</a>
17+
</li>
18+
</ul>
19+
<script>
20+
function loadRepos() {
21+
$("#repos").empty();
22+
let url = "https://api.github.com/users/" +
23+
$("#username").val() + "/repos";
24+
$.ajax({
25+
url,
26+
success: displayRepos,
27+
error: displayError
28+
});
29+
30+
function displayRepos(repos) {
31+
for (let repo of repos) {
32+
let link = $("<a>").text(repo.full_name);
33+
link.attr("href", repo.html_url);
34+
$("#repos").append($("<li>").append(link))
35+
}
36+
}
37+
38+
function displayError(err) {
39+
$("#repos").append($("<li>Error</li>"))
40+
}
41+
}
42+
</script>
43+
</body>
44+
</html>

‎02.AJAX Lab/03.02.GithubRepos.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>GitHub Repos</title>
6+
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
7+
</head>
8+
<body>
9+
GitHub username:
10+
<input type="text" id="username" value="k1r1L" />
11+
<button onclick="loadRepos()">Load Repos</button>
12+
<ul id="repos">
13+
<li>
14+
<a href="{repo.html_url}">
15+
{repo.full_name}
16+
</a>
17+
</li>
18+
</ul>
19+
<script>
20+
function loadRepos() {
21+
$("#repos").empty();
22+
let username = $("#username").val();
23+
let url = `https://api.github.com/users/${username}/repos`;
24+
let request = {
25+
url: url,
26+
method: "GET"
27+
};
28+
$.ajax(request)
29+
.then(function(repos){
30+
for (let repo of repos) {
31+
let link = $("<a>").text(repo.full_name);
32+
link.attr("href", repo.html_url);
33+
$("#repos").append($("<li>").append(link))
34+
}
35+
}).catch(function(err){
36+
console.log(err)
37+
$("#repos").append($("<li>Error</li>"))
38+
});
39+
}
40+
</script>
41+
</body>
42+
</html>

‎02.AJAX Lab/phonebook/app.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
$(() => {
2+
let list = $("#phonebook");
3+
let baseUrl = "https://phonebook-app-18bb4.firebaseio.com/phonebook";
4+
let name = $("#person");
5+
let phone = $("#phone");
6+
loadContacts();
7+
8+
function loadContacts() {
9+
list.empty();
10+
let request = {
11+
url: baseUrl + ".json",
12+
method: "GET",
13+
success: successFunc,
14+
error: handleError
15+
};
16+
$.ajax(request);
17+
}
18+
19+
$("#btnCreate").click(createElement);
20+
21+
function createElement() {
22+
let contact = {name: name.val(), phone: phone.val()};
23+
if (name.val().length === 0 || phone.val().length === 0) {
24+
return;
25+
}
26+
let request = {
27+
url: baseUrl + ".json",
28+
method: "POST",
29+
data: JSON.stringify(contact),
30+
success: loadContacts,
31+
error: handleError
32+
};
33+
$.ajax(request);
34+
name.val("");
35+
phone.val("");
36+
}
37+
38+
function successFunc(contacts) {
39+
for (let user in contacts) {
40+
list.append($(`<li>${contacts[user].name}: ${contacts[user].phone}</li>`)
41+
.append($("<button id='dltBtn'>Delete</button>").click(() => deleteContact(user))));
42+
}
43+
}
44+
45+
function handleError(err) {
46+
console.log(err)
47+
}
48+
49+
function deleteContact(id) {
50+
let req = {
51+
url: `${baseUrl}/${id}.json`,
52+
method: "DELETE",
53+
success: loadContacts,
54+
error: handleError
55+
};
56+
$.ajax(req);
57+
}
58+
});
59+

‎02.AJAX Lab/phonebook/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Phonebook</title>
6+
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
7+
</head>
8+
<body>
9+
<h1>Phonebook</h1>
10+
<ul id="phonebook"></ul>
11+
<h2>Create Contact</h2>
12+
Person: <input type="text" id="person" />
13+
<br>
14+
Phone: <input type="text" id="phone" />
15+
<br>
16+
<button id="btnCreate">Create</button>
17+
<script src="app.js"></script>
18+
</body>
19+
</html>

‎02.AJAX Lab/text.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<h1>Voilla!</h1>
2+
<p>I am a text loaded with AJAX request</p>

0 commit comments

Comments
 (0)