AJAX 정의

:Asynchronous JavaScript And XML의 약자로 서버로부터 데이터를 가져와 전체 페이지를 새로 고치지 않고 일부만 로드할 수 있게 하는 기법

동기식과 비동기식

우리가 기존에 a태그로 요청 및 form태그를 통해서 요청했던 방식은 동기식 요청방식(통신방식)
=> 그에 해당하는 응답페이지가 돌아와야 볼 수 있었음 (페이지 깜빡거림)

페이지 깜빡거림없이 현재 페이지 내에서 비동기식 요청을 보내기 위해서는 AJAX라는 기술이 필요함

동기식

• 요청 처리 후 그에 해당하는 응답페이지가 돌아와야만 (다른 페이지로 이동) 그 다음 작업 가능함
• 만약 서버 요청 후 호출된 결과까지의 시간이 지연되면 무한정 계속 기다려야됨(흰 페이지로 보여질 것임)
• 전체 페이지가 리로드됨(즉, 페이지가 기본적으로 깜빡거림)
  

비동기식

• 현재 페이지를 유지하면서 중간중간마다 추가적으로 필요한 요청을 보내줄 수 있음
• 요청을 한다고 해서 페이지가 넘어가지 않음(현재 페이지 그대로 떠있음)
• 요청 보내놓고 그에 해당 응답이 올 때 까지 다른 작업을 할 수 있음(즉, 페이지 깜빡거리지 않음)

ex) 실시간 검색어 로딩, 광고페이지 넘어가기, 검색어 자동완성, 아이디 중복체크, 찜하기/해제하기, 댓글작성, ....

비동기식의 단점

• 현재 페이지에 지속적으로 리소스가 쌓임 => 페이지 현저히 느려질 수 있음
  
• 페이지 내 복잡도가 기하급수적으로 증가 => 에러 발생시 디버깅이 어려움
  
• DOM 요소를 새로이 만들어내는 구문을 잘 익혀둬야함
  
  

• AJAX 구현방식 => 순수 Js방식 / jQuery방식(코드 간결, 사용 쉬움)

• jQuery방식의 AJAX통신
  $.ajax({
  속성:속성값,
  속성:속성값,
  속성:속성값,
  ...
  });

AJAX 주요 특성

• • url : 요청할 url (필수로 작성해야되는 속성)
• • method|type : 요청 전송 방식 (GET, POST)
• • data : 요청시 전달할 값 기술
• • success : ajax 통신에 성공했을 때 실행할 이벤트핸들러(함수)
• • error : ajax 통신에 실패했을 때 실행할 이벤트핸들러(함수)
• • complete : ajax 통신에 실패했든 성공했든 간에 무조건 실행할 이벤트핸들러(함수)
    
• accept : 파라미터의 타입을 설정(사용자 특화 된 파라미터 타입 설정 가능)
• async : 서버와의 비동기 처리 방식 설정 여부(기본값 true)
• beforeSend : ajax 요청을 하기 전 실행되는 이벤트 callback 함수(데이터 가공 및 header 관련 설정)
• cache : 요청 및 결과값을 scope에서 갖고 있지 않도록 하는 것 (기본값 true)
• contents : JQuery에서 response의 데이터를 파싱하는 방식 정의
• contentType : request의 데이터 인코딩 방식 정의(보내는 측의 데이터 인코딩)
• context : ajax 메소드 내 모든 영역에서 파싱 방식 정의
• crossDomain : 타 도메인 호출 가능 여부 설정(기본값 false)
• dataFilter : response를 받았을 때 정상적인 값을 return 할 수 있도록 데이터와 데이터 타입 설정
• dataType : 서버에서 response로 오는 데이터의 데이터 형 설정, 값이 없다면 스마트하게 판단함
  • xml - 트리 형태의 데이터 구조
  • json - 맵 형식의 데이터 구조(일반적인 데이터 구조)
  • script - javascript 및 일반 String 형태 데이터
  • html - html 태그 자체를 return 하는 방식
  • text - String 데이터
• global : 기본 이벤트 사용 여부(ajaxStart, ajaxStop)(버퍼링 같이 시작과 끝을 나타낼 때, 선처리 작업)
• password : 서버에 접속 권한(비밀번호)이 필요한 경우
• processData : 서버로 보내는 값에 대한 형태 설정 여부(기본 데이터를 원하는 경우 false설정)
• timeout : 서버 요청 시 응답 대기 시간(milisecond)

회원가입 ID중복기능 만들기

git 주소: