$$config title: AJAX를 이용한 ID 중복확인 keywords: - JSP - AJAX $$ # 소스코드 ```js

``` ```java -------------------request_ajax.jsp---------------------- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% if(request.getParameter("id").equals("hyun0547")){ out.print("중복된 아이디 입니다."); }else{ out.print("사용 가능한 아이디 입니다."); } %> ``` # 내용 ```js ID.addEventListener("blur", function () ``` input ID 태그에 blur 이벤트를 추가해 포커스가 이동되었을 때 함수가 작동하도록 했다. ```js const xhr = new XMLHttpRequest(); xhr.open("POST", "request_ajax.jsp", "true"); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ``` XMLHttpRequest 객체를 만들고 POST 방식 비동기식으로 request_ajax.jsp 파일을 오픈하고 requestHeader에 content 타입을 지정해 주었다. ```js xhr.send("id=" + ID.value); xhr.onreadystatechange = function (){ if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){ text.innerText = xhr.responseText; } ``` 태그에 입력한 값을 전송하고 상태 변환 완료 체크후 text에 값을 넣어주었다. ```js if(request.getParameter("id").equals("hyun0547")){ out.print("중복된 아이디 입니다."); }else{ out.print("사용 가능한 아이디 입니다."); } ``` DB에서 불러오는 것은 생략하고 임의의 값만 비교후 중복 여부를 출력했다. ![중복확인](https://i.postimg.cc/fbPL8ZwF/2021-10-27-2.png) ![중복확인](https://i.postimg.cc/SxvkhrwY/2021-10-27-3.png)