끄적끄적 개발 블로그입니다.

2 분 소요

Ajax의 이해

  • Ajax(Asynchronous Javascript and XML)

    웹페이지 콘텐츠 일부 또는 전체 영역을 갱신하는 방법

    • URL 단위의 페이지 변경 ➡️ 필요한 영역만 부분 갱신(update)
    • 비동기 처리로 처리 성능 향상
    • XMLHttpRequest 객체, Fetch API
    • Asychronous : 비동기 처리
    • Javascript : 자바스크립트 이벤트로 데이터의 요청과 처리
    • XML : 데이터 교환 표준(서버에서 보내는 데이터를 담는 형식, 데이터 컨테이너)

  • 비동기(Astnchronous) 프로세스

    • 동기 프로세스: 요청을 한 번에 하나씩 처리하고 해당 요청이 처리될 때까지 실행 차단

      ➡️ 이어달리기(계주) ➡️ 성능 제약

    • 비동기 프로세스: 실행 차단없이 여러 요청을 동시에 처리 가능

      image-20240709133332449

  • 데이터 컨테이너(container)

    • 데이터를 담기 위한 구조➡️데이터 교환 표준

      ex) 택배상자

    • XML(eXtensibke Markup Language)

      • 태그 형식

        <age>20</age>

    • JSON

      • Key-Value 형식

        {age:20};

      • XML 보다 경량 ➡️ XML 태그처럼 태그명 중복이 없어서 간결한 표현이다.

Ajax 활용

  • XMLHttpRequest(XHR) 객체를 사용한 Ajax 활용

    • Ajax 요청을 생성하는 Javascript API

    • 서버와 상호작용

    • 웹페이지의 새로고침 없이 콘텐츠 갱신(update) 가능

      1. XMLHttpRequest 객체를 생성하여 초기화 한다.
      2. XMLHttpRequest 객체를 open()메서드로 요청할 조건을 구성한다.
      3. XMLHttpRequest 객체를 서버로 전달하여 요청 과정을 수행한다.
      4. 서버로 전달된 요청에 대한 응답을 처리할 콜백 함수를 정의한다.

      속성]
      readyStatr: 0(아무상태아님)
      —요청—
      1(open메소드 호출-URL요청)
      2(send 메소드 호출-파라미터 전달)
      —응답—
      3(요청한 데이터를 일부분 받는 중)
      4(요청한 데이터를 전체 받았을 때)
      —
      onreadystatechange: 이벤트 속성( readyState값이 변경되었을 때 발생하는 이벤트)
      status : 서버의 상태
      ex)
      200: 정상 상태
      403: 요청 권한 없음
      404: 요청 페이지 없음
      405: 요청한 메소드(doGet, doPost)가 준비되지 않음
      500: 요청한 페이지가 서버에서 실행중(runtime시)에러발생
      메소드]
      open(‘HTTP요청방식’, ‘요청URL’, ‘비동기식방식’)
      send(‘요청 URL에게 전달할 데이터’)
      ➡️send(name=홍길동 & age=13)

      요청방식의 예 : GET/POST/PUT/DELETE

    • 개념 정리

      • querySelector

      element = blaseElement.querySelector(selectors);

      리턴되는 값은 인자를 받아 일치하는 baseElement의 자손의 엘리먼트를 가지고 온다.

  • XMLHttpRequest API

    • API(Application Programming Interface) ➡️ (프로그램) 사용설명서

    image-20240709142401992

    • XML ➡️ 문법(syntax) + 컨테이너(data container)
    • DTD(Document Type Definition), XML 스키마(Schema)

XML과 JSON

  • XML과 JSON

    • XML(eXtensible Markup Language)이란?

      확장가능한 마크업 언어라는 뜻으로 주로 웹에서 데이터를 전송하기 위해 미리 약속해둔 방식으로 만들어진 문서이다.

공통점 차이점
데이터 교환 표준 JSON은 닫기 태그 없음
데이터 컨테이너 JSON은 XML보다 경량
계층구조로 이해가 용이(Self-descriptive) JSON은 다수의 데이터 타입 지원
프로그램 언어에 독립적 파서(parser)의 차이 -XML 파서 vs 자바스크립트 API
  • XML과 JSON은 데이터 저장 방식이 같다.
JSON 메서드 설명
JSON.parse() JSON 문자열을 JSON 객체로 변환
JSON.stringify 자바스크립트의 값이나 객체를 JSON 문자열로 변환

image-20240709162042569

❗무조건 변환하는것이 아니라 형식이 맞아야한다. 그렇기 때문에 문자열을 객체로 변환할 때 주의해야한다.

Ajax 응용

  • Ajax 응용

    tip] RSS

    뉴스나 블로그 같이 콘텐츠 업데이트가 자주 일어나는 사이트에서 업데이트된 정보를 사용자들에게 제공하기 위한 서비스입니다. 업데이트된 정보를 XML 형채로 제공하며, 이때 사용되는 XML문서를 RSS(Really Simple Syndication)피드라고 합니다.

    image-20240709163929411

    • 동일 출처 정책(SOP, Same Origin Policy)

      image-20240709155230102

    • CORS(Cross-Origin Resource Sharing, 교차 출처 자원 공유) :

      특정 서버에서 실행중인 웹 애플리케이션이 다른 서버의 자원에 접근 할 수 있는 권한을 부여하도록 브라우저에 알려주는 제약사항

Fetch API

  • Fetch API

    • XMLHttpRequest 객체 보다 기능이 향상된 대체제

    • 체이닝(chaining) 문법

      fetch(url,[옵션]).then().then();

    • MIME(Multipurpose Internet Mail Extensions) : 클라이언트에게 전송된 문서의 타입을 알려주기 위한 방식

      text/html, text/css, image/png, application/javascript 등

    • 확장자(extension) vs. MIME

업데이트:

댓글남기기

참고