[JavaScript]AJAX(Asynchronous JavaScript and XML)란?

🌙AJAX

HTML, CSS, 자바스크립트, DOM, XML 등 기존에 사용되던 여러 기술을 함께 사용하는 새로운 개발 기법이다.

 

비동기식 자바스크립트 XML(Asynchronous Javascript And XML)의 약자
빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나

*동기식 => async : false - 상대방 DATA가 날라올 때까지 기다리는 것
*비동기식 => async : true - 날라오는 DATA 신경안쓰고 할 일 하는 것

 

웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.
즉, 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다!

🌙동작 원리

Ajax를 이용한 웹 응용 프로그램은 자바스크립트 코드를 통해 웹 서버와 통신을 하게 된다.

따라서 사용자의 동작에는 영향을 주지 않으면서도 백그라운드에서 지속해서 서버와 통신할 수 있다.

 

1. 사용자에 의한 요청 이벤트가 발생한다.
2. 이벤트 핸들러에 의해 자바스크립트가 호출된다.
3. 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보낸다.(이때 웹 브라우저는 요청을 보내고, 서버의 응답을 기다릴 필요 없이 다른 작업을 처리할 수 있다.)
4. 서버는 전달받은 XMLHttpRequest 객체를 가지고 Ajax 요청을 처리한다.
5. 서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 데이터로 웹 브라우저에 전달한다.(이때 전달되는 응답은 새로운 페이지를 전부 보내는 것이 아니라 필요한 데이터만을 전달한다.)
6. 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출한다.
7. 결과적으로 웹 페이지의 일부분만이 다시 로딩되어 표시된다.

🌙XMLHttpRequest 객체

Ajax의 가장 핵심적인 구성 요소!

웹 브라우저가 서버와 데이터를 교환할 때 사용된다.

웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 바로 이 객체를 사용하기 때문이다.

🌙jQuery를 이용한 Ajax

jQuery를 이용하여 Ajax를 사용하게 되면 많은 소스 대신 몇 줄으로 간단하게 Server와 Data를 주고 받을 수 있다.

jQuery에서 제공하는 $.ajax([settings]) 함수는 다음과 같은 구조로 구성되어 있다.

$.ajax ({
  // URL은 필수 요소이므로 반드시 구현해야 하는 Property입니다.
  url    : "url", // 요청이 전송될 URL 주소
  type    : "GET", // http 요청 방식 (default: ‘GET’)
  async : true,  // 요청 시 동기화 여부. 기본은 비동기(asynchronous) 요청 (default: true)
  cache : true,  // 캐시 여부
  timeout : 3000, // 요청 제한 시간 안에 완료되지 않으면 요청을 취소하거나 error 콜백을 호출.(단위: ms)
  data  : {key : value}, // 요청 시 포함되어질 데이터
  processData : true, // 데이터를 컨텐트 타입에 맞게 변환 여부
  contentType : "application/json", // 요청 컨텐트 타입 
  dataType    : "json", // 응답 데이터 형식 (명시하지 않을 경우 자동으로 추측)
  beforeSend  : function () {
    // XHR Header를 포함해서 HTTP Request를 하기전에 호출됩니다.
  },
  success : function(data, status, xhr) {
    // 정상적으로 응답 받았을 경우에는 success 콜백이 호출되게 됩니다.
    // 이 콜백 함수의 파라미터에서는 응답 바디, 응답 코드 그리고 XHR 헤더를 확인할 수 있습니다.
  },
  error    : function(xhr, status, error) {
        // 응답을 받지 못하였다거나 정상적인 응답이지만 데이터 형식을 확인할 수 없기 때문에 
        // error 콜백이 호출될 수 있습니다.
        // 예를 들어, dataType을 지정해서 응답 받을 데이터 형식을 지정하였지만,
        // 서버에서는 다른 데이터형식으로 응답하면  error 콜백이 호출되게 됩니다.
  },
  complete : function(xhr, status) {
    // success와 error 콜백이 호출된 후에 반드시 호출됩니다.
    // try - catch - finally의 finally 구문과 동일합니다.
  }
});

 

참조

http://www.tcpschool.com/ajax/ajax_intro_basic

https://devyj.tistory.com/1