AJAX의 정의와 개념, 처리과정

AJAX의 정의와 개념, 처리과정에 대해 알아보자.

1. JavaScript AJAX란?

1-1. 정의

• [A]synchronous [J]avascript [A]nd [X]ML
• 비동기적인 자바스크립트
• XML 데이터를 사용하는 비동기적인 자바스크립트 기술
• 페이지는 유지된 채로 백그라운드에서 웹 서버와 통신하는 기술
• 페이지가 로드 된 후에도 웹 서버에서 데이터를 읽어와서 사용 가능하다.
• 페이지를 전체 새로 고침하지 않고도 웹페이지의 일부분을 업데이트 가능

ex) 예시

• 네이버 메인 페이지 요청 후 검색부분만 업데이트 기능(환율, 날씨정보, 상품, 다음페이지, 이전페이지, 검색)
• [ 회원가입 ]할 때 이름, 생년월일, 주소, [우편번호 검색 버튼] ajax
  아이디 [ kenik ][아이디중복체크 버튼] ajax

1-2. 장점

• 성능 향상 : 전체 페이지 다시 요청, 응답X, 수신 데이터양이 줄어들어 속도가 빨라진다.
• 개발 향상
• 각각 서버로 부터 분산 처리 가능

1-3. 단점

• 클라이언트 기술(javascript 사용) 때문에 보안적인 측면이 취약하다.
• 차별화 X
• 브라우저 호환성 체크

2. AJAX 처리 과정

① 웹페이지에서 이벤트 발생
② XMLHttpRequest 객체 생성

• getXMLHttpRequest()로 객체를 반환하는 함수 선언

③ XMLHttpRequest 객체 설정

[ 요청 설정 ]

• open( "GET" , 요청URI ) 메서드 - 요청에 필요한 설정을 하는 함수
• open( "POST" ) 메서드 - 요청 필요한 설정을 하는 함수
• send() 메서드 - 실제 서버에 요청하는 함수(execute)
• XMLHttpRequest 객체.onreadystatechange 이벤트 속성으로 상태가 바뀔 때마다 일어나는 함수이다.

XMLHttpRequest 객체.onreadystatechange = function(){
	서버 + 요청 + 잘 응답했는지를 물어본다.
 if(readyState 속성== 4   && state 속성 ==200){ //서버 요청이 완료, 응답 준비되었다면 + 요청 결과 확인 되었다면
// 응답 결과를 가지고 웹페이지를 수정, 추가 처리
// [ 응답 결과 ] 는 String일수도, XML일수도 있다.
1. reponseText 속성 : 응답 결과 String 
2. responseXML 속성 : 응답 결과 XML 
}

1) get 방식

• ?id=admin
• true 비동기적 처리, false 동기적 처리 X
• XMLHttpRequest 객체.open( "GET", "/test.jsp?id=admin", true )
  -> AJAX는 비동기적 처리이므로 항상 true값을 갖는다.
• XMLHttpRequest 객체.send( null );
  

2) post 방식

• XMLHttpRequest 객체.open( "POST", "/test.jsp", true )
• XMLHttpRequest 객체.send( "id=admin" );