2021. 11. 30. 00:11ㆍHTML&CSS&JavaScript/jQuery
Ajax(Asynchronous Javascript And XML)는 서버와 데이터를 교환하는 기술의 하나이다.
그냥 쉽게 말해, 새로고침을 하지 않고도 서버에서 데이터를 받아 오는 거다.
Ajax는 XMLHttpRequest객체를 사용한다.
Ajax에 의하여 우리는 전체 페이지의 업데이트 없이 특정 DOM객체를 새로 업데이트 할 수 있게 된다.
Ajax애플리케이션의 단계
| 1) 클라이언트 컴퓨터에서 사용자가 문자를 입력하는 것과 같은 이벤트가 발생하면, 자바스크립트 함수가 호출된다. 함수에서 XMLHttpRequest 객체의 인스턴스가 생성된다. |
| 2) XMLHttpRequest 객체는 현재 HTML 페이지의 상태를 가지고 있는 XML 메시지를 구성하여, 웹 서버로 보낸다 |
| 3) XMLHttpRequest 객체는 웹 서버에서 응답 XML 메시지를 수신한다. |
| 4) 웹 서버에서 반환된 메시지를 파싱해서 DOM 객체를 업데이트 한다. |
Ajax예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
type="text/javascript"
src="http://code.jquery.com/jquery-latest.min.js"
></script>
<title>Document</title>
</head>
<body>
<script>
function getFromServer() {
let req;
if (XMLHttpRequest) {
req = new XMLHttpRequest();
} else {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {
document.getElementById("target").innerHTML = req.responseText;
}
};
req.open("GET", "testfile.txt", true);
req.send();
}
</script>
<div
id="target"
style="border: 1px solid black; width: 200px; height: 100px"
></div>
<button onclick="getFromServer()">GET DATA</button>
</body>
</html>
XMLHttpRequest 객체
Ajax의 핵심은 XMLHttpRequest 객체이다.
XMLHttpRequest 객체는 서버와 데이터를 주고 받을 때 사용된다.
이것은 전체 페이지를 다시 로드하지 않아도 웹 페이지의 일부를 업데이트 하는 것이 가능하다.
req = new XMLHttpRequest();
서버로 요청 보내기
서버로 요청(request)을 보내기 위하여 XMLHttpRequest 객체의 open()과 send()메서드를 사용한다.
req.open(method, url, async);
req.send();
method: POST, GET, PUT, DELETE 등
url: 서버에서 파일의 위치
async: 비동기여부(true로 설정을 하며, false로 설정하는 것은 권장 하지 않는다.)
async를 true로 설정한 경우
async로 true를 사용하는 경우, 응답이 준비되면 onreadystatechange 이벤트가 발생하게 되고, 코드에서는 이 이벤트를 처리하는 함수를 만들어 놓으면 된다.
let req;
if (XMLHttpRequest) {
req = new XMLHttpRequest();
}
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {
document.getElementById("target").innerHTML = req.responseText;
}
};
req.open("GET", "testfile.txt", true);
req.send();
onreadystatechange 이벤트
서버로부터 응답이 오면 onreadystatechange 이벤트가 발생한다.
onreadystatechange 이벤트는 readyState가 변경될 때마다 발생된다.
readystate 속성은 XMLHttpRequest의 현재 상태를 가지고 있다.
XMLHttpRequest 객체의 세 가지 중요한 속성은 다음과 같다.
| 속성 | 설명 |
| onreadystatechange | readyState 상태가 변경될 때마다 자동으로 호출되는 함수를 저장한다 |
| readyState | XMLHttpRequest의 4가지 상태를 저장한다. 0~4까지 순차적으로 변화된다. 0: 요청이 초기화 되지 않았다. 1: 서버 연결이 이루어졌다. 2: 요청이 수신 되었다. 3: 요청을 처리 중이다. 4: 요청 처리가 종료되고 응답이 준비 되었다. |
| status | 200: "OK" 404: 페이지가 발견 되지 않았다. |
readyState가 4가 되고 status가 200이면 응답이 준비 되었고 이상이 없는 것이다.
그래서 아래와 같은 코드로 체크를 한다.
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {
}
};주의할 사항 ⚠️
실제로 onreadystatechange 이벤트는 5번 발생한다는 점이다.
즉, readyState가 0에서 4까지 변경될 때마다 한 번씩 발생하는 것이다.
따라서 반드시 readyState의 값을 체크 해야 한다.
서버 응답
서버에서 응답을 얻으려면 XMLHttpRequest 객체의 responseText 또는 responseXML 속성을 사용한다.
responseText는 응답이 텍스트 형식일 경우에 사용한다.
responseXML은 응답이 XML일 경우에 사용한다.
만약 서버에서의 응답이 XML이면, responseXML 속성을 구문 분석해서 필욯란 정보를 꺼내야 한다.
'HTML&CSS&JavaScript > jQuery' 카테고리의 다른 글
| [jQuery] jQuery를 이용한 DOM 변경 (0) | 2021.11.29 |
|---|---|
| [jQuery] fadeIn()/fadeOut() (0) | 2021.11.29 |
| [jQuery] animate() (0) | 2021.11.29 |
| [jQuery] toggle() (0) | 2021.11.29 |