Ajax란, 비동기 통신과 동기 통신 차이

 

 

AJAX 란

• Ajax(Asynchronous JavaScript and Xml)
• 자바스크립트의 라이브러리 중 하나이며, 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 전체 페이지를 새로 고치지 않고 페이지의 일부만을 로드하는 기법
• 이를 정리하자면, 자바스크립트를 사용한 비동기 통신이며, 클라이언트와 서버간에 XML 데이터를 주고받는 기술

 

 

• 비동기 방식은 웹페이지를 리로드 하지 않고 데이터를 불러옵니다. Ajax 를 통해 서버에 요청을 하더라도 멈춰있지 않고 해당 프로그램은 계속 돌아가고 있음
• 이러한 비동기 방식은 시간도 빠르고, 화면을 리로드 하는 경우 전체 리소스를 다 가져올 필요없이 일부 필요한 부분만 가져오기 때문에 장점

 

 

Ajax 예제

 

$.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 구문과 동일합니다.
  },
})

 

 

 

 

출처 및 참고

https://velog.io/@izuiw/%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%86%B5%EC%8B%A0%EA%B3%BC-%EB%8F%99%EA%B8%B0-%ED%86%B5%EC%8B%A0-%EC%B0%A8%EC%9D%B4-Ajax

비동기 통신과 동기 통신 차이, Ajax

 

https://azderica.github.io/00-javascript-ajax/

[JavaScript] Ajax 정리 - Azderica