AJAX (Asynchronous Javascript And XML)

• 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
• 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법

즉, 자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것

비동기방식이란?

• 어떤 일이 완료되기를 기다리지 않고 다음 코드를 실행해 나가는 방식
• 함수를 호출하는 곳에서 결과를 기다리지 않고, 다른 함수(callback)에서 결과를 기다림
• 작업 완료 여부를 확인하지 않음
  

XMLHttpRequest(XHR)객체란?

• AJAX요청을 생성하는 JavaScriptAPI
• 서버와 상호 작용하는 데 사용
• XMLHttpRequest을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있음

AJAX를 사용하는 이유

기본적으로 HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고 서버쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있음

화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하며 페이지 전체를 갱신하게 됨

하지만 이렇게 할 경우, 엄청난 자원낭비와 시간낭비를 초래하게 됨

AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 request함

이 경우, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있음

즉, WEB화면에서 무언가 부르거나 데이터를 조회하고 싶을 경우, 페이지 전체를 새로고침하지 않기 위해 사용함

Jquery를 이용한 AJAX

var parameters = $("#frm").serialize(); // form 태그 안에 있는것들을 key1=value1&key2=value2&key3=value3.... 의 형태로 만들어줌

$.ajax ({
  // URL은 필수 요소이므로 반드시 구현해야 하는 Property
  url : "url", // 요청이 전송될 URL 주소
  type : "GET",”POST” // http 요청 방식 (default: ‘GET’)
  async : true, false // 요청 시 동기화 여부. 기본은 비동기(asynchronous) 요청 (default: true)
  cache : true, fasle  // 캐시 여부
  timeout : 3000, // 요청 제한 시간 안에 완료되지 않으면 요청을 취소하거나 error 콜백을 호출.(단위: ms)
  data : parameters// 요청 시 포함되어질 데이터
  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 구문과 동일
  }
});