[Ajax] Ajax의 적용
2021. 3. 21. 15:41ㆍFront-end/Javascript
728x90
반응형
지난시간 까지는 fetch API를 사용하는 방법에 대해서 살펴보았습니다.
이번 시간에는 배운 것을 적용해보겠습니다.
우리가 써먹고 싶은 index.html로 와서 보겠습니다.
<!doctype html>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="colors.js"></script>
<script src="index.js"></script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<ol>
<li><a onclick="
document.querySelector('article').innerHTML = '<h2>HTML</h2>HTML is ....';
">HTML</a></li>
<li><a onclick="
document.querySelector('article').innerHTML = '<h2>CSS</h2>CSS is ....';
">CSS</a></li>
<li><a onclick="
document.querySelector('article').innerHTML = '<h2>JavaScript</h2>JavaScript is ....';
">JavaScript</a></li>
</ol>
<article></article>
</body>
</html>
저 부분을 클릭했을 때 아래 부분이 나오는건 onclick이라고 하는 자바스크립트 이벤트 덕분입니다.
그러면 onclick의 그 부분에 fetch.html에서 작성했던 부분을 가져오면 됩니다.
<!doctype html>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="colors.js"></script>
<script src="index.js"></script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(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="
document.querySelector('article').innerHTML = '<h2>CSS</h2>CSS is ....';
">CSS</a></li>
<li><a onclick="
document.querySelector('article').innerHTML = '<h2>JavaScript</h2>JavaScript is ....';
">JavaScript</a></li>
</ol>
<article></article>
</body>
</html>여기있는 코드의 원리를 모른다고 해도 '아 이 fetch api에서 여기에 있는 'html' 이 부분을 수정하면 서버에 접속해서 html 파일을 요청하는구나' 라는 것만 알면 됩니다.
다음 시간에는 Ajax의 리팩토링 함수화에 대해서 알아보겠습니다.
728x90
반응형
'Front-end > Javascript' 카테고리의 다른 글
| 프로토타입(Prototype) (0) | 2021.03.23 |
|---|---|
| [Ajax] 리팩토링 함수화 (0) | 2021.03.21 |
| [Ajax] fetch API - response 객체 (0) | 2021.03.21 |
| [Ajax] fetch API - 요청과 응답 (0) | 2021.03.21 |
| [Ajax] fetch API - 사용법 (0) | 2021.03.19 |