Ajax를 이용해서 Single Page Application을 구현할 수 있다
onclick에는 Javascript 코드가 들어간다.
// Ajax 코드 예시 <article> </article> <input type="button" value="fetch" onclick=" fetch('hi.html').then(function(response){ response.text().then(function(text){ if(response.status == '404'){ alert('Not found'); } document.querySelector('article').innerHTML = text; }) }) ">
- fetch API를 통해 브라우저가 웹 서버에게'hi.html' 파일을 요청한다.
- 서버로부터의 응답이 끝나면 then()에 있는 함수을 실행한다. (비동기)
- then에 callback 함수를 주게 되면 fetch API가 첫번째 인자의 값으로 response 객체를 준다.
Hashbang(#!)
해쉬(#)는 북마크 기능으로 url이 바뀌며 화면이 이동함(페이지 리로드 x)
페이지 내에 id가 존재하지 않는다면 url만 바뀜
이를 이용하여 Single Page Application에서 페이지를 이동한 것 같은 효과를 내기 위해서 사용// 해쉬뱅 사용 예시 <a href="#!example.html" onclick="fetchPage('example.html')">Example</a> <script> function fetchPage(name) { fetch(name).then(...); } // 사용자가 url을 직접 입력하여 들어온 경우 onclick이 발생하지 않으므로 따로 처리 if(location.hash) { // url에 해쉬가 있다면, location.hash : 현재 url의 해쉬 fetchPage(subStr(1,location.hash)); // !를 제거해서 fetchPage를 호출 } else { fetchPage('welcome.html'); } </script>Ajax를 통해서 하면 검색엔진 최적화가 안되는 등의 단점이 있어서 최근에는 Pjax를 사용함
데이터와 로직 분리하기
// before <body> ... <ul 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> </ul> </body>// after 1 // list 파일 : li 태그들이 존재 <body> <ul id="nav"> </ul> <script> fetch('list').then(function(response){ response.text().then(function(text){ document.querySelector('#nav').innerHTML = text; }) }); </script> </body>
// after 2 // list 파일 : "html, css, javascript" <script> 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+'"token operator">+item+'\')">'+item+'</a></li>'; tags = tags + tag; i = i + 1; } document.querySelector('#nav').innerHTML = tags; }) }); </script>
polyfill
polyfill을 웹서버에 다운받고 페이지에 <script src="">로 포함해주면 해당 API를 지원하지 않는 브라우저는 polyfill로 대체하여 사용하고 최신 브라우저는 자신의 API를 사용한다
키워드
- XML
- JSON
- PJAX : pushState + Ajax
- Progressive Web Apps : SPA + offline
