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. 비전공자
    오전 11:37 2024-05-12
  2. hanjaelee
    2024.03.12 수강완료 감사합니다
  3. 서우
    221017
  4. 당당
    2022.10.02
  5. 코딩러버
    재밌어요!!
  6. melll
    2022.03.08
  7. pmxsg
    2022.02.02
  8. Scia
    쿠키 지우고 다시하니깐 되더라고요. 왜 인지는 모르곘네요.
    대화보기
    • Scia
      javascript 줄바꿈 변화 보려면 tag를 콘솔로 출력해 trim() 주석처리 하면서 확인하면 되겠네요.
    • Scia
      저도 그래요.... ㅠㅜ
      list에 ajax만 추가해보고, 파일 ajax도 만들고, 다른 페이지 갔다 localhost로 다시 들어오기도 하고 순서대로 다 해봐도 Ajax 목록이 안 만들어지고 console에도 안 찍히네요... 심지어 apache도 restart... 해봤는데 8^8
      그래서 list에 javascript 지워봤는데 지워지는 것도 안 되네요. 뭐가 문제인지
      list를 데이터를 왜 못 읽어 오는지 모르겠어요.
      그런데 localhost/index.html#!ajax 로 들어가면 화면은 나오더라고요. 목록에는 없는데
      아시는 분...
      대화보기
      • 아까그애
        2022-01-21 완료
      • tag 변수를 tags 변수로 감싼 이유는 'item' 배열의 구성원이 여러 개 있기 때문이에요. 만약 tags 변수로 감싸지 않으면 'item' 배열의 마지막 구성원인 'ajax' 값만 반환하고 말겠죠. 우린 'ajax' 값뿐만 아니라 'html', 'css', 'javascript' 값도 같이 반환하고 싶었는데 말이죠^^
        대화보기
        • 넘무
          잘봤습니다. 생활코딩을 통해 군생활에 활력을 주고 있습니다. 감사합니다
        • Koma Doodugi
          2021.10.27 완료
        • 행달
          21.10.21 감사!
        • inventorh
          2021.09.29
        • 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>`
          })
        • 코딩하는 배달이
          template literal로 변경해봤습니다!
          var tag = `<li><a href="#!${item}" onclick="fetchPage('${item}')">${item}</a></li>`
        • 글램만두
          그냥 리스트로 묶는게 정리되어보여서 그러것 아닐까요?
          대화보기
          • 글램만두
            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로 한번 더 감싸는 이유를 아시는 분 계실까요?
              • jwoh
                와 ... ㄷㄷ 어려웠다... 그래도 완료...
              • 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 크 고안해낸 사람 상 줘야 할 듯
                • Sunny
                  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왼쪽에 있는 기호더라구욤!
                  버전 관리
                  egoing@gmail.com
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기