이진욱의코딩

ajax의 적용 본문

JS

ajax의 적용

Crucifi 2019. 9. 26. 01:17

저번 ajax에 이어서 계속 포스팅하겠습니다.

이제 서버로 데이터를 주고받는 기본을 했으니 이번에는 응용을 해보도록 하겠습니다.

 

우선 저번 코드부터 살펴보겠습니다.

 

<!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="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="
      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>
  </p>
</body>
</html>

 

이 코드를 잘 보시면 중복되는 부분이 있습니다.

 

바로 이부분이죠.

 <li><a onclick="
      fetch('html').then(function(response){
        response.text().then(function(text){
          document.querySelector('article').innerHTML = text;
        })
      });

지금부터 이렇게 중복을 없애는 작업을 하겠습니다.

리펙토링(함수화)으로 말이죠.

 

function을 만들고 그 이름을 name이라 하면  name으로 들어온 매개변수를 fetch의 인자로 받는 겁니다.

이렇게 fetch라는 것을 정의했으면, 위에 중복된 코드들을 컴펙트 하게 만들어주면 됩니다.

 

 <li><a onclick="fetchPage('html')">HTML</a></li>

이렇게 만들어주시면 됩니다.(css와 js는 직접 해보세요.)

그리고 실행시켜보면 똑같이 동작하는 것을 볼 수 있습니다.

 

이전보다 훨씬 더 코드가 가독성이 높아지고 유지보수가 쉬워졌습니다.

 

바뀐 최종코드입니다.

<!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="index.html">WEB</a></h1>
  <input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
  ">
  <ol>
    <li><a onclick="fetchPage('html')">HTML</a></li>
    <li><a onclick="fetchPage('css')">CSS</a></li>
    <li><a onclick="fetchPage('javascript')">JavaScript</a></li>
  </ol>
  <article>
 
  </article>
  <script>
  function fetchPage(name){
    fetch(name).then(function(response){
      response.text().then(function(text){
        document.querySelector('article').innerHTML = text;
      })
    });
  }
  </script>
</body>
</html>

 

 

여기까지가 ajax의 적용이었습니다.

이어서 초기페이지 구현과 글목록 ajax로 구현하는 법을 배워보겠습니다.

 

'JS' 카테고리의 다른 글

node.js설치방법과 node.js를 이용해서 웹서버만들기  (1) 2019.09.27
ajax를 이용한 초기페이지 구현  (0) 2019.09.26
서버를 이용해서 Ajax하기(기초)  (0) 2019.09.06
jQuery 객체에 대해 알아봅시다.  (0) 2019.08.31
jQuery에 대해 알아봅시다.  (0) 2019.08.30
'JS' Related Articles more