ajax - 개념 및 처리구조

ajax란?

 서버로부터 데이터를 가져와 전체 페이지를 새로 고치지 않고 일부만 로드할 수 있게 하는 기법으로 비동기식 요청을 보내는데 필요한 기술을 말함

장단점

장점 : 비동기식 방식으로 웹서버의 응답을 기다리지 않고 데이터를 빠르 게 처리하는 개발기법, 페이지 리로딩 없이 처리됨 예) 실시간 검색어, 검색어자동 완성 

단점 : 한 페이지에 지속적으로 사용시 리소스가 계속 쌓여 페이지가 느려짐, 스크립트로 되어 있어 에러 발생시 디버깅이 어려움

비동기식 처리모델

 페이지가 로드 되는 동안 브라우저는 먼저 서버에 데이터를 요청 script문 실행한 후 페이지의 나머지를 계속 로드하고 페이지와 사용자의 상호작용을 처리하며 브라우저는 요청한 데이터를 기다리지 않는다. 그리고 요청한 데이터가 도착을 하면 그때 이벤트가 발생하면서 지정된 함수가 호출되어 실행되는 방식. (넌블로킹 모델) 

동기식 처리모델

페이지가 로드 되는 동안 브라우저는 script문을 실행되면 그 실행이 종료될때 까지 나머지 페이지를 로드하지 않고 기다리고 있다가 그 script문이 처리가 종료가 되면 페이지의 나머지 부분을 로드하는 방식

처리구조

처리 절차

1. script문에 요청을 위한 XMLHttpRequest객체 생성 

2. 서버의 응답을 처리할 함수 생성 및 지정

 ☞ onreadystatechange에 함수지정 

3. open메소드로 요청할 방법 및 요청할 대상(Server)선정

☞ 요청메소드, 요청주소, 동기/비동기 설정, 아이디, 패스워드 설정 

4. send메소드로 대상(Server)에 전송 

☞ post일때 파라미터값 설정/ get일때는 매게변수 없음 

5. 응답상태에 따라 상태확인 

☞ readyState(데이터응답) / status(처리결과) 값을 이용 

6. 응답완료 reponseText / reponseXML이용 응답처리