<TIL> 144. Ajax?

YUJIN LEE·2023년 9월 1일
0

개발log

목록 보기
136/149

AJAX

Asynchronous JavaScript and XML
AJAX를 사용 시 웹 페이지에서 비동기적으로 데이터를 가져오고 업데이트할 수 있다.

AJAX의 구성요소

  1. Asynchronous(비동기적)
    AJAX는 비동기적인 방식으로 동작.
    브라우저가 웹페이지를 계속 실행하며 서버로 요청을 보내고 응답을 기다리지 않아도 된다는 것을 의미.
    데이터를 요청하고 응답이 올 때 까지 다른 작업을 계속할 수 있다.

  2. JavaScript
    AJAX는 JavaScript를 사용해 클라이언트 측에서 동작.
    JavaScript는 브라우저에서 실행, 사용자와 상호작용하고 웹 페이지를 동적으로 제어

  3. XML or JSON
    AJAX의 요청은 주로 XML, JSON 형식 데이터 사용.
    이 데이터 형식은 서버와 클라이언트 간에 구조화된 정보를 주고받기 위해 사용

  4. XMLHttpRequest 객체 or Fetch API
    AJAX 요청 생성하고 통신하기 위해 2가지 사용.
    이 객체를 사용해 서버로 데이터를 보내고, 받을 수 있음

AJAX 작동

  1. 사용자가 웹 페이지에서 어떤 작업 수행 -> JavaScript 코드 실행
  2. JavaScript 코드 -> XMLHttpRequest객체나 Fetch API를 사용해 서버에 요청
    -> 비동기적 작업이라 다른 작업 가능
  3. 서버 요청 받은 작업 수행 후 응답을 클라이언트에 전송
  4. 클라이언트에서는 응답을 받고, 웹페이지 일부 업데이트 or 새로운 데이터 표시 등 작업 수행

=> 웹 페이지를 새로고침하지 않아도 동적으로 데이터를 로드하고 업데이트 가능.

AJAX 설정

async(default: true)

기본이 비동기 처리. 동기 처리를 하려면 변경하면됨

complete: function(jqXHR jqXHR, String textStatus)

success, error에 관계없이 실행하고 싶은 로직 추가.
finally와 같은 기능 수행

beforeSend: function(jqXHR jqXHR, PlainObject settings)

ajax가 서버로 요청하기 전에 실행되는 로직 실행 가능

참고문헌
https://milenote.tistory.com/46

profile
인정받는 개발자가 되고싶습니다.

0개의 댓글