Java Script/기본 문법

Web storage, XMLHttpRequest

코딩 화이팅 2023. 2. 8. 13:32

Web Storage

  • Web Storage API
  • sessionStorage
  • localStorage
  • 키 / 값 쌍으로 값을 저장 : 모두 문자열로만 저장, 숫자, 배열, 객체를 storage에 넣기 위해서는 JSON파일을 이용

LocalStorage

  • setItem(key, value) 
  • getItem(key) : 키를 넣으면 그 값이 문자열로 출력
  • removeItem(key)
  • clear() : 비운다
  • key(index) : 몇 번 인덱스에 해당하는 키를 가져온다.
  • length : 갯수
 <input
      type="text"
      id="input"
      placeholder="localStorage에 저장할 값을 입력하세요"
    />
    <button id="create">등록</button>
    <button id="read">조회</button>
    <button id="delete">삭제</button>
    <div id="display">
      <!-- 여기에 로컬스토리지에 저장된 값을 보여줍니다. -->
    </div>
    <script>
      // 등록 이벤트 처리
      let createBtn = document.querySelector('#create');
      console.log(createBtn);
      createBtn.addEventListener('click', function () {
      console.log('click event 발생');
        // input 태그에 있는 값을 꺼내와서...
        let inputTag = document.querySelector('#input');
        // .value 속성을 이용해 값을 얻어올 수 있어요.
        console.log(inputTag.value);

        // 왠만하면 JSON 객체를 이용해서 json 문자열로 바꾼뒤에
        // localStorage에 넣으면..
        // 객체, 배열, -> 문자열로 바꿔야됨
        let jsonStr = JSON.stringify(inputTag.value);

        // localStorage에 집어넣어야..
        // 로컬스토리지에는 값이 문자열로만 저장됨!
        // setItem(키, 값)
        localStorage.setItem('data', jsonStr);
      });
      
      // 조회 이벤트
      let readBtn = document.querySelector('#read');
      readBtn.addEventListener('click', function () {
        // localStorage에 있는 값을 가져온다.
        let str = localStorage.getItem('data');
        // let은 블록스코프이므로,
        // 하위의 두개 블록에서 모두 보이고 싶다면
        // 상위 블록으로 빼야 함
        let displayDiv = document.querySelector('#display');

        // 없으면 null이므로 null 체크를 한다.
        if (str != null) {
          // 해당하는 key의 값이 존재한다면,
          // div#display 여기에 다가 값을 표시한다.
          // 정규표현식으로 제거한다.
          // Regexp
          // str.replace(/찾을 문자열/g, "변경할 문자열")
          // g : global 모두 바꾼다.
          str = str.replace(/\"/g, '');
          displayDiv.innerText = str;
        } else {
          // 해당하는 key의 값이 없다면
          displayDiv.innerText = '해당하는 key의 값이 없어요.';
        }
      });
      
      // 삭제 이벤트 처리
      let deleteBtn = document.querySelector('#delete');
      deleteBtn.addEventListener('click', deleteHandler);

      function deleteHandler() {
        // 값을 삭제
        localStorage.removeItem('data');
      }

.Parse : 문자열->객체

.Stringify : 객체->문자열

Ajax(Asynchronous JavaScript and XML)

  • AJAX(비동기 방식의 자바스크립트 XML)
  • AJAX APPs
    • 구글맵, Vibe, 네이버 등
  • 화면의 일부분만 변경
    • 기존->서버 요청, 대기, 전체화면 새로고침(<a href="네이버">)
    • AJAX->업데이트가 필요한 부분만 변경

동기방식

	function foo() {
  console.log("foo");
}

//delay시간 동안 멈춤, 대기(동기)
function sleep(delay) {//동기
  var start = new Date().getTime();
  while (new Date().getTime() < start + delay);//delay초까지 기다리는 함수
}

function bar() {
  console.log("bar");
}

sleep(3000);
foo();
sleep(3000);
bar();
//
[Running] node "c:\Users\SSAFY\Desktop\test\FrontEnd\08_AJAX\01_동기.js"
3초후->foo
또 3초 후->bar

[Done] exited with code=0 in 7.081 seconds

비동기방식

function foo() {
  console.log("foo");
}

function bar() {
  console.log("bar");
}

//window객체가 갖고 있는 메서드(비동기=대기하지 않음)
//setTimeout(함수, delay)->delay초 이후에 실행
setTimeout(foo, 3000);//동기였다면 출력 후 3초 대기
setTimeout(bar, 3000);//대기하지 않고 그 다음 문장 바로 실행
//
[Running] node "c:\Users\SSAFY\Desktop\test\FrontEnd\08_AJAX\02_setTimeout.js"
3초 후에 두개 동시 출력
bar
foo

[Done] exited with code=0 in 4.088 seconds

XMLHttpRequest

  • 1999년 마이크로소프트 개발(개발 당시에는 주목x)
  • 자바스크립트 객체
  • 표준  HTTP방식(GET(데이터 요청)/POST(데이터 전송))으로 서버와 통신
  • 서버와 통시 시 비동기적으로 작업
    • 백그라운드에서 작업
  • XMLHttpRequest 생성자 함수를 통해 생성 : new XMLHttpRequest()

XMLHttpRequest 객체의 메서스들

  • open("Http method", "URL", sync/async(비동기가 기본))
    • 요청의 초기화 작업(사전 준비 작업)
    • GET/POST 지정
    • 서버 URL지정
    • 동기/비동기 설정
  • send(content)->요청을 보냄
    • GET방식은 URL에 필요 정보를 추가하기 때문에 null적용
    • POST 방식에서 파라미터 설정 처리

 

XMLHttpRequest 객체의 프로퍼티들

  • onreadystatechange
    • 서버에서 응답이 도착했을 때 호출될 콜백함수 지정
    • 콜백함수는 상태(readyState)가 변경될 때 마다 호출
  • readyState
    • 0->UNSENT(객체 생성 후 open메서드 호출 전)
    • 1->OPEND(open 메서드가 호출되고 send 호출 전)
    • 2->HEADERS_REVEIVED(send 메서드가 호출되었지만 서버 응답 전, 헤더와 상태 확인 가능)
    • 3->LOADING(다운로드 중, 데이터의 일부가 전송된 상태)
    • 4->DONE(모든 데이터 전송 완료)
  • status
    • 200-> ok(요청 성공)
    • 404-> Not Found(페이지를 못 찾을 경우)
    • 500->Server Error(서버에서 결과 생성시 오류 발생)
  • responseText
    • 서버의 응답결과를 문자열로 받기
  • responseXML
    • 서버의 응답결과는 XML Document로 받기

AJAX 프로그래밍 순서

1. 클라이언트 이벤트 발생

2. XMLHttpRequest 객체 생성

3. XMLHttpRequest 객체 콜백함수 설정

4. XMLHttpRequest 객체를 통한 비동기화 요청

5. 서버 응답결과를 생성하여 클라이언트로 전송

6. XMLHttpRequest 객체는 서버 결과를 처리할 콜백함수 호출

7. 결과를 클라이언트 화면에 반영

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Text 파일 이용</title>
  </head>
  <body>
    <h1>서버에서 받은 메시지</h1>
    <div id="msg-view"></div>
    <button id="get-data">요청</button>

    <script>
      let xhr; //껍데기 준비

      //1. 클라이언트에서 요청이 발생해야한다.
      // let requestBtn=document.querySelector('#get-data');
      // Btn.addEventListener~ 이 두개를 합친게 밑에 한 줄
      document.querySelector('#get-data').addEventListener('click', () => {
        // AJAX 요청과 응답 처리를 진행할 XMLHttpRequest 객체 생성자 함수 호출
        xhr = new XMLHttpRequest();
        // xhr의 상태가 바뀔 때 마다 호출할 콜백함수를 등록하겠다.
        xhr.onreadystatechange = responseMsg;

        //서버에 요청을 보낼거에요.
        //open("요청방식", "URL(어디다가 어떤 요청을 보낼건지)", ["비동기방식의 여부"])
        xhr.open('GET', './data/hello.txt', true);

        //요청보내기
        xhr.send();
      });

      //AJAX 요청에 대한 응답이 왔을때 사용할 콜백함수
      function responseMsg() {
        //서버의 응답이 완벽하게 끝났을때
        if (xhr.readyState == 4) {
          //서버에서 오류가 없이 정상적으로 처리가 됬을때
          if (xhr.status == 200) {
            // console.log(xhr)
            document.querySelector('#msg-view').innerHTML = xhr.responseText;
          } else {
            console.log('정상적으로 데이터를 수신하지 못했다.');
          }
        }
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>JSON 파일 이용</title>
  </head>

  <body>
    <h1>JSON 파일을 읽어 멤버를 호출해보자</h1>
    <textarea id="student" cols="30" rows="10"></textarea>
    <input type="button" value="출석" onclick="requestMsg()" />
    <script>
      //껍데기
      let xhr;
      //textarea 태그를 가지고 왔다.
      let studentArea = document.getElementById('student');

      function requestMsg() {
        xhr = new XMLHttpRequest();//객체생성
        xhr.onreadystatechange = callbackFunc;
        xhr.open('GET', './data/member.json');
        xhr.send();
      }

      function callbackFunc() {
        //완벽하게 통신이 끝났을때
        if (xhr.readyState == 4) {
          //OK
          if (xhr.status == 200) {
            //JSON 파일을 읽어왔따. (얘는 어차피 문자열~~)
            //xhr.response->응답 문자열
            let stList = JSON.parse(xhr.response);
            console.log(stList);
            studentArea.value += '총학생수 : ' + stList.length + '명\n';
            for (let i = 0; i < stList.length; i++) {
              let st = stList[i];
              studentArea.value += `id : ${st.id}\nname : ${st.name}\n`;
            }
          }
        }
      }
    </script>
  </body>
</html>