Ajax — 삶이 온통 사람의 길이니

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

'JavaScript > Study Note' 카테고리의 다른 글

티스토리툴바