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. 행달
    21.10.21 감사!
  2. inventorh
    2021.09.29
  3. ralchRH
    while문 대신 map을 이용한 구현
    items.map(function(item) {
    console.log(item)
    item = item.trim()
    tags = tags + `<li><a href="#!${item}" onclick="fetchPage('${item}')">${item}</a></li>`
    })
  4. 코딩하는 배달이
    template literal로 변경해봤습니다!
    var tag = `<li><a href="#!${item}" onclick="fetchPage('${item}')">${item}</a></li>`
  5. 글램만두
    그냥 리스트로 묶는게 정리되어보여서 그러것 아닐까요?
    대화보기
    • 글램만두
      web의 태그 부분에 onclick="fetchPage('welcome')" 추가 하시면 됩니다.
      대화보기
      • shg7271
        210805
      • labis98
        20210719 completed.
      • 별거
        2021.04.30 완료했습니다.

        지금까지 강의 중 이해 안되는건 많이 없었는데 이 강의는 정말 어렵네요..
        그런데 어느정도는 이해가 됬어요!
      • 반복문으로 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
          • momo
            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
              완료
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기