💡 Ajax
- 웹브라우저는 대단히 정적인 시스템이었다. 내용이 바뀌면 페이지 새로고침을 해서 내용을 새롭게 변경해야 했다. 이것은 웹이 전자 문서를 염두에 두고 고안된 시스템이기 때문에 당연하게 생각되었다.
- 그러다 Ajax 개념이 도입되면서 모든 것이 바뀌었다. Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 된다. 그리고 변경된 결과를 웹페이지에 프로그래밍적으로 반영함으로써 웹페이지의 로딩 없이 서비스를 사용할 수 있게 한다.
Ajax는 근대적인 웹과 이전의 웹을 구분하는 아주 중요한 기준점 하나다.
- Ajax는 Asynchronous JavaScript and XML의 약자다. 한국어로는 비동기적 자바스크립트와 XML 정도로 직역할 수 있는데 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미한다. 이 때 사용하는 API가 XMLHttpRequest이다. 그렇다고 꼭 XML을 사용해서 통신해야 하는 것은 아니다. 사실 XML 보다는 JSON을 더 많이 사용한다.
- 동기적 vs 비동기적
- 동기적인 것은 내가 메뉴를 클릭하고, 웹페이지가 구성되는 동안에 네트워크 지연이 발생됨. (1분 정도) 그 1분 동안 아무런 일도 하지 못하고, 기다려야 함. 이것은 동기적.
- 어떠한 작업을 실행을 시킨 후에 다른 일을 하고 있을 수 있다면 그것은 비동기적인 것임
💡 XMLHttpRequest
- Ajax 통신을 하기 위해서 사용해는 객체
- 이 때 사용하는 API가 XMLHttpRequest
본 예제를 실행하기 위해서는 서버 환경이 구축 되어 있어야 한다. 서버 구축에 대한 설명은 우리 수업의 범위를 넘어서기 때문에 여기서는 언급하지 않는다. 하지만 학습하는데는 큰 문제가 없다. 중요한 주제이기 때문에 꼭 학습하기를 바란다.
💾 time.php
<?php
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone("asis/seoul"));
echo $d1->format('H:i:s');
?>💾demo1.html
<body>
<p>time : <span id="time"></span></p>
<input type="button" id="execute" value="execute" />
<script>
document.querySelector('input').addEventListener('click', function(event) {
let xhr = new XMLHttpRequest();
xhr.open('GET', './time.php'); // <form method="GET" action="./time.php">
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) { // 상태 체크(통신이 완료됨) && 커뮤니케이션 결과(통신에 성공함)
document.querySelector('#time').innerHTML = xhr.responseText; // 서버에서 가져온 정보를 넣는다
}
}
xhr.send();
})
</script>
</body>
👉 추가 기록
- JavaScript에서 제공하는 객체로, 서버와 비동기적으로 데이터를 주고받을 수 있도록 도와줌
- 웹 페이지를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있음
- onreadystatechange
- XMLHttpRequest 객체의 이벤트 핸들러(Event Handler) 속성
- 이 속성을 사용하면 서버로부터 응답 상태를 모니터링하고, 응답이 도착했을 때 적절한 동작을 수행할 수 있음
- `readyState` 속성은 현재의 요청 상태를 나타냄
- `onreadystatechange` 이벤트 핸들러는 `readyState` 속성이 변경될 떄마다 호출됨
- `readyState` 값에 대한 의미
- 0: 초기화되지 않음 (XMLHttpRequest 객체가 생성되었지만, 아직 초기화되지 않음)
- 1: 오픈됨 (open 메서드 호출 완료)
- 2: 보냄 (esnd 메서드 호출 완료 및 요청이 서버로 보내짐)
- 3: 수신 중 (서버로부터 응답 데이터를 받는 중)
- 4: 완료됨 (서버로부터 응답이 전부 받아짐)
💡 POST 방식
💾 time2.php
<?php
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone($_POST['timezone']));
echo $d1->format($_POST['format']);
?>💾 demo2.html
<body>
<p>time : <span id="time"></span></p>
<select id="timezone">
<option value="Asia/Seoul">asia/seoul</option>
<option value="America/New_York">America/New_York</option>
</select>
<select id="format">
<option value="Y-m-d H:i:s">Y-m-d H:i:s</option>
<option value="Y-m-d">Y-m-d</option>
</select>
<input type="button" id="execute" value="execute" />
<script>
document
.querySelector("input")
.addEventListener("click", function (event) {
let xhr = new XMLHttpRequest();
xhr.open("POST", "./time2.php"); //
xhr.onreadystatechange = function () {
document.querySelector("#time").innerHTML = xhr.responseText; //
};
let data = "";
data += "timezone=" + document.getElementById("timezone").value;
data += "&format=" + document.getElementById("format").value;
xhr.setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded"
);
xhr.send(data);
});
</script>
</body>
생활코딩 [javaScript - Ajax] 강의 정리
300x250
'LEARN > JAVASCRIPT' 카테고리의 다른 글
| [JS] 자바스크립트로 비밀번호 암호화 하기 👉 SHA-256 (0) | 2023.06.29 |
|---|---|
| [JavaScript] Spread operator (0) | 2023.01.17 |
| [JavaScript] 챗봇 내 스크롤링 기능 on/off (0) | 2022.12.27 |
| [자바스크립트] localstorage 로컬스트리지 쓰기 읽기 제거 (0) | 2022.12.05 |
| [자바스크립트] JavaScript typeOf 타입 확인 (0) | 2022.11.15 |
