fetch('html').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
})
});
fetch('html');
- 첫번째 인자로 전달된 데이터를 서버에게 요청하는 함수
then 이하
- 서버가 준비될 때까지 다른 일을 하겠다.
function callbackme() {
}
fetch('html').then(callbackme);
- fetch API야. 응답이 끝나면 callbackme 라는 함수를 실행시켜줘.
function callbackme() {
console.log('response end');
}
fetch('html').then(callbackme);
console.log(1);
console.log(2);
실행결과는?
- fetch를 통해서 html 호출, then을 통해서 callbackme 함수 호출해달라고 요청
- 이후 코드 실행하다 웹브라우저가 응답 받는 것이 끝나면 그때 callbackme 함수 호출
⇒ 비동기적 실행이라는 것을 알 수 있음(Asynchronous)
- 동시에 병렬적으로 실행됨(fetch를 통해 html을 호출하면서 이후 코드들 실행)
함수를 여러곳에서 쓰는 게 아니라면 이름을 가질 필요가 없음 ⇒ 익명함수 사용
function callbackme() {
console.log('response end');
}
// 위와 같은 함수
callbackme = function(){
console.log('response end');
}
익명함수를 사용한다면 fetch와 함께 쓰는 then에서 함수 호출할 때도 익명으로 호출 가능
function callbackme() {
console.log('response end');
}
fetch('html').then(callbackme);
// 위와 같은 코드
fetch('html').then(function(){
console.log('response end');
});
then에 콜백함수를 주면 콜백함수를 fetch API가 실행시킬 때 콜백함수의 첫번째 인자로 response 객체를 주겠다..
// 무슨 말인지 모르겠으니 console.log로 값을 보자
fetch('html').then(function(response){
console.log(response);
});
결과에 나오는 status: 200을 잘 보자. 네트워크에 나오는 것과 같다.
웹브라우저와 웹서버가 통신을 할 때 웹서버가 응답을 하면서 파일을 잘 정상적으로 찾았다면 응답하면서 200이라고 알려준다. ⇒ 200은 성공이라는 뜻
만약 파일을 찾을 수 없다면 404를 알려준다. ⇒ 404 Not found
response.status를 하면 결과를 가져올 수 있다. (ex: 200, 404..)
fetch('html').then(function(response){
console.log(**response.status**);
});
fetch 결과에 따라 경고창 띄우는 등 가능
fetch('html').then(function(response){
if (response.status === '404'){
alert('Not found');
}
});
현재 코드 상태 ⇒ 중복되는 부분이 너무 많음 ⇒ 함수를 이용해서 중복을 최소화하자
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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){
document.querySelector('article').innerHTML = text;
});
});
"
>HTML</a
>
</li>
<li>
<a
onclick="
fetch('css').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
});
});
"
>CSS</a
>
</li>
<li>
<a
onclick="
fetch('javaScript').then(function(response){
response.text().then(function(text){
document.querySelector('article').innerHTML = text;
});
});
"
>JavaScript</a
>
</li>
</ol>
<article></article>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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="fetchPage('html')">HTML</a>
</li>
<li>
<a onclick="fetchPage('css')">CSS</a>
</li>
<li>
<a onclick="fetchPage('javascript')">JAVASCRIPT</a>
</li>
</ol>
<article></article>
<script>
function fetchPage(name) {
fetch(name).then(function (response) {
response.text().then(function (text) {
document.querySelector('article').innerHTML = text;
});
});
}
</script>
</body>
</html>
- script를 추가해서 함수를 만들었고 매개변수로 각 이름을 받게 함.
- html에서 onclick를 했을 때 함수를 불러오도록 함.
html에서 원하는 곳에 id를 부여하고 주소창에 해당 페이지주소#id이름을 적는다면 그 위치가 보인다. 이를 hash라 한다.
ex) index.html
블라블라블라
...
<p id="three">
.dkhakhkeigkdkjg;a
</p>
index.html#three를 주소창에 입력하면 three를 가진 p를 보여준다.
이 id를 보고 싶다면 location.hash를 사용한다.
if (location.hash) {
console.log(location.hash);
} // #three
#없이 보고 싶다면 substr사용
if (location.hash) {
console.log(location.hash.substr(1));
} // three
위에서 Ajax를 이용해 만든 페이지에 적용시켜보자.
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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 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>
</ol>
<article></article>
<script>
function fetchPage(name) {
fetch(name).then(function (response) {
response.text().then(function (text) {
document.querySelector('article').innerHTML = text;
});
});
}
</script>
</body>
</html>
해시를 사용했다는 뜻에서 !를 붙인다. 이를 뱅이라고 한다.
<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>
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="colors.js"></script>
</head>
<body>
<h1><a href="#!welcome">WEB</a></h1>
<input
id="night_day"
type="button"
value="night"
onclick="
nightDayHandler(this);
"
/>
<ol>
<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>
</ol>
<article></article>
<script>
function fetchPage(name) {
fetch(name).then(function (response) {
response.text().then(function (text) {
document.querySelector('article').innerHTML = text;
});
});
}
if (location.hash) {
fetchPage(location.hash.substr(2));
} else {
fetchPage('welcome');
}
</script>
</body>
</html>
function fetchPage(name) {
fetch(name).then(function (response) {
response.text().then(function (text) {
document.querySelector('article').innerHTML = text;
});
});
}
if (location.hash) {
fetchPage(location.hash.substr(2));
} else {
fetchPage('welcome');
}
- hash가 있다면 #!를 뺀 뒷부분의 이름을 가진 파일을 가져오고, 없다면 welcome 파일을 가져와라.
'JavaScript > Study Note' 카테고리의 다른 글
call by reference & call by value (0) | 2022.01.11 |
---|---|
filter() (0) | 2022.01.10 |
forEach() vs. map() (0) | 2022.01.05 |
createElement & appendChild (0) | 2021.12.27 |