https://www.youtube.com/watch?v=F67A2N5u-JU&list=PLuHgQVnccGMA9-1PvblBehoGg7Pu1lg6q&index=10
index.html
기존 코드는 중복이 발생함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AJAX 연습</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1><a href="index.html"> AJAX 연습</a></h1>
<input type="button" value="night" onclick="nightDayHandlert(this);" />
<ol>
<li>
<a
onclick="
fetch('html').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML=text;
})
});
"
>HTML</a
>
</li>
<li>
<a
onclick="
fetch('css').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML=text;
})
});
"
>CSS</a
>
</li>
<li>
<a
onclick="
fetch('JavaScript').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML=text;
})
});
"
>JavaScript</a
>
</li>
</ol>
<!-- 링크를 클릭 시 아래의 article태그 안에 있는 내용 변경 -->
<article></article>
</body>
</html>
중복되는 부분은 아래와 같이 함수를 사용하면됨.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AJAX 연습</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1><a href="index.html"> AJAX 연습</a></h1>
<input type="button" value="night" onclick="nightDayHandlert(this);" />
<ol>
<li><a vonclick="fetchPage('html')" >HTML</a></li>
<li><a onclick="fetchPage('css')">CSS</a></li>
<li><a onclick="fetchPage('JavaScript')">JavaScript</a></li>
</ol>
<!-- 링크를 클릭 시 아래의 article태그 안에 있는 내용 변경 -->
<article></article>
<script>
function fetchPage(name) {
fetch(name).then(function (response) {
response.text().then(function (text) {
document.querySelector("article").innerHTML = text;
});
});
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AJAX 연습</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1><a href="index.html"> AJAX 연습</a></h1>
<input type="button" value="night" onclick="nightDayHandlert(this);" />
<ol>
<li><a href="#!html" onclick="fetchPage('html')">HTML</a></li>
<li><a href="#!css" onclick="fetchPage('css')">CSS</a></li>
<li>
<a href="#!JavaScript" onclick="fetchPage('JavaScript')">JavaScript</a>
</li>
</ol>
<!-- 링크를 클릭 시 아래의 article태그 안에 있는 내용 변경 -->
<article></article>
<script>
function fetchPage(name) {
fetch(name).then(function (response) {
response.text().then(function (text) {
document.querySelector("article").innerHTML = text;
});
});
}
if (location.hash) {
fetchPage(location.hash.substr(2));
} else {
fetchPage("welcome");
}
</script>
</body>
</html>
list 파일 만들어서 ol 안의 li태그들 옮김
<li><a href="#!html" onclick="fetchPage('html')">HTML</a></li>
<li><a href="#!css" onclick="fetchPage('css')">CSS</a></li>
<li><a href="#!JavaScript" onclick="fetchPage('JavaScript')">JavaScript</a></li>
<li><a href="#!ajax" onclick="fetchPage('ajax')">ajax</a></li>4번째 리스트 ajax 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AJAX 연습</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1><a href="index.html"> AJAX 연습</a></h1>
<input type="button" value="night" onclick="nightDayHandlert(this);" />
<ol id="nav"></ol>
<!-- 링크를 클릭 시 아래의 article태그 안에 있는 내용 변경 -->
<article></article>
<script>
function fetchPage(name) {
fetch(name).then(function (response) {
response.text().then(function (text) {
document.querySelector("article").innerHTML = text;
});
});
}
if (location.hash) {
fetchPage(location.hash.substr(2));
} else {
fetchPage("welcome");
}
fetch("list").then(function (response) {
response.text().then(function (text) {
document.querySelector("#nav").innerHTML = text;
});
});
</script>
</body>
</html>
4. ajax 추가 확인 가능함.