[Javascript] Ajax

2024. 9. 7. 02:16·Back-End/Front-End

[작성일: 2023. 04. 09]

 

Ajax

  • Asynchronus Javascript and XML
  • 비동기적인 자바스크립트와 XML
  • 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법
  • Ajax는 웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부를 갱신할 수 있음.
  • 백그라운드 영역에서 서버와 통신하여 결과를 웹 페이지에 표시할 수 있음. 
  • 서버와 아래와 같은 데이터를 주고받을 수 있음.
    • JSON
    • XML
    • HTML

 

 

 

Ajax의 장점

  • 페이지 전체를 로드하지 않고도 일부분만의 갱신이 가능함.
  • 페이지가 로드된 후 서버로 데이터 요청을 보내거나 받을 수 있음.
  • 다양한 UI(동적 페이지) 구현 가능함.

 

 

 

Ajax의 단점

  • 페이지 이동이 없으므로 히스토리 관리가 되지 않음.
  • 반복적인 데이터를 요청하면 느려지거나 작동하지 않음.
  • 페이지 이동이 없으므로 보안상 문제가 발생할 수도 있음.

 

 

 

Ajax의 구성 요소

  • 웹 페이지 표현을 위한 HTML, CSS
  • 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위한 DOM
  • 데이터 교환을 위한 JSON, XML
  • 웹 서버와 비동기식 통신을 위한 XMLHttpRequest 객체
  • 위에서 언급한 기술들을 결합하여 작업 flow를 제어하는 Javascript

 

 

 

 

 

XMLHttpRequest 객체

  • Ajax의 핵심
  • Ajax에서 XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터 교환 시 사용함.
  • 웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 XMLHttpRequest 객체 때문임.

 

 

 

XMLHttpRequest 객체 생성하기

var 객체명 = new XMLHttpRequest();

 

 

 

서버에 요청하기(request)

  • Ajax에서는 객체 생성 후 open(), send() 메서드를 사용하여 요청을 보냄.

 

 

 

open()

  • 서버로 보낼 Ajax request의 형식(type)을 결정함.
  • oepn(전달방식, URL주소, 동기여부)
    • 전달방식   GET, POST 중 선택
    • URL주소   요청을 처리할 서버의 파일 주소
    • 동기여부   요청을 동기식으로 전달할지 비동기식으로 전달할지 여부

 

 

 

send()

  • 작성된 Ajax request를 서버로 전달
  • 전달 방식에 따라서 인수가 있을 수도 있고 없을 수도 있음.
send();   // GET 방식
send(문자열);   // POST 방식

 

 

 

 

 

XMLHttpRequest의 readyState

  • 처음에는 readyState가 0 (객체명.UNSEND)
  • open 메서드를 호출하면 1 (객체명.OPENED)
  • send 메서드를 호출하면 상태가 계속 바뀜.
    • 2 (객체명.HEADERS_RECEIVED)
    • 3 (객체명.LOADING)
    • 4 (객체명.DONE)
  • 최종적으로 readyState가 4가 되면 상태코드(객체명.status)가 200, 201일 때 응답을 확인함.

 

 

 

 

 

 

 

 

 

 


🐣 해당 게시글은 입문 개발자가 요약/정리한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.

 

저작자표시 비영리 변경금지 (새창열림)
'Back-End/Front-End' 카테고리의 다른 글
  • [Javascript] JSON
  • [Javascript] jQuery
  • [Javascript] DOM, BOM
  • [Javascript] 함수와 객체
뚜비
뚜비
1년차 백엔드&iOS 개발자의 감자 탈출 블로그 🥔🥔
  • 뚜비
    뚜비의 개발로그
    뚜비
  • 전체
    오늘
    어제
  • 글쓰기     관리
    • Devlog
      • Back-End
        • Java
        • Spring
        • JPA
        • HTTP
        • Security
        • Back-End
        • Front-End
      • 알고리즘
      • iOS
        • Swift
      • Database
      • Tips
        • Git & GitHub
        • A to Z
      • 프로젝트
      • 생각정리
  • 태그

    Java
    객체
    의존성주입
    자바
    Spring Security
    DB
    최주호
    성능최적화
    게시판만들기
    Database
    sql
    HTTP
    자바스크립트
    스프링
    Security
    프로그래머스
    데이터베이스
    김영한
    MVC
    백준
    생성자
    JPA
    html
    spring
    javascript
    jsp
    다형성
    알고리즘
    Swift
    변수
  • hELLO· Designed By정상우.v4.10.0
뚜비
[Javascript] Ajax
상단으로

티스토리툴바