Ajax 란?
Ajax는 Asynchronous JavaScript and XML 의 약자로서 JavaScript와 XML을 이용한 비동기적 정보 교환 비법이다.
하지만 요즘에는 JavaScript 말고도 다양한 언어에서 활용된다.
동작원리
동기적 통신에서는 웹사이트에서 사용자가 어떤 행동을 취했을 경우, 그 요청이 서버로 전달되어 처리되고 결과가 반환되어 오기까지 다음 행동을 취하지 못하고 대기해야만 한다.
하지만 비동기적 통신에서는 사용자는 요청에 대한 응답이 돌아오지 않은 상태에서도 기다림 없이 다른 작업을 진행할 수 있다.
동작순서
- 사용자가 이벤트를 발생(버튼 클릭)
- JavaScript는 DOM을 사용해서 필요한 정보를 구한다.
- 구한 정보를 XMLHttp 객체를 통해서 웹 서버에 요청한다.
- 웹 서버는 XMLHttp의 요청을 받아 처리한다.
- 결과를 XML 으로 생성해서 다시 XMLHttp로 전달
- XMLHttp는 DOM을 사용해서 사용자 화면에 반영한다.
[예제코드]
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=euc-kr" />
<script language="javascript">
var xmlHttp = null;
function getXMLHttpRequest() {
if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e1) {
return null;
}
}
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null;
}
}
function load() {
xmlHttp = getXMLHttpRequest();
xmlHttp.onreadystatechange = viewMessage;
xmlHttp.open("GET", "test01.asp", true);
xmlHttp.send(null);
}
function viewMessage() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
alert(xmlHttp.responseText);
}
else {
alert("실패: "+ xmlHttp.status);
}
}
}
</script>
</head>
<body>
<input type="button" value="전 송" onclick="load()"/>
</body>
</html>HTTP 요청(클라이언트 -> 서버 )
- XMLHttpRequest 객체 생성
function getXMLHttpRequest() .... - open() 함수 : 요청방법, URL, 비동기 여부 지정
xmlHttp.open("GET", "test01.asp", true)
(GET 방식, 접속할 url, 비동기 방식 유무)
- send() 함수: 데이터 송신
xmlHttp.send(null) 파라미터가 없을때는 null값을 준다.
HTTP 응답 처리 (서버 -> 클라이언트)
- onreadystatechange 이벤트 : 서버로부터 응답을 받으면 함수를 지정하는 프로퍼티
xmlHttp.onreadystatechange = viewMessage
viewMessage에 응답받은 함수를 지정한다.
- readyState : XMLHttpRequest 객체의 현재 상태를 알려준다.
0 : XMLHttpRequest 객체가 생성됨
1 : open() 메소드가 성공적으로 생성됨
2 : 모든 요청에 대한 응답이 도착함
3 : 요청한 데이터를 처리 중임
4 : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨
if (xmlHttp.readyState == 4)
readyState가 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되면 해당 함수가 실행된다.
- status : 서버의 문서 상태를 나타낸다
200 : 서버에 문서가 존재
403 : 접근거부
404 : 서버에 문서가 존재하지 않음
500 : 서버 오류
if (xmlHttp.status == 200)
서버에 문서가 존재할때 해당 함수가 실행된다.
- responseText , responseXML : 서버로부터 전달받은 데이터를 Text 또는 XML으로 받을 수 있다.
alert(xmlHttp.responseText)
xmlHttp 를 텍스트 형식으로 출력한다.
'Web' 카테고리의 다른 글
| [FORWARD & REDIRECT] 개념, 차이점 (0) | 2021.12.15 |
|---|---|
| [GET,POST] GET , POST 방식의 차이 (0) | 2021.12.10 |