[웹 서비스 개발] AJAX, Asynchronous JavaScript and XML

일자 : 24-2 15주차 1차시

[1] AJAX란?

• AJAX = 비동기 JavaScript 및 XML.
• AJAX는 프로그래밍 언어가 아니다.
• AJAX는 다음과 같은 조합을 사용한다:
  • 브라우저에 내장된 XMLHttpRequest 객체
  • JavaScript 및 HTML DOM
• AJAX라는 이름은 오해를 불러일으킬 수 있다. AJAX 애플리케이션은 데이터를 전달하기 위해 XML을 사용할 수 있지만, 일반 텍스트나 JSON 텍스트로 데이터를 전달하는 것도 흔하다.
• AJAX는 웹 페이지가 전체 페이지를 다시 로드하지 않고도 웹 서버와 데이터를 교환하여 비동기적으로 업데이트될 수 있게 해준다.

[2] AJAX 작동 방식

1. 웹 페이지에서 이벤트가 발생한다 (페이지 로드, 버튼 클릭 등).
2. JavaScript에 의해 XMLHttpRequest 객체가 생성된다.
3. XMLHttpRequest 객체가 웹 서버에 요청을 보낸다.
4. 서버가 요청을 처리한다.
5. 서버가 웹 페이지에 응답을 보낸다.
6. JavaScript가 응답을 읽는다.
7. JavaScript가 적절한 작업(예: 페이지 업데이트)을 수행한다.

[3] XMLHttpRequest 객체 메서드

메서드	설명
new XMLHttpRequest()	새로운 XMLHttpRequest 객체를 생성한다.
abort()	현재 요청을 취소한다.
getAllResponseHeaders()	모든 응답 헤더 정보를 반환한다.
getResponseHeader()	특정 응답 헤더 정보를 반환한다.
open(method, url, async, user, psw)	요청을 설정한다. method: 요청 유형 (GET 또는 POST) url: 파일 위치 async: true (비동기) 또는 false (동기) user: 선택적 사용자 이름 psw: 선택적 비밀번호
send()	서버에 요청을 보낸다. GET 요청에 사용된다.
send(string)	서버에 요청을 보낸다. POST 요청에 사용된다.
setRequestHeader()	보내질 헤더에 레이블/값 쌍을 추가한다.

[4] XMLHttpRequest 객체 속성

속성	설명
onreadystatechange	readyState 속성이 변경될 때 호출될 함수를 정의한다.
readyState	XMLHttpRequest의 상태를 보유한다. 0: 요청 미초기화 1: 서버 연결 수립 2: 요청 수신 3: 요청 처리 중 4: 요청 완료 및 응답 준비 완료
responseText	응답 데이터를 문자열로 반환한다.
responseXML	응답 데이터를 XML 데이터로 반환한다.
status	요청의 상태 번호를 반환한다. 200: "OK" 403: "Forbidden" 404: "Not Found" (완전한 목록은 HTTP 메시지 참조)
statusText	상태 텍스트를 반환한다. (예: "OK" 또는 "Not Found")

이 표를 통해 XMLHttpRequest 객체의 메서드와 속성을 쉽게 이해할 수 있다.

[5] 동기 요청

• 동기 요청을 실행하려면 open() 메서드의 세 번째 매개변수를 false로 변경한다:

xhttp.open("GET", "ajax_info.txt", false);

• 때때로 async = false는 빠른 테스트를 위해 사용된다. 구식 JavaScript 코드에서 동기 요청을 찾을 수 있다.

[6] 콜백 함수 사용하기

• 콜백 함수는 다른 함수에 매개변수로 전달된 함수이다.
• 웹사이트에 여러 개의 AJAX 작업이 있는 경우, XMLHttpRequest 객체를 실행하는 하나의 함수와 각 AJAX 작업에 대한 콜백 함수를 하나씩 생성해야 한다.
• 함수 호출에는 URL과 응답이 준비되었을 때 호출할 함수를 포함해야 한다.

[7] responseXML 속성

• XMLHttpRequest 객체에는 내장된 XML 파서가 있다.
• responseXML 속성은 서버 응답을 XML DOM 객체로 반환한다.
• 이 속성을 사용하여 응답을 XML DOM 객체로 파싱할 수 있다.