WEB3 - Ajax

글목록 ajax로 구현하기

수업소개

글목록을 ajax로 구현하는 방법을 알아봅니다.

 

 

 

강의1

소스코드

변경사항

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>
</head>
<body>
  <h1><a href="#!welcome">WEB</a></h1>
  <input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
  ">
  <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;
      })
    });
  }
  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>

 

 

 

강의2

소스코드

변경사항

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>
</head>
<body>
  <h1><a href="#!welcome">WEB</a></h1>
  <input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
  ">
  <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;
      })
    });
  }
  if(location.hash){
    fetchPage(location.hash.substr(2));
  } else {
    fetchPage('welcome');
  }
  fetch('list').then(function(response){
    response.text().then(function(text){
      var items = text.split(',');
      var i = 0;
      var tags = '';
      while(i<items.length){
        var item = items[i];
        item = item.trim();
        var tag = '<li><a href="#!'+item+'" onclick="fetchPage(\''+item+'\')">'+item+'</a></li>';
        tags = tags + tag;
        i = i + 1;
      }
      document.querySelector('#nav').innerHTML = tags;
    })
  });
  </script>
</body>
</html>

 

list

html,css,javascript,ajax

 

ajax

<h2>Ajax</h2>
Ajax (also AJAX; /ˈeɪdʒæks/; short for "Asynchronous JavaScript + XML")[1][2] is a set of Web development techniques using many Web technologies on the client side to create asynchronous Web applications. With Ajax, Web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows Web pages, and by extension Web applications, to change content dynamically without the need to reload the entire page.[3] In practice, modern implementations commonly utilize JSON instead of XML due to the advantages of JSON being native to JavaScript.[4]

 

댓글

댓글 본문
작성자
비밀번호
  1. 웅이
    var tag = '<li><a href="#!'+item+'" onclick="fetchPage(\''+item+'\')">'+item+'</a></li>'; 에서
    fetchPage(\''+item+'\')에만 \'를 사용하고, 그 앞뒤에 오는 item에는 왜 \'가 안오는지 알 수 있을까요?
    대화보기
    • 삼고잉
      이고잉님이 직접 리팩토링하는 과정을 계속 보면서 학습하니까 덩달아 제가 하는것만 같아 이상한 성취감이 더 생겨버리네요 ㅋㅋ
    • 고스트프리
      여기서 좀 어렵네요...
    • 김창민
      정말 원하던 기능이었는데 ..html의 innerhtml태그로 구현해야 하나 생각하고 있었는데 이런 방법이 있었군요. 감사합니다.
    • 젝스
      저는 역슬래쉬 쓰면 너무햇갈려서
      `<li><a href="#!`+lists[list]+`" onclick="readfile('`+lists[list]+`');">`+lists[list]+`</a></li>`
      맨밖을 `,",' 3개다써서했습니다 잘작동하네요
    • 최주원
      영상 잘 봤습니다. ajax 입문단계라고 볼수 있겠네요. : )
    • 커피중독
      혹시 아톰으로 수업을 따라오시려는 분들이 있으실까 하여 조심스레 적어봅니다..

      저의 경우에는 VS code로 수업을 따라가는 중이라 마지막 영상의 javascript⮐ 의 문제가 생기지 않았지만
      아톰의 경우에는 두번째 줄을 지우고 저장을 하셔도 저장하시는 순간에 맨 마지막 공백의 줄을 만들고
      저장하는 고질적인 문제가 있습니다.

      이고잉님처럼 trim()함수를 써도 되지만, 아톰의 고질적인 문제니 데이터 자체에서 white space를 없애고 싶으시다면
      다른 에디터를 이용해 마지막에 있는 공백 줄을 삭제하시고 저장하시면 될듯 합니다.

      (아톰의 문제는 맥 아톰에서만 확인해봤습니다. 윈도우 아톰에서는 다를수도 있어요!)
    • metallsk
      어렵지만, 호기심 가득한 세상이네요~~
    • GON님 감사요!
      오.... 감사요@.@ 저도 이부분이 햇깔렸는데 님 설명보니깐 이해가 되요!!
      대화보기
      • 여기서 사용한 역슬래쉬는 역슬래쉬 다음에 오는 작은따옴표는 문자열을 구분하는 것이 아니고 문장안에서 사용하는 작은따옴표의 역할로 사용하겠다는 것을 말해주는 기호입니다.
        그래서 /'를 한세트로 보셔야됩니다.

        '<li><a href="#!'
        +
        item
        +
        '" onclick="fetchPage(/''
        +
        item
        +
        '/')"> '
        +
        item
        +
        '</a></li>'

        --->item = html이라면
        <li><a href="#!
        html
        " onclick="fetchPage('
        html
        ')>
        html
        </a></li>
        대화보기
        • 이하빛
          var tag = '<li><a href="#!'+item+'"onclick="fetchPage(/''+item+'/')"> '+item+'</a></li>';

          여기서

          (/''+item+'/') 왜 맨 앞에 /가 있는거죠? ' <-요거 뒤에 / 가와야 하는거 아닌가요?

          '"onclick="fetchPage(/' 가 아니라
          '"onclick="fetchPage('/ 이렇게 되어야하는 거 아닌가요?


          (*역슬레시 표시가되지않아 /로 대체했습니다!)
        • 이하빛
          "힘드실거 압니다"... 다정하게 말해주시고.. "원래 그래영" 하시면... 전.... 전....?!!!!!!!!!
          뜨아~~~~~~~~~~~~~괴로워엽!!!
          지금까지 배운거 다 어디로 갔을까엽.. 제 머리에 남아있긴 할지..퓨
        • 장만호
          계속 강의를 들으면서 궁금했던 점인데요
          petch를 통해서 list파일을 불러오잖아요 근데 patch에서 어떻게 list 파일을 읽어 오는거죠? 경로 지정이 어디서부터 되있는건지 궁금합니다 ㅠ!!
          또 제가 다른 디렉토리를 생성해서 거기에 있는 list를 화면상에 보여주고 싶을 때 어떻게야 하나요

          그리고 리스트를 객체화 해서 나열된 태그들을 함수처리한다음에 불러오는 것도 가능하나요?
        • 저도 이제 배우는 초보라 잘모르고 틀린부분이 있을수 있는데 아는대로 적어 봤습니다.

          items.length = 4 입니다 (html, css, javascript, ajax)
          따라서 while문은 i=0, 1, 2, 3 이렇게 네번 돌게 됩니다.(i=4가되면 4 < 4가되어 false가 됩니다.)

          구문안의 i=i+1에 의해 i가 i=0일때 i= 0+1에 의해 i=1이되고 i=1일때 i=1+1에 의해 i=2가되는식으로 루프가 한번씩 돌때마다 i는 1씩 증가하게 되어 있습니다.
          이때의 i=i+1을 이해하신다면 tags = tags + tag도 비슷하다고 할수 있습니다.

          처음 i=0일때 items[0]이 html이므로 item=html입니다.
          따라서 tag='<li><a href=#!html onclick="fetchPage('html')>html</a></li>'되고
          비어있던 변수 tags(var tags='';)는 tags=tags+tag에 의해
          즉, tags=''+'<li><a href=#!html onclick="fetchPage('html')>html</a></li>'에 의해서
          tags='<li><a href=#!html onclick="fetchPage('html')>html</a></li>' 됩니다.

          그리고 i=1일때,
          tags='<li><a href=#!html onclick="fetchPage('html')>html</a></li>
          <li><a href=#!css onclick="fetchPage('css')>css</a></li>'

          i=2일때,
          tags='<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>'

          i=3일때,
          tags='<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>'
          됩니다.

          이 tags는 document.querySelector('#nav').innerHTML = tags; 코드에 의해 <ol>태그 안으로 들어가게됩니다.
          <ol id="nav">
          <-----------tags는 <ol> 태그안에 들어갑니다.
          </ol>

          결과
          <ol id="nav">
          <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>
          </ol>
          대화보기
          • SongSong
            안녕하세요!

            var tags = ''; 과
            tags = tags + tag; 부분의 설명이 들어가있지않아
            혼자 이해해보려고 계속 노력했으나 벽에 부딪혔습니다 ㅠㅠㅠ

            저러한 코드들이 하는 역할과 이유는 무엇인가요?
            감사합니다!
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기