Ajax란?

  • 서버로부터 데이터를 가져와 전체 페이지를 새로 고치지 않고 일부만 로드할 수 있게 하는 기법으로 비동기식 요청을 보내는데 필요한 기술을 말합니다. 새로운 페이지가 로드 되는 방식이 아닌 기존 페이지에서 요청해 데이터만 활용하는 것을 말하며 자바스크립트를 사용해 XML을 이용한 서버와 통신방법을 의미합니다. Ajax를 사용하는 기본적인 방법은 브라우저에서 제공하는 XMLHttpRequest를 사용하는 것이 기본적이지만 jQuery를 사용하면 간단하게 구현이 가능합니다.

Ajax 장단점

  • 장점 : 비동기식 방식으로 웹서버의 응답을 기다리지 않고 데이터를 빠르게 처리할 수 있고 페이지 리로딩이 필요없다. (실시간 검색, 검색어 자동완성)

  • 단점 : 한 페이지에서 지속적으로 사용할 때 리소스가 계속 쌓여 페이지가 느려질 수도 있으며 스크립트로 이루어져 있어 디버깅이 어려울 수 있다.

비동기식 처리모델

  1. 페이지가 로드 되는 동안 브라우저는 먼저 서버에 데이터를 요청한다.

  2. Script문을 실행한 후 페이지의 나머지를 계속 로드하며 페이지와 사용자의 상호작용을 처리하며 브라우저는 요청한 데이터를 기다리지 않는다.

  3. 요청한 데이터가 도착하면 이벤트가 발생하면서 지정된 함수가 호출되어 실행된다.

스크린샷 2019-05-23 오후 7 59 18

$.ajax()

  • type : http 요청을 서버로 전송하는 형식 지정(GET, POST)
  • url : 데이터를 전송할 URL의 주소 설정(필수)
  • dataType : 서버가 리턴(응답)하는 데이터 타입 설정(xml, json, html)
  • success : 정상적으로 통신에 성공했을 때 처리할 로직의 함수 (data, status, xhr)
    • xhr : XMLHttpRequest 객체를 생성하는 콜백함수
    • status : 객체의 요청상태를 나타내는 문자열
    • data : 요청에 응답하는 데이터
  • error : 통신에 실패했을 때 처리할 로직의 함수, 지정한 dataType이 아닌 다른 형식으로 응답하면 error 콜백
  • data : 서버에 전송할 데이터를 key : value 형식으로 설정
    • JSON.stringify() 메소드는 객체를 JSON 형식의 문자열로 변환
    • JSON.parse() 메소드는 JSON 데이터를 가진 문자열을 객체로 변환
  • cache : true, false로 캐시 여부를 나타냄
  • async : 요청시 동기화의 여부 default는 비동기(true)
  • contentType : 서버로 데이터를 보낼때 요청하는 데이터 타입 (기본값 : "application/x-www-form-urlencoded; charset=UTF-8")
    • false로 설정시 파일 전달할때 Multipart/form-data 양식으로 전송
  • processData : 서버에 전달되는 데이터 형식은 queryString으로 전달되는데 DOMDocument가 아닌 데이터 처리인 파일전송시에는 false 처리
  • complete : 요청이 종료(성공 및 오류콜백 후)될 때 호출되는 함수 (예외처리시 finally와 같은 기능)
  • timeout : 요청제한시간으로 요청이 제한된 시간안에 완료되지 않을시 취소 또는 error 콜백

Reference