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. 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 자세히 보기