ajax
: 사용성 증대, 필요한 부분만 로드할 수 있기 때문에 네트워크 자원 절약 가능.
fetch
: 인자로 전달된 데이터를 서버에게 요청하는 파일.
EX)
fetch('css').then(function(response){ // fetch('html') 은 html이라는 파일에서(확장자아님) 데이터를 가져옴
response.text().then(function(text){ // then은 마지막 }) 까지 범위. fetch를 통해 서버에서 응답이 끝나면 then을 실행
alert(text);
})
})
만약,
function callbackme(){
console.log('response end');
}
fetch('css').then(callbackme);
console.log(1);
console.log(2);
이런 경우라면, fetch가 css라는 파일을 가져오는 동안 console.log가 실행이되고
가져오는 게 완료가 되면 callbackme가 실행이 되는 것. ==> 비동기적 처리 ( <-> 동기적처리 : callbackme가 실행될 때까지 console.log가 실행되지 않음)
또한 fetch('css').then(callbackme); 는 fetch('css').then(function(){console.log('response end');}); 이것과 같고
이렇게 fetch API 에서 then에 "콜백함수"가 오는 경우, 그 첫번째 인자값으로 response 객체를 주겠다고 되어있다. --> 설명서?에 그렇게 나와있다고 함.
따라서 fetch('css').then(function(response){console.log('response end');}); 요로케 되는 것
response는 console에 찍어보면 자세히 볼 수 있음. Console에서 찍을 때는 response.stauts라고 하면 뽑아낼 수 있음
- Status 가 200 -> 성공적으로 통신
- Status 가 404 -> 파일을 찾을 수 없음.
즉, response 객체는 fetch를 통해서 요청을 했을 때 웹서버가 응답한 결과를 담고 있는 것.
구현한 모습과 코드
<!doctype html>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8">
<script src="colors.js"></script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
<ol>
<li><a onclick="
fetch('html').then(function(response){
response.text().then(function(text){ // response.text() : 서버의 응답을 텍스트 문자열로 반환
document.querySelector('article').innerHTML = text; // innerHTML : 해당 HTML의 article 태그 안에 표시인듯.
})
});
">HTML</a></li>
<li><a onclick="fetchpage('css')">CSS</a></li> <!-- 인자값 전달할 때 ''로 묶어주는 거 주의. 없으면 에러뜸 -->
<li><a onclick="fetchpage('javascript')">JavaScript</a></li>
</ol>
<article>
</article>
<script type="text/javascript">
// 중복되는 코드 반복을 없애기 위해
function fetchpage(name) {
fetch(name).then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text; // article은 태그이름. id값은 앞에 # 붙여주면 됨
})
});
}
</script>
</body>
</html>
초기 페이지 구현(hash)
: 대표적으로 북마크 기능
해당 위치에 id 값을 주고 현재 열려있는 URL뒤에 #id값을 추가하면, 설정했던 위치로 스크롤 이동됨.
==> 해당 위치의 내용을 fragment(프레그먼트), id값을 fragment identifier라고 함.
==> 해당 주소를 통해 다른 사람에게 전달할 수 있음!
==> 이는 html에서 a태그의 href에 값으로도 전달할 수 있음. ex) <a href = "#three">3번째 문단으로</a>
<script>
if(location.hash) { // 해당 url에서 '#three' 이걸 가리킴.
console.log(location.hash.substr(1)); // # 뒤에 값만 가져옴 (ex. three)
} else {
// Fragment doesn't exist
}
</script>
사용
- <h1><a href="#!welcome">WEB</a></h1> // 기본적으로 #은 북마크 기능이기 때문에 구분하기 위해 !를 붙여줌 (= 해쉬뱅)
- <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>
==> 이러면 밑줄(하이퍼링크)이 생기고 해당 링크로 이동했을 때 URL이 바뀜(ex. http://localhost:8080/index.html/#!css이런식)
==> hash값(#)을 이용해 메인 페이지 설정도 가능함
<script>
function fetchPage(name){
fetch(name).then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
});
}
if(location.hash){ // 해쉬가 있다면 (return값은 #three 이런식으로 나옴)
fetchPage(location.hash.substr(2)); // #! 다음으로 나오는 문자만 substr
} else {
fetchPage('welcome');
}
</script>
하지만, '뒤로 가기' 같은 네비게이션을 했을 때 내용이 바뀌지 않고(구현할 수 있겠지만) 실질적인 데이터가 백엔드 쪽에 숨겨져 있기 때문에
검색엔진? (데이터를 가져와서 분석?처리하는..)에는 적합하지 않다는 한계 ===> 피젝스(pjax) 이용(단점 보완한 것)
Fetch API Polyfill
: 브라우저가 지원하지 않는 기능을 지원해줌. 즉, fetch를 지원하지 않는 브라우져도 이를 이용할 수 있게 해주는 것
: 이는 script태그의 scr를 통해서 적용하면 됨.
참고
: 선택자의 우선순위
1. #id
2. .class
3. span
: <div> 는 구분해주는 역할(특별한 기능 없음) ~> 대신 줄바꿈이 됨
<span> 은 div와 같은 역할 ~> 차이점은 줄바꿈이 안됨.
그리고 XML, JSON 찾아보는게 좋음 (=> 위에서 spilt으로 ,(콤마)로 구분하기 힘든 경우가 많이 발생)
또한 이런식으로 의도도 없이 동작하는 웹사이트를 만드는 방법을 Single Page Application (SPA)라고 함.
지금은 기초라 찾아보면 더 많은 정보 나옴
ex. PJAX , PWA(progressive Web Apps; 오프라인에서도 동작하게..!)
'소소한 지식모음' 카테고리의 다른 글
| datepicker 월별 선택으로 바꾸기 (0) | 2019.12.02 |
|---|---|
| return false, NVL, where 1=1, 커스텀태그 (0) | 2019.12.02 |
| [펌] SiteMesh 이용 (0) | 2019.06.02 |
| 회사다니면서 새로 알게된 잡지식_02 (0) | 2019.06.02 |
| UUID - 범용고유식별자 (0) | 2019.06.02 |
댓글