https://www.youtube.com/watch?v=w077w7FN-pg&list=PLuHgQVnccGMA9-1PvblBehoGg7Pu1lg6q
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 href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>WEB</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo alias labore
aliquid illum pariatur tempora temporibus impedit, odit voluptatibus
delectus, eos tenetur quis, ipsam deleniti eaque. Neque voluptatum id
nihil! Lorem ipsum dolor sit amet consectetur adipisicing elit.
Necessitatibus illum rerum at nesciunt labore voluptates ut blanditiis
vel! Facilis pariatur illo debitis assumenda ipsam quaerat fuga officiis
minus earum aliquid.
</p>
</body>
</html>1.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="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>HTML</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique error
cumque rerum vel possimus harum, aut natus fugiat dolor quisquam quae est,
voluptatem sunt repudiandae. Tempora ipsam voluptatibus aliquid illo?Lorem
ipsum dolor sit amet consectetur adipisicing elit. Nihil enim quidem
incidunt aut culpa neque expedita id cum quod eius non ratione quae
possimus, debitis deleniti omnis iusto recusandae eveniet.lo
</p>
</body>
</html>2.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="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>CSS</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique error
cumque rerum vel possimus harum, aut natus fugiat dolor quisquam quae est,
voluptatem sunt repudiandae. Tempora ipsam voluptatibus aliquid illo?Lorem
ipsum dolor sit amet consectetur adipisicing elit. Nihil enim quidem
incidunt aut culpa neque expedita id cum quod eius non ratione quae
possimus, debitis deleniti omnis iusto recusandae eveniet.lo
</p>
</body>
</html>3.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="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>JavaScript</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique error
cumque rerum vel possimus harum, aut natus fugiat dolor quisquam quae est,
voluptatem sunt repudiandae. Tempora ipsam voluptatibus aliquid illo?Lorem
ipsum dolor sit amet consectetur adipisicing elit. Nihil enim quidem
incidunt aut culpa neque expedita id cum quod eius non ratione quae
possimus, debitis deleniti omnis iusto recusandae eveniet.lo
</p>
</body>
</html>
index.html 에서 실행 할 경우
아래와 같이 출력된다.
코드를 보면 알 수 있듯이 , 1.HTML 을 클릭하면 1.html 로 이동, 2. CSS를 누르면 2.html 로 이동 한다.
근데 , 이렇게 여러 페이지를 만들게 되면 관리하기도 어렵고, 용량도 많아진다.
그래서 해당 링크를 클릭하면 하단의 문서 내용만 바꾸고자 할 때 쓰이는게 AJAX다.
위의 내용들을 AJAX로 바꿔보기로 한다.
1. 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="
document.querySelector('article').innerHTML='<h2>HTML</h2>html is ...';
"
>HTML</a
>
</li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<!-- 링크를 클릭 시 아래의 article태그 안에 있는 내용 변경 -->
<article></article>
</body>
</html>1. html 을 클릭하면 <article> 안에 내용에 html 추가된다.
html, css, 파일 생성
웹 서버에서 정보를 가져와야함
fetch.html 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input
type="button"
value="fetch"
onclick="
alert('ht')
"
/>
</body>
</html>
테스트 완료
input 내용 수정하기
<input
type="button"
value="fetch"
onclick="
fetch('css').then(function(response){
response.text().then(function(text){
alert(text);
})
})
"
/>
원리를 몰라도 사용가능함
<body>
<article></article>
<input
type="button"
value="fetch"
onclick="
fetch('css').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML=text;
})
})
"
/>
</body>
fetch버튼 클릭 시 위의 article 내용 변경됨.
fetch(' ') : 서버로 요청함
.then : 서버가 응답을 해줘야함 . 시간이 오래 걸릴 수 있음 , 다 끝나면 뒤에 있는 함수를 실행 시켜달라고 함 .
then 안에 function 이 들어가있음 -> 익명함수 (이름이 없음)
이름이 필요한 경우는 여기저기서 사용할 때 필요하고, then안에서만 사용할거라서 익명함수로 사용
.then(function(response){
}); : 어떤 내용?
fetch('html').then(function(response){
console.log(response);
});
status : 200 = 성공
실패는 404
만약 html 말고 javascript 요청하면?
fetch('Javascript').then(function(response){
console.log(response);
});
"
404 오류 뜸
fetch('Javascript').then(function(response){
console.log(response.status);
if(response.status == '404'){
alert('Not Found')
}
});
웹 서버가 응답한 결과를 담고 있는 객체를 response 라고 함 .
이 것을 활용해서
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>
'FRONTEND > 기타' 카테고리의 다른 글
| (API활용) 깃허브 유저찾기 app 2 (1) | 2023.11.14 |
|---|---|
| (API활용) 깃허브 유저찾기 app 1 (1) | 2023.11.14 |
| 로또 번호 가져오기 (0) | 2023.10.06 |
| jQuery 를 활용해 AJAX 사용 load() (0) | 2023.10.06 |
| Dom 응용실습 (1) | 2023.10.05 |