AJAX
📌 Jsp
<body>
<input class= "id" name ="id" value ="">
<button class= "btn">id 중복확인@</button>
<div class="result"></div>
<script>
let btn = document.querySelector(".btn");
let id = document.querySelector(".id");
let result = document.querySelector(".result");
btn.addEventListener("click", loadDoc);
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
result.innerHTML = this.responseText;
}
xhttp.open("GET", "DemoServlet2?id=" + id.value, true);
xhttp.send();
}
</script>
</body>
✔ const xhttp = new XMLHttpRequest();
XMLHttpRequest는 브라우저에서 서버와 상호작용하는 데 사용되는 내장 객체이다.
✔ xhttp.open(method, url, async);
- method: 요청에 쓸 HTTP 메서드를 정한다. 일반적으로 "GET" 또는 "POST"를 사용한다.
- url: 요청을 보낼 서버 url이다.
- async: 비동기로 처리할지 true, false로 정한다. 보통은 true를 쓰는 게 일반적이다.
✔ xhttp.send();
open에 쓴 url(서버)로 요청을 보낸다.
✔ xhttp.onload
load 이벤트는 서버로 부터 응답을 성공적으로 받았을 때 작동한다.
✔ this.responseText
this는 XMLHttpRequest 객체를 의미한다. 그래서 this.responseText는 xhttp의 프로퍼티를 의미한다. 이 코드를 통해 서버의 응답값을 받을 수 있다.
진행순서
1. 버튼 클릭으로 loadDoc()함수가 실행된다.
2. 서버와 통신을 위한 XMLHttpRequest 객체를 생성한다.
3. 서버의 url과 통신방식을 정한다.
4. 서버에 요청을 보낸다.
5. 응답을 받는다.
개발자가 되기 위해 페달을 밟아가는 과정