AJAX, Asynchronous Javascript with XML

Ajax 정의

• (XML을 이용한) 비동기식 자바스크립트

• HTTP 통신을 자바스크립트를 이용하여 비동기식으로 수행하는 것

• 자바스크립트로 HTTP요청을 보내고 XML 또는 JSON 파일 형식으로 응답을 받는 기술

• 자바스크립트의 내장객체인 XMLHttpRequest 를 사용

 

Ajax 사용 예 )

 

1. 이미 사용중이거나 탈퇴한 아이디입니다. (onblur, onfocus 이용 // onblur에 Ajax사용)

2. 처음에는 안보여주다가 버튼클릭시 가져오는식으로 사용할때(게시판+댓글)

 

---

+XHR 객체

• XMLHttpRequest 객체

• AJAX 통신을 하기 위한 자바스크립트 기본 내장 객체

• IE 예전버전에서는 존재하지 않는 객체이며 ActiveX를 이용해 구현된다(크로스브라우징 처리가 필요)

• 개발자 도구 네트워크 > 콘텐츠 형식 필터에서 Ajax 호출시 전달받는 응답부분을 확인할 수 있다.

 

+XHR 객체 속성(property)

readyState

• XHR 객체는 준비 - 전송 - 완료 단계를 거친다.

• 각 단계를 표현하는 속성값

  • 0 : UNSENT - open() 호출 전(XHR 객체 생성한 단계)

  • 1 : OPENED - open() 호출 후 ~ 응답을 받기 전

  • 2 : HEADERS_RECEIVED - send() 호출 후 ~ 응답을 받기 전 -- 응답 메시지의 header를 받음

  • 3 : LOADING - 다운로드 중 (response 메시지를 받는 도중

    • 응답 메시지의 body를 받음

    • Loading 상태에 돌입하면서 XHR.onprogress 이벤트 동작

  • 4 : DONE - XHR 동작 완료(요청과 응답이 완료된 상태)

    • DONE 상태 시 XHR.onload 이벤트 동작함

•  사용 예제)

  • onprogress와 onload를 이용하여 Modal(뒤에 창 못눌리게 하는 것(팝업)) 처리 가능

    • => onprogress때는 로딩중 으로 마스킹하고 onload가 발생하면 다시 풀어줌

onreadystatechange

• readyState가 변경될 때마다 발생하는 이벤트 처리 코드

• callback 함수로 값을 지정한다

responseText

• 응답 데이터를 String타입으로 추출(파싱)하는 속성

responseXML

• 응답 데이터를 XML타입으로 추출(파싱)하는 속성

status

• HTTP 응답 상태코드

• readyState : 4(DONE) 이후 응답상태에 따라 결과 처리 설정에 사용함

statusText

• HTTP 응답 메시지

  • 404, Not Found

  • 202, OK.

  • 405, Method Not Allowed.

  • 500, Internal Server Error.

---

+XHR 객체 함수

 

void open(String method, String url, [, boolean asynch])

• AJAX 요청 정보를 초기화하는 함수

• 요청 정보를 설정하는 함수

• method - HTTP 요청 메소드 지정

• url - HTTP 요청 URL 지정

• asynch - 동기(false), 비동기(true) [기본값: true]

• **asynch를 동기(false)로 설정하면 요청에 대한 응답이 완료될 때까지 브라우저는 대기상태(BLOCKED)가 된다

void send(null)

• GET 요청 전송 함수

• 파라미터는 open()함수의 url 매개변수에 쿼리스트링으로 포함시킨다

void send(params)

• POST 요청 전송 함수

• 파라미터를 쿼리스트링 형식의 문자열로 매개변수로 추가한다