생활코딩

Coding Everybody

코스 전체목록

닫기

Ajax

| 공개

 

 

 

수업소개

웹페이지에서 일부 정보가 달라졌음에도 전체 페이지를 리로드하는 것은 효율적이지 않습니다. Ajax는 리로드 없이 웹서버에게 정보를 요청해서 부분적으로 정보를 갱신해주는 기술입니다. 

 

 

 

수업대상

페이지 리로드를 줄여서 사용자 경험을 향상시키고 싶은 분에게 권합니다. 리로드 할 때마다 모든 정보를 다운로드 하는 비효율이 불만인 분에게도 필요한 수업입니다. 

 

 

 

수업에 참여조건

JavaScript가 무엇인지 모르신다면 이 수업을 보시면 안됩니다. 자바스크립트를 모르신다면 아래 수업을 먼저 보실 것을 강하게 권합니다. 

WEB2 - JavaScript 수업 바로가기

아래 소스코드를 해석할 수 있다면 이 수업부터 시작하시면 됩니다. 

index.html, color.js

아래는 관련된 지식의 지도입니다. 지도를 참고해서 스스로 학습 경로를 탐험해보세요.

 

 

 

수업의 크기

16개의 동영상, 1시간 34분의 재생시간을 가진 수업입니다. 

 

 

 

수업을 보는 다른 방법

youtube의 재생목록을 통해서 학습할 수 있습니다.

동영상을 다운로드 받아보고 싶은 분은 아래 링크를 이용해주세요.

WEB3-Ajax 수업 다운로드 (2.26GB)

 

 

 

예제

예제 파일은 아래 github 저장소에 있습니다. 

WEB3-Ajax의 github 저장소 바로가기

 

 

 

수업의 저작권 정책

이 수업은 CCL 라이선스 BY를 따르고 있습니다. 이 수업의 출처를 표시해주신다면 컨텐츠의 수정을 할 수 있고, 상업적인 용도로도 사용할 수 있습니다. 상업적인 용도로 사용하는 경우는 거래 관계가 없다는 것을 인지 가능하도록 표시해주셔야 합니다. 

 

 

댓글

댓글 본문
  1. Sansol Park
    네, fetch API를 사용하여 다른 폴더에 있는 파일이나 특정 요소를 불러오는 것은 가능합니다. 다음은 여러 폴더에 있는 파일을 불러오는 예제와 특정 id를 가진 요소를 선택하여 불러오는 예제입니다.

    다른 폴더에 있는 파일 불러오기:

    html
    Copy code

    <input type="button" value="help" onclick="fetch('path/to/help').then(function(response) {
    response.text().then(function(text) {
    document.querySelector('article').innerHTML = text;
    });
    })">
    <article></article>

    위의 코드에서 'path/to/help'는 불러오고자 하는 파일의 경로를 나타냅니다. 필요에 따라 실제 파일의 상대 경로나 절대 경로로 수정하세요.

    특정 id를 가진 요소 불러오기:

    html
    Copy code

    <input type="button" value="help" onclick="fetch('path/to/help').then(function(response) {
    response.text().then(function(text) {
    var helpDocument = new DOMParser().parseFromString(text, 'text/html');
    var specificElement = helpDocument.getElementById('two');
    document.querySelector('article').innerHTML = specificElement.outerHTML;
    });
    })">
    <article></article>

    위의 코드에서 'two'는 불러오고자 하는 특정 요소의 ID입니다. DOMParser를 사용하여 텍스트를 HTML 문서로 파싱한 후, getElementById 메서드를 사용하여 특정 ID를 가진 요소를 선택합니다. 그 후에는 선택한 요소를 기존 페이지의 article 요소에 삽입합니다.

    위 두 예제를 참고하여 원하는 폴더의 파일이나 특정 ID를 가진 요소를 불러올 수 있습니다.
    대화보기
      답글
    • 바우
      WEB3-Ajax-5.1.fetch API-요청과 응답 동영상을 보면서 따라하기 방식으로 코딩공부를 하다가 궁금한 점이 있어 질문을 드립니다.

      <input type ="button" value="help" onclick="

      fetch('help').then(function(response){
      response.text().then(function(text){
      document.querySelector('article').innerHTML = text;
      })
      })
      ">

      <article>


      </article>

      // 같은 폴더에 있는 help파일 전체를 <article> </article> 태그 내에 불러오는 데는 성공을 했습니다.
      // 다른 폴더에 있는 help파일 전체를 불러오는 것이 가능한지, 그리고 help 파일 내에 있는 <p id="two"> 특정 id 부분
      //만을 불러오는 것도 가능한지요? 가능하면 그 방법 좀 알려주시면 대단히 감사하겠습니다
      답글
    • 파시
      20230906
      답글
    • edwin
      2023.02.02
      답글
    • 서우
      221014
      답글
    • 당당
      2022.09.30
      답글
    • Griotold
      20220819 날씨도 좋은데 낚시나 하러 갈까
      답글
    • MelonMusk
      08/17
      답글
    • tekhnolozy
      Ajax 의 개요

      구글 검색창에 값을 주면 추천 검색어가 뜬다
      페이지 일부를 새로 로딩하는 AJAX 기술이 사용된 것
      페이지 전체를 받는다면 1년이 걸릴수도 있는 일을 획기적으로 단축할 수 있게 되었다.

      Ajax 의 역사

      오랜 시간 무명의 시절을 겪다가 마이크로소프트가 넷스케이프와 헤게모니전을 벌이며 1999년 익스플로러에 영입하였다. 2004년 구글의 지메일도 이를 채택하였다. 제시 제임스 가렛이 이후 Ajax의 이름을 명명하였다

      Ajax 사용 목적

      - 부분적으로 웹페이지를 갱신할 수 있음
      - 단일 페이지로 여러가지 정보를 표현할 수 있는 SPA(Single Page Application)을 구현할 수 있다.
      - 리소스 관리와 유지보수에 용이
      답글
    • melll
      2022.03.06 완료
      답글
    • 양지윤
      2022년 3월 1일
      답글
    • 카라멜팝콘
      -개인적으로 자바스크립트 극혐...
      -그럼에도 불구하고 프론트엔드를 하려면 피해갈 수 없는 관문...
      -필요에 의한 AJAX 공부 시작!
      답글
    • webmaser
      2022.02.13 출발@! 드가자!@
      답글
    • pmxsg
      2022.02.02
      답글
    • chio
      시작
      답글
    • 아까그애
      2022-01-21 완료
      답글
    • 소설가
      2021-12-25 시작
      고맙습니다.
      답글
    • 오롯
      21.12.21 시작
      답글
    • 행달
      21.10.20 시작!!
      답글
    • inventorh
      2021.09.29 고고씽
      답글
    • 엘렌
      완료
      답글
    • SONNY
      고고!
      답글
    • shg7271
      210805
      답글
    • labis98
      20210718 완료~~
      답글
    • 둘기
      210603 완료
      답글
    • super1Nova
      210523
      답글
    • Yohanesty
      완료
      답글
    • 별거
      2021.04.29 완료했습니다. Ajax.. 기대가 됩니다.
      답글
    • juju
      210304 ajax 시작
      답글
    • mymie
      완료
      답글
    • jeisyoon
      Ajax 시작합니다. 2021.02.28
      답글
    • hanel_
      ajax시작 21.1.26
      답글
    • 임찬혁
      완료
      답글
    • chapter5447
      완료하였습니다
      답글
    • 주니어개발자
      불필요한 정보까지 끄집어내는 무거운 그물은 던져버리고
      AJAX라는 낚시대를 이용해서
      "필요한 정보만을 부분적으로, 정교하게 낚아채는" 낚시꾼이 된다

      클라이언트 측 사용자 UI에서는 좋은 경험을
      서버를 운영하는 생산자에게는 과다한 트래픽으로부터의 지출을 줄여줄 것이다

      웹에 대한 고정관념을 리로드한 기술
      AJAX
      (Asynchronous Javascript And Xml)
      by 제시 제임스 가렛

      XHR
      비동기 통신을 가능하게 해준 그 기술 맞다
      답글
    • 고니스타크
      6일차
      AJAX는 페이지 리로드가 아닌, 필요한 정보만 서버에서 받아서 변경 해 주는 기술.
      답글
    • 해킹잘하고싶어요ㅎ
      2020 12 25 재출발
      답글
    • susufana
      20201222
      답글
    • 생활둘기
      2020 12 21
      답글
    • Yeonny
      2020.11.10 시작합니다.
      답글
    • 바부대지
      2020.11.07 Ajax Start
      답글
    • Sunny
      2020.11.02.MON.
      답글
    • 웹짱
      2020.10.23 자 준비 됐나요? 시작합니다.
      답글
    • phin
      2020Oct23 ajax 시작
      답글
    • yulrinam
      201013 시청완료 감사합니다 :)
      답글
    • 서찬희
      2020.10.06 믿고 듣는 생활코딩. 감사합니다 :)
      답글
    • banaba
      9/18 ajax 스타트!
      답글
    • 김광래
      9월 7일 시작
      답글
    • 허우룩
      2020.09.06
      답글
    • dongmi95
      20.07.25완료
      답글
    graphittie 자세히 보기