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. labis98
    20210719 completed.
  2. 별거
    2021.04.30 완료했습니다.

    지금까지 강의 중 이해 안되는건 많이 없었는데 이 강의는 정말 어렵네요..
    그런데 어느정도는 이해가 됬어요!
  3. 반복문으로 tag에서각각
    <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>
    를 만들고
    tags에다가 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>

    document.querySelector('#nav').innerHTML = tags; ,<- 요기다 넣어서 html문서에 표시되게 하는 것 입니다.
    대화보기
    • dankthedust
      혹시 tag를 tags로 한번 더 감싸는 이유를 아시는 분 계실까요?
    • 와 ... ㄷㄷ 어려웠다... 그래도 완료...
    • chimhyangmoo
      2021.02.07
    • jeisyoon
      2021.02.01 수강
    • hanel_
      21.1.29 완료
    • Ju Young Park
      다른건 다 잘 되는데 web링크를 누르면 web쪽으로 가지질 않네요 ㅜㅜ
    • 고니스타크
      2021 2일차
      반복제거
      string.strim
      string.split
    • 주니어개발자
      글목록 ajax로 구현하기 > 강의 2 > 코드 스니펫

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

      마지막 인덱스 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 감사합니다
      • pupu
        2020/07/18 완료
      • Mauv
        좋은 코딩이 뭔지 다시 한 번 생각해보게 되네요. 감사합니다.
      • 김혜린
        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세 비전공자 / 완료
        • 1d1c
          완료
        • 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에는 왜 \'가 안오는지 알 수 있을까요?
            대화보기
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기