생활코딩

Coding Everybody

코스 전체목록

닫기

글목록 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. Ju Young Park
    다른건 다 잘 되는데 web링크를 누르면 web쪽으로 가지질 않네요 ㅜㅜ
  2. 고니스타크
    2021 2일차
    반복제거
    string.strim
    string.split
  3. 주니어개발자
    글목록 ajax로 구현하기 > 강의 2 > 코드 스니펫

    https://colorscripter.com......7Nk
  4. 주니어개발자
    용용님 코드 공유해주셔서 감사드립니다.

    마지막 인덱스 item을 가지고 tag 문자열 가공시
    문자열 줄바꿈이 제거가 필요한 것 같아서
    코드에 다음처럼 trim()을 추가하시면 좋을 것 같습니다 ㅎ

    https://colorscripter.com......Z9r

    용용님 코드로 리뷰하실 때
    JavaScript 링크 클릭시 출력 안되시는 분들 참고하세용
    대화보기
    • 용용
      전 ES6 문법으로 작성했습니다 ㅎ
      참고하실 분들은 참고하세요

      <script>
      function fetchPage(name) {
      fetch(name).then((response) => {
      response.text().then((text) => {
      document.querySelector('article').innerHTML = text;
      })
      });
      }
      if(location.hash) {
      fetchPage(location.hash.substring(2));
      } else {
      fetchPage(welcome);
      }
      fetch('list').then((response) => {
      response.text().then((text) => {
      const items = text.split(',');
      let tags = '';
      items.forEach(item => {
      const tag = `<li><a href="#!${item}" onclick="fetchPage('${item}')">${item}</a></li>`
      tags = tags + tag;
      });
      document.querySelector('#nav').innerHTML = tags;
      })
      });
      </script>
    • 생활둘기
      2020 12 22
    • 들샘
      제 코드 보고 가실래요 ..?
      저는 확장자가 없는 파일을 못 만들어서 (?) .txt를 붙일 수 있게 extension 변수를 만들었고
      item의 값과 a태그의 text를 다르게 하고 싶어서 list.txt에 값을 추가해서 text도 다르게 할 수 있게 했어요!

      뭐라고요? 이고잉님 강의를 들으면 들샘같은 고1도 이정도로 할 수 있다고요? 당장 들어야죠!!!
      <list.txt>
      vinxen,sunset,fault 빈첸,노을,허물


      <index.html>

      fetch('list.txt').then(function(response){
      response.text().then(function(text){
      var items = text.split(' ')
      var items1 = items[0].split(',')
      var items2 = items[1].split(',')
      var i = 0
      var tags = '';
      var extension = ".txt"
      while(i<items1.length) {
      var item = items1[i]
      var nameitem = items2[i]
      item = item.trim();
      var fetchitem = item + extension;
      var tag = '<li><a href="#!'+item+'"onclick="fetchPage(\''+fetchitem+'\')">'+nameitem+'</a></li>';
      tags = tags + tag;
      i = i + 1;
      }
      document.querySelector('#nav').innerHTML = tags;
      })
      });
    • kkn1125
      20.12.20 완료~!
    • Yeonny
      2020.11.12 크 고안해낸 사람 상 줘야 할 듯
    • 2020.11.02.MON.
    • 웹짱
      2020.10.26 list로 구현
    • 허우룩
      2020.09.06
    • 20.08.31 감사합니다
    • 2020/07/18 완료
    • 좋은 코딩이 뭔지 다시 한 번 생각해보게 되네요. 감사합니다.
    • 김혜린
      6월 25일 완료! /복습하기
    • 코드열공쟁잉
      아 새로고침 계속해도 안되서 보니, 강력 캐쉬삭제 새로고침하니까 정상작동 ㅎㅎ~~
    • Amousk
      좋은강의 감사합니다.
    • 최원근
      ajax 파일을 새로 만드시고 다시 해보세요.
      대화보기
      • hpyseun
        05/22/2020 완료 감사합니다
      • 코딩꿈나뮤
        var tag = '<li><a href="#!'+item+'" onclick="fetchPage(\''+item+'\')">'+item+'</a></li>'; 부분이 너무 힘들어서 차자봣습니담

        저부분은 변수 item만 따로 구분지어서, 이런식으로 써도 되네욤!ㅅ!
        `<a href="#!${item}"onclick="fetchArticle('${item}')"><li>${item}</li></a>`

        참고한 페이지 https://pang2h.tistory.com/116
        ` 는 1왼쪽에 있는 기호더라구욤!
      • 코딩꿈나뮤
        이번 수업 너무 빡셈 겨우 캇ㅠㅅㅠ
        fetch('textFolder/list').then(function(response){
        response.text().then(function(text){
        var T = 'textFolder/'
        var items = text.split(',');
        var tags = '';
        for( i = 0 ; i<items.length ; ++i){
        var item = items[i];
        item = item.trim();
        var tag = '<li><a href="#!'+item+'" onclick="fetchArticle(\''+T+item+'\')">'+item+'</a></li>';
        tags = tags + tag;
        }
        document.querySelector('#alist').innerHTML = tags;
        })
        });
      • 야루
        완료
      • OneJae EE
        20.04.15 수 / 37세 비전공자 / 완료
      • 완료
      • eddylee123456
        완료
      • thsths
        완료
      • 스티븐잡숴
        완료
      • 이민형
        왜 list 부분을 수정하고 웹 새로고침해도 바뀌지가 않을까요...
      • 샬롬
        완료
      • 박창신
        완료
      • 굼벵이
        완료
      • 쑤우
        수강완료. 감사합니다.
      • 김우재
        이고잉님 강의는 정말 유익하고 도움이 되는 것 같습니다.
        현재 ES6관련 책으로도 같이 공부하는데 거기서는 백틱을 사용한 문자열 혼합을 배웠는데
        막상 어디에 쓰일지 감이 안잡혔는데 var tag 부분에서 사용하니 새로운 재미를 느꼈습니다. 감사합니다
      • Hyeon-Jun Ha
        완료
      • incursio
        감사합니다
      • 허공
        190509 감사합니다.
      • 발헤
        감사합니다. 완료
      • JuicyFresh
        그러게요 뒤로가기는 안되는군요. 주소값만 바뀌고 다시 엔터를 치기 전까진 페이지의 내용이 바뀌진 않는군요.

        해결방법은 분명히 있을거 같은데 공부를 좀 더 해봐야 겠습니다.
        대화보기
        • fetch api를 이용하면 뒤로가기 버튼 클릭시 주소창의 hash값만 바뀌고 페이지 리로드가 되지 않습니다. 이리저리 찾아봐도 명쾌한 답은 딱히 안 나오던데 혹시 이를 해결하는 가장 간단한 방법이 있을까요?
        • 스티브노드
          어려운데도 불구하고 정말 감사합니다
          그동안 책에서 보던 내용중 trim이나 split에 관련된 정확한 내용이나 (\''+item+'\')이런부분에 관한 자세한 내용들어본건
          처음이네요ㅎㅎ
          최고의 강의입니다
        • 웅이
          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님 감사요!
            오.... 감사요@.@ 저도 이부분이 햇깔렸는데 님 설명보니깐 이해가 되요!!
            대화보기
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기