Sohn SooKyoung

💛💚

최대 1 분 소요

Ajax란?

See the Pen ajax by sohnsookyoung (@sooking87) on CodePen.

검사를 눌러서 확인해보면 fetch가 적용되기 전 로딩될 때동안 출력이 되어져 있는 것을 확인할 수 있다. 이처럼 비동기 방식을 사용하고 있으모, fetch가 실행되는 동안 다른 코드가 동시에 실행되는 것을 말한다.

코드와 데이터 분리

list라는 파일에 목차만 정리되어 있다면 이를 코드에서 알아서 처리해주도록 만들어 주는 방식이다. 코드를 모르는 사용자에게는 굉장히 사용이 편리한 기능일 것이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!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>
</head>
<body>
  <h1><a href="#!welcome">WEB</a></h1>
  <input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
  ">
<!--여기 밑에 있는 li태그들은 데이터이다. 따라서 list 목차 파일로 이동시킨다.-->
  <ol id="nav">
 
  </ol>
  <article>
 
  </article>
  <script>
    function fetchPage(name) {
      fetch(name).then(function(response){
        response.text().then(function(text){
          document.querySelector('article').innerHTML = text;
      })
    });
    }
    
    fetch('list').then(function(response){
      response.text().then(function(text){
        //<li><a href="#!html" onclick="fetchPage('html')">HTML</a></li>
        //list파일에만 목차를 수정해주면 작동 부분에서는 따로 수정하지 않아도 됨.*** 이게 포인트!
        var items = text.split(',');
        var tags = '';
        var i = 0;
        while (i < items.length) {
          var item = items[i];
          item = item.trim(); //줄바꿈, 탭 공백이 있는 경우를 없애주기 위한 방법 -> trim()
          var tag = '<li><a href="#!' + item  + '" onclick="fetchPage(\'' + item + '\')">' + item + '</a></li>';
          tags += tag;
          i+=1;
        }
        document.querySelector('#nav').innerHTML = tags;
    })
  });
  </script>
  <!--
  <h2>WEB</h2>
  <p>The World Wide Web (abbreviated WWW or the Web) is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and can be accessed via the Internet.[1] English scientist Tim Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser computer program in 1990 while employed at CERN in Switzerland.[2][3] The Web browser was released outside of CERN in 1991, first to other research institutions starting in January 1991 and to the general public on the Internet in August 1991.
  </p>
-->
</body>
</html>
cs

이 방식을 통해서 계산기 만들기 할 때, 반복을 줄이면서 사용할 수 있을 것 같다. 내꺼같은 경우는 목차가 아니라 그냥 고정되어 있는 숫자이므로 함수를 이용하는 것이 더 나을 것 같다.

댓글남기기

참고