on
생활코딩web3 ajax
수업을 시작하며
- ajax를 빠르게 알아보고 진행하는 프로젝트에 적용해보고자 해서 w3s 튜토리얼을 훑어본 후 생활코딩 강의도 빠르게 보면서 기본 개념들을 익혀 나가는 것이 목적
1. 수업소개
- 페이지 전체를 리로딩하지 않고 부분적으로 새로운 정보를 서버와 교환하기 위해 고안된 기술
2-1. 수업의 목적
- 사용자 입장에서는 필요한 부분만 변환되기 때문에 사용성 증대
- 서버와 웹브라우저의 자원을 절약할 수 있다.
2-2. 수업의 목적
- Ajax를 활용한 웹페이지를 싱글페이지 애플리케이션이라고
3. 실습환경 준비
4. 동적으로 컨텐츠 변경하기
-
<li><a onclik=" document.querySelector('article').innerHTML = '<h2>HTML</h2>HTML is...'; ">HTML</a></li> - 파일에서 자료를 읽어오는건 다음시간에
5-0. fetch API 사용법
-
<html> <body> <input type="button" value="fetch" onclick=" fetch('css').then(function(response){ response.text().then(function(text){ document.querySelector('article').innerHTML = text; }) }) "> </body> </html>
5-1. fetch API 요청과 응답
fetch('javascript')- 서버로 javascript파일 달라고 요청하는 것
.then(function)....- 서버가 응답할 때 까지 기다리는 것(다른일을 하면서 기다릴 수 있)
- 응답을 받은 후에는 인자로 전달되어진 function을 실행시킨다.
- 비동기 적으로 실행된다.
5-2. fetch API-response 객체
then(function)- then안에 들어있는 함수는 익명함수라고 하며, then이 독점적으로 사용하기 위해 작성된 것이다.
- function은 콜백함수라고 함
- 콜백함수를 실행 시킬 때에는 response객체를 인자로 전달하게 된다.
response.status를 활용해 상태정보를 가져올 수 있다.- response는 서버가 응답한 내용을 가지고 있는 객체, 여러가지 속성을 통해 정보를 확이할 수 있다.
6-1. ajax의 활용
- html```
- HTML
```
6-2. 리팩토링 함수화
-
html``` function fetchPage(name){ fetch(name).then(function(response){ response.text().then(function(text){ document.querySelector(‘article’).innerHTML = text; }) }) }
- HTML
- css
- javascript
```
7-1. 초기 페이지
- ajax기능 구현에 나타나는 부작용을 완화해 나가는게 이번 수업
- 해쉬
- 다른 페이지로의 이동이 아닌 페이지 안에서 특정한 부분으로 접근하기 위한 url
<a href="#three"></a> <p id="three"></p>와 같이 anchor태그에 연관된 id값을 지정함으로써 기능을 구현할 수 있다.- 해쉬값에 따라서 ajax를 통해 시작되는 페이지를 세팅할 수 있다.
7-2. 초기페이지
- 해쉬뱅
<a href="#!three">#다음에!를 붙이는데!를 뱅이라고 해서, 해쉬 뱅이라고 부른다.
- ajax를 사용했을 경우에 문제가 검색엔진 최적화가 안된다.
- 다라서 해쉬뱅은 잘 사용하지 않고
pjax라는 것을 주로 사용한다.
8-1. 글목록
- 글 list 항목들을 fetch 형식으로 바꾸기
- html```
fetch(‘list’).then(function(response){ response.text().then(function(text){ document.querySelector(‘#nav’).innerHTML = text; }) }) ```
8-2. 글목록
- html```
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>‘+item+’</li>’; tags = tags + tag; i = i + 1; } console.log(items); document.querySelector(‘#nav’).innerHTML = tags; }) }) ```
9. fetch API polyfill
- 기존의 ajax방식은 XMLHttpRequest방식을 사용했는데 fetch가 더 최신의 강력한 기술이기 때문에 이것을 중심으로 공부 했다.
- 하지만 브라우저 호환성 문제가 있기 때문에 데이터를 기반으로 판단해야 한다. (can i use라는 홈페이지에서 호환성 확인 가능)
- 과거의 브라우저까지 모두 지원할 수 있는 방법이 polyfill
10. 수업을 마치며
- 앞으로 공부할 만한 주제에 대한 소개
- xml, json, Single Page Application(SPA), PJAX(ajax를 사용하면서도 검색엔진에 노출될 수있는 기술), Progressive Web Apps(spa의 발전된 형태, 웹+offline에서도 동작할 수 있게 만드는 기술)