AJAX로 ID중복체크 ( XMLHttpRequest )

AJAX (Asynchronous Javascript and XML)

• 정의
  브라우저에서 URL 입력없이 요청을 보내고 응답을 받는 역할을 합니다, javascript로 비동기 통신을 할때 사용하는 형태가 XML인것을 말하는데 요즘은 JSON 형태를 많이 사용합니다.

형태

XML 형태

<dev>nodemon sever</dev>
<name>suhwan</name>

JSON 형태

{
	dev:"nodemon server"
    name:"suhwan"
}

ajax로 ID 중복확인하기

HTML

HTML은 간단하게 아이디 입력창과 중복확인버튼을 만들어주었다.

<span>에 빈값은 나중에 innerHTML로 ID가 이미 사용중인 경우와 사용할 수 있는 ID일 경우 각각 다르게 값을 넣어줄것이다.

AJAX

요청

js파일을 idCheck.js로 따로 만들어서 작업을 하였다.

1. HTML에 중복체크 버튼에 클릭이벤트를 넣어 value값을 가져올 userid와 innerHTML로 값을 넣어줄 id_span을 불러왔다.

2. reqJson이라는 객체를 만들어 ID입력창에 넣은 value값을 넣어주었다.

3. ajax 비동기 통신을 할 수 있게 new XMLHttpRequest();를 사용하였다.

4. open( 'Method' , 'URL' , 'async' )으로 요청할 리퀘스트 메소드와 url을 입력해주었다.

• open() 함수는 XMLHttpRequest 객체를 초기화 할 수 있다.
  Method = HTTP request methods
  URL = 요청을 처리할 주소
  async = 비동기 여부를 처리하고 기본값은 true이다.

5. setRequestHeader()로 보내는 내용의 컨텐츠 타입을 json으로 설정해주었다.

6. send( 'body' )
   send() 함수로 요청을 보내는데 POST처럼 body가 필요할 경우 선택적으로 보낸다.

7. 이제 요청은 끝.

요청 처리

요청을 백엔드에서 처리해주었다.

1. 요청이 들어오면 req.body로 input userid의 value값을 보고 쿼리문으로 중복된 값이 있나 확인해주었다.

2. 확인을 하고 중복된 값이 없으면 true를 보내주고 중복된 값이 있으면 false를 보내주었다.

3. 요청 처리 끝.

응답

요청이 처리된 값을 응답받아 프론트를 조작하였다.

1. 응답을 받고 html부분을 처리하기 위해 onreadystatechange를 사용하여 readyState가 4( 데이터를 전부 받은 상태 )이고 status가 200( 요청 성공 )일 경우 다음 if문을 실행하고 요청과 응답에 에러가 생길경우 연결에러를 출력해주었다.

2. 요청과 응답이 성공적으로 완료된경우 response값을 확인하여 true로 왔을경우 innerHTML로 빈 span에 사용할 수 있는 ID라고 텍스트를 넣어주었고 false로 왔을 경우 이미 있는 ID이기 때문에 사용할 수 없는 ID라고 텍스트를 넣었다.

테스트 결과

• ID 중복 X

• ID 중복 O