[Javascript] Ajax 개념, 사용 (회원가입시 ID 중복체크)

프론트와 백이 통신함에 있어 Ajax라는 것을 사용한다.

 

우선 Ajax란?

간단히 말하면 비동기 Javascript와 XML을 말한다.

 

XMLHttpRequest 객체를 이용해서 JSON, XML, HTML, TEXT와 같은 데이터를 서버와 주고받는 것이다.

 

Ajax의 가장 큰 장점은 비동기성이라는 것이다. 

전체페이지가 아닌 일부분만 업데이트할 수 있게 해준다.

 

Ajax를 바로 사용하며 예제를 통해 알아보겠다.

 

이번에 사용할 예제로 회원가입할 때 id 중복체크를 Ajax를 통해  시행하겠다.

 

회원가입할 때 id중복체크한다고 페이지 전체가 업데이트되면 안되기에 서버와 통신그리고 비동기성에대해 설명할 수 있기 때문이다.

 

우선 회원가입에 사용할 HTML은 아래와 같다.

 

index.html

 

id와 password를 입력받을 2개의 입력창과 아이콘이 있다.

id 입력창은 자동완성을 꺼버렸다. 왜냐하면 테스트하는데 사용한 qqq aaa와 같은 입력값이 보기 싫었기 때문이다,

 

그리고 id 입력창 아래 비어있는 division이 있다. 여기에 id 중복확인의 결과가 보여질 것이다.

Javascript로 createElement, append를 사용할 수도 있지만 미리 자리를 만들어 놓으면 더 간단하다.

 

해당 예제에서는 form태그에 inline css를 사용하였는데 사진이 많아질까봐 inline css를 사용한 것이고 실제로 사용할 때는 무조건 external css를 사용하는 것이 좋겠다.

 

실행하면 아래와 같은 화면이 나온다.

 

sign up form

 

그럼 이제 클라이언트가 id를 입력하려고 username 입력창 클릭하면 username 입력창은 focus 상태가 된다.

id를 다 입력하고 입력창을 나가는 순간 username 입력창의 상태는  blur가 된다.

username 입력창이 blur가 된 순간 Ajax를 통해 서버에 id 중복 체크를 할 것이다.

그리고 그 결과를 username input옆에 표시할 것이다.

 

Javascript 코드는 아래와 같다.

 

index.html

 

XMLHttpRequest 객체를 만들었고

 

httpRequest.onreadystatechange에서 요청에대한 응답이 오면 실행할 함수를 만들어 주었다.

httpRequest.readyState와 httpRequest.status는 요청에대한 진행도 그리고 요청에 대한 응답을 뜻한다.

 

httpRequest.readyState가 4면 어떤 결과로든 요청이 처리됬다는 뜻이고

httpRequest.status가 200이면 요청에 대한 응답에서 어떠한 에러도 없다는 뜻이다. 

 

httpRequest.open에서 요청의 타입, 주소, 비동기 유무를 설정했다.

동기 비동기는 해당 요청에 대한 응답이 돌아올 때까지 대기할지 다른 일을 하고 있을지를 설정하는 것이다. 

추후에 Promise를 통해 동기 비동기에대해 자세히 알아보겠다.

 

httpRequest.responseType = "text"를 통해 응답은 text로 받을것임을 명시하고

httpRequest.send(null)을 통해 요청을 날렸다.

 

저번에 JSON을 사용하며 알아봤던 XMLHttpRequest와 사용법에서

응답이 오면 실행할 코드를 따로 정의해줬다는 것 말고는 특별히 다른점은 없다.

 

해당 요청의 주소는 개인적인 프로젝트의 주소를 사용한 것이다. (localhost)

해당 url를 요청하면 아래의 친구가 응답을 받는다. 

 

CheckUsernameServlet

자바 소스코드인데 중요한 것은 아니고 그냥 못보던 url이니 설명을 한 것이다.

기존에 있는 다른 프로젝트의 주소를 빌려온 것이다.

 

이때 responseType을 JSON, HTML, XML로 다양하게 사용할 수 있다.

물론 가장 많이 사용하는 것은 JSON이다.

 

위 코드의 실행 결과는 아래와 같다.

 

실행 결과

 

해당 화면에서는 jaean을 입력하니 invalid!가 떴다.

왜냐하면 jaean은 이미 데이터베이스에 존재하는 id이기 때문이다.

 

데이터베이스는 이미 기존에 쓰던것을 사용한것이라 jaean은 이미 들어있는 상태였다.

 

database

 

하지만 이때 jQuery를 사용하면 매우 간단하게도 작성할 수 있다.

방법은 아래와 같다.

 

아래의 코드와 같이 jQuery 라이브러리를 가져온다

 

jQuery script

 

아래는 jQuery 라이브러리 사용 버전이다.

 

jQuery version

 

위의 코드와 대조해보면 jQuery를 사용한 것이 더 직관적이긴 하다.

 

$ajax()하고 안에 형식에 맞는 object를 넣어주기만 하면 되기 때문이다.

 

이때 주의할 점은 error: (request, status, error)에서

status는 사용하지 않지만 error가 함수의 마지막 파라메터여야하기 때문에 사용하지 않아도 넣어줘야한다는 것이다.

 

실행결과 2