자바스크립트 Ajax(XMLHttpRequest) 예제 및 정의!

 

이글을 쓰게된 계기는 특정 value의 중복체크 같은 기능을 이용시 비동기 처리로 결과값을 노출하고자 할때 Spring의 @ResponseBody 와 Jquery의 Ajax 를 사용하지 않고

 

순수 자바스크립트 로 구현해보다가 재미있기도 하고 결과값에 만족해서 공유하고자 작성하게 되었습니다 ㅎㅎ

 

 

개발환경

 

  ● JDK 1.8

  ● 이클립스(version : Mars)

 

 

 

 

위 사진 처럼 "중복체크" 버튼을 클릭시 Ajax를 통해 결과값을 노출시켜 보도록 하겠습니다 ㅎㅎ

 

 

 

 

 

xhr 이라는 변수에 XMLHttpRequest() 객체를 할당 후 각종 프로퍼티를 이용하는 방식인데요 ㅎㅎ

POST 방식을 이용하지 않고 GET 방식을 이용했다는점 !! (놓치지마세요)

 

GET을 사용했다고 해서 자랑할려고 하는것이 아닙니다.. 유의사항 일뿐 ㅜㅜ....

 

각종 프로퍼티 및 메서드 는 아래 링크를 참조해주세요 ㅎㅎ

 

http://itmore.tistory.com/entry/자바스크립트JavaScript-AJAX-메서드-및-프로퍼티

 

setRequestHeader를 이용하여 인코딩 설정을 해주었습니다 .

방식은 여러가지가 있겠지만 제가 아는것은 이것뿐이라.... 죄송하네요 ㅜㅜ

 

위처럼 셋팅을 했으면 GET방식으로 데이터를 요청처리 페이지로 날릴경우 처리하는데 있어서 한글이 깨지는 현상을 방지하게 될겁니다.

 

 

DB에 Connection 을 이용하여 결과값을 message 라는 변수에 담는 과정은 생략했습니다

여기서 다루기에는 폭이 깊어지기 때문이니 양해 부탁드리겠습니다 ㅜ

 

결과값을 다시 보내기 위해 JSON 표현식을 이용하여 "message"라는 키값에 담아주시면 됩니다

 

 

 

 

obj 라는 변수에 결과값을 파싱하는 구문을 추가해주었습니다.

여기서 알고가야 할것은!!

 

JSON.parse() -> JSON 데이터를 자바스크립트 객체로 변환 해주는것을 의미 !!

JSON.stringify() -> 자바스크립트 객체를 JSON 데이터로 변환 해주는것을 의미 합니다!!

 

 

위 밑줄 그은 부분을 자세하게 알고자 하시는분은 아래 링크를 참조해주시기 바랍니다(참고로 제 포스팅은 아닙니다... 너무 이해하기 좋게 올려주셔서 여러분께 공유하고자 하는 바람에서 입니다.)

 

http://blog.outsider.ne.kr/257

 

 

요청처리 페이지 에서 결과 값을 alert()으로 사용자에게 노출하고자 obj 라는 변수에 message (요청처리 페이지 에서 "message" 라는 키값을 의미) 프로퍼티를 이용하여 성공했다는 메시지를 보도록 하죠!!

 

 

 

짜잔!! 원하는 결과가 노출이 되었네요 ㅎㅎ

 

기존에 스프링 및 jquery 에서 제공해주는 각종 라이브러리 및 객체를 이용하다가 순수 자바스크립트 와  JSON만으로 구현해보니깐 재미있기도 하고 아직 "학습"해야 할것이 만다는 생각이 드네요..

 

계속 꾸준히 자기개발해서 우리도 언젠가 플러그인 또는 라이브러리를 제공해주는 개발자가 되자구요 !!