Coding Everybody

코스 전체목록

닫기

Ajax

2018-08-27 11:23:08 | 공개

수업소개

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

수업대상

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

수업에 참여조건

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

WEB2 - JavaScript 수업 바로가기

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

index.html, color.js

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

수업의 크기

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

수업을 보는 다른 방법

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

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

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

예제

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

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

수업의 저작권 정책

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

- 이전
- 다음

댓글

Sansol Park2년 전

네, 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를 가진 요소를 불러올 수 있습니다.
대화보기
답글
바우2년 전

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 부분
//만을 불러오는 것도 가능한지요? 가능하면 그 방법 좀 알려주시면 대단히 감사하겠습니다

답글
파시2년 전

20230906

답글
edwin3년 전

2023.02.02

답글
서우3년 전

221014

답글
당당3년 전

2022.09.30

답글
Griotold3년 전

20220819 날씨도 좋은데 낚시나 하러 갈까

답글
MelonMusk3년 전

08/17

답글
tekhnolozy4년 전

Ajax 의 개요

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

Ajax 의 역사

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

Ajax 사용 목적

- 부분적으로 웹페이지를 갱신할 수 있음
- 단일 페이지로 여러가지 정보를 표현할 수 있는 SPA(Single Page Application)을 구현할 수 있다.
- 리소스 관리와 유지보수에 용이

답글
melll4년 전

2022.03.06 완료

답글
양지윤4년 전

2022년 3월 1일

답글
카라멜팝콘4년 전

-개인적으로 자바스크립트 극혐...
-그럼에도 불구하고 프론트엔드를 하려면 피해갈 수 없는 관문...
-필요에 의한 AJAX 공부 시작!

답글
webmaser4년 전

2022.02.13 출발@! 드가자!@

답글
pmxsg4년 전

2022.02.02

답글
chio4년 전

시작

답글
아까그애4년 전

2022-01-21 완료

답글
소설가4년 전

2021-12-25 시작
고맙습니다.

답글
오롯4년 전

21.12.21 시작

답글
행달4년 전

21.10.20 시작!!

답글
inventorh4년 전

2021.09.29 고고씽

답글
엘렌4년 전

완료

답글
SONNY4년 전

고고!

답글
shg72714년 전

210805

답글
labis984년 전

20210718 완료~~

답글
둘기4년 전

210603 완료

답글
super1Nova4년 전

210523

답글
Yohanesty5년 전

완료

답글
별거5년 전

2021.04.29 완료했습니다. Ajax.. 기대가 됩니다.

답글
juju5년 전

210304 ajax 시작

답글
mymie5년 전

완료

답글
jeisyoon5년 전

Ajax 시작합니다. 2021.02.28

답글
hanel_5년 전

ajax시작 21.1.26

답글
임찬혁5년 전

완료

답글
chapter54475년 전

완료하였습니다

답글
주니어개발자5년 전

불필요한 정보까지 끄집어내는 무거운 그물은 던져버리고
AJAX라는 낚시대를 이용해서
"필요한 정보만을 부분적으로, 정교하게 낚아채는" 낚시꾼이 된다

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

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

XHR
비동기 통신을 가능하게 해준 그 기술 맞다

답글
고니스타크5년 전

6일차
AJAX는 페이지 리로드가 아닌, 필요한 정보만 서버에서 받아서 변경 해 주는 기술.

답글
해킹잘하고싶어요ㅎ5년 전

2020 12 25 재출발

답글
susufana5년 전

20201222

답글
생활둘기5년 전

2020 12 21

답글
Yeonny5년 전

2020.11.10 시작합니다.

답글
바부대지5년 전

2020.11.07 Ajax Start

답글
Sunny5년 전

2020.11.02.MON.

답글
웹짱5년 전

2020.10.23 자 준비 됐나요? 시작합니다.

답글
phin5년 전

2020Oct23 ajax 시작

답글
yulrinam5년 전

201013 시청완료 감사합니다 :)

답글
서찬희5년 전

2020.10.06 믿고 듣는 생활코딩. 감사합니다 :)

답글
banaba5년 전

9/18 ajax 스타트!

답글
김광래5년 전

9월 7일 시작

답글
허우룩5년 전

2020.09.06

답글
dongmi955년 전

20.07.25완료

답글

토픽 0
모듈 0
코스 0
봤어요 0
댓글 0
명예의 전당 0

'; return o2moivepop.document.write(htmlCode); }); });