AJAX: fetch함수, 동기, 비동기 방식

언어/HTML,CSS,JS

AJAX: fetch함수, 동기, 비동기 방식

Iam_im2 2022. 6. 8. 19:57

728x90

1. AJAX (Asynchronous Javascript And XML) 정의

➢ JavaScript를  사용한  비동기  통신, 클라이언트와  서버간에  XML데이터를  주고  받는  기술
   ▪  자바스크립트를  통해서  서버에  데이터를  요청하는  것
➢ 특정화면만  바꾸고  싶을  때  사용.
   ▪  EX) 네이버  로그인  할  때  로그인  부분만  변경됨. 페북  댓글  작성시  누가  작성중입니다. 라는 문구가  나온다.
➢ 전체  웹페이지를  로드할  필요없이  일부화면만  갱신해서  웹페이지  속도  향상
➢ 클라이언트에서  서버로  데이터를  요청하고  결과를  돌려받을  수  있다. 그동안  브라우저가  멈추지 않는다.

2. 클라이언트와 서버

1) 클라이언트
➢ 서버에서 정보를 가져와 사용자에게 보여줄 수 있는 소프트웨어.
▪ 예) 웹브라우저, App

2) 서버
➢ 네트워크상에서 접근할 수 있는 프로그램
➢ 어떤 자료들에 대한 관리나 접근을 제어하는 프로그램
➢ 일반적으로 서버에는 사용자가 직접 접근하지 않는다.

3. AJAX장단점

1) 장점
▪  웹페이지의 속도향상 서버의 처리가 완료될 때까지 기다리지 않고 처리 가능
▪  서버에서  Data만  전송하면  되므로  전체적인  코드의  양이  줄어든다.
▪  기존  웹에서는  불가능했던  다양한  UI 가능

2) 단점
▪  히스토리  관리불가
▪  보안상  문제  : 페이지  이동  없는  통신
▪  연속적으로  데이터  요청시  서버  부하  증가
▪  XMLHttpRequest를  통해  통신하는경우, 사용자에게  정보  미전송.
   ▶ 요청이  완료되지  않았는데도, 사용자가  페이지를  떠나는  등의  오작동  우려
▪  Script로  작성되므로  디버깅이  용이하지않다.

4. AJAX진행과정

1) XMLHttpRequest Object 생성
   ▪  request를  보낼  준비를  브라우저에게  시키는  과정
   ▪  이를  위해  필요한  method를  갖춘  object가  필요

2) callback 함수  생성
   ▪  서버에서  response가  왔을  때  실행시키는  함수
   ▪  HTML 페이지를  업데이트

3) Open a request
   ▪  서버에서  response가  왔을  때  실행시키는  함수
   ▪  HTML 페이지를  업데이트

4) send the request

5. AJAX사용법

AJAX사용법은 일반적으로 3가지로 구분한다.
1)옛날 방식

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ajax1</title>
</head>
<body>
  <script>
    /*loadDoc 문서를 읽는다.*/
    // XMLHttpRequest 생성
    function loadDoc(){
      var xhttp = new XMLHttpRequest();

      // 응답 왔을 때의 콜백 함수 정의
      xhttp.onreadystatechange = function(){
        // this.readyState == 4 : 정상완료
        // this.status == 200 : 성공
        // this.status == 404 : 파일을 못 찾았다
        // 200이오든 404가오든 request에 response가 오면 정상완료.
        if (this.readyState == 4 && this.status == 200){
          document.getElementById("demo").innerHTML = this.responseText;
        }
      };
      //통신 방식이나 대상을 설정
      // 방식 : GET(읽기), POST(쓰기), PATCH, DELETE, ...
      xhttp.open('GET','ajax_info.txt', true);
      xhttp.send();
    }
  </script>
  <div id="demo"></div>
  <button onclick="loadDoc()">get data</button>
</body>
</html>

2) jquery이용

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ajax2</title>
    <!-- jquery cdn import -->
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
    crossorigin="anonymous"></script>
</head>
<body>
  <script>
    $(function () {
      $('#get_data_button').click(function () {
        // GET 방식
        $('#demo').load('ajax_info.txt');
      });
    });
  </script>
  <div id="demo"></div>
  <button id="get_data_button">get data</button>
</body>
</html>

3) fetch함수
▪ fetch함수를 사용한 방식이 가장 최근방식이고 잘 사용되는 방식이다.
▪ stringify() : json형태 그대로 string으로 변환

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ajax3</title>
</head>
<body>
  <script>
    function loadDoc() {
      console.log('start');

      fetch('ajax_info.txt')
        // .then(function (response) {
        //   return response.text();
        // })

        // 화살표 함수 (arrow function)
        // 람다식 (lambda exepression)
        .then(response => response.text())  // 기다렸다가 여기서 처리
        .then(text => {                     // 기다렸다가 여기서 처리
          console.log('!!!!!!');
          document.getElementById('demo').innerHTML = text;
        });

      console.log('end');
    }
  </script>
  <div id="demo"></div>
  <button onclick="loadDoc()">get data</button>

  <!-- fetch함수 예시2 -->
  <!--
  <script>
        fetch('https://www.naver.com/example.json')
      .then((response) => {
        return response.json()
      })
      .then((결과) => {
        console.log(결과)
      })
  </script>
  -->
</body>
</html>

6. 동기/비동기 방식

1) 동기(Synchronous)
   ▪  동기는  요청을  보낸  후  응답(결과물)을  받아야지만  다음  동작이  이루어지는  방식
   ▪  모든  일은  순차적으로  실행되며  어떤  작업이  수행중이라면  다음  작업은  대기
   ▪  Blocking : 앞선  작업의  소요  시간으로  인해  다음  함수의  실행이  중단되는  것.

2) 비동기  (Asynchronous)
   ▪  앞선  작업이  종료되지  않아도  기다리지  않고  다음  작업을  실행하는  것
   ▪  비동기 함수는 앞선 작업이 종료되지 않아도 바로 다음 작업을 실행하여 Blocking 해결
   ▪  BUT 작업의  실행  속도  보장X
   ▪  대표적인  것이  AJAX

REST API, CORS 에러 해결방법

참고 자료
w3schools

728x90

저작자표시 비영리 변경금지

'언어 > HTML,CSS,JS' 카테고리의 다른 글

REST API, CORS 에러 해결방법 (0)	2022.06.12
jQuery selector(선택자), val(), text(), html() (0)	2022.06.02
jQuery : jQuery개념, jQuery cdn적용방법, onclick, 메서드 체인, append (0)	2022.06.02
JavaScript Selector, mouse 관련 이벤트 (onmouseover, onmouseleave) (0)	2022.05.31
JavaScript관련 기본개념 : DOM, 함수선언 및 실행(alert, confirm, prompt )등 (0)	2022.05.31

현재글AJAX: fetch함수, 동기, 비동기 방식

내맘대로 개발개발