maven없이 스프링(Spring) 프로젝트 만들기 (4)

- Ajax란?

Asynchronous Javascript + XML의 약자이며 비동기적 통신을 말합니다.

HTML form 태그의 의해서 웹 브라우저가 웹 서버에 데이터를 요청하고 그 응답을 받을 경우 웹 페이지 화면 자체가 갱신이 됩니다.

하지만 Ajax는 javascript의 jQuery 라이브러리에 의해 웹 서버와 통신을 주고 받으며 화면의 일부분만을 갱신할 수 있습니다.

findTel.jsp에 javascript영역의 find 함수를 보시면 아래와 같습니다.

빨간 박스 안에 있는게 Ajax 통신을 구현한 것입니다.

(1) type은 HTML form 태그 action속성과 동일하게 get과 post로 지정할 수 있습니다.

(2) dataType은 json으로 지정을 합니다.

(3) data는 전송될 데이터 객체를 입력합니다.

(4) url은 Controller(웹 서버)가 처리할 요청url 경로를 입력합니다.

(5) success는 Ajax통신이 성공했을 때 호출되는 메소드이며 function(result) 콜백함수입니다.

result는 Controller(웹 서버)에서 전송한 응답객체를 의미합니다.

result의 저장된 값에 접근하기 위해서는 result['변수명'] 형태로 접근합니다.

* JSON이란?

Javascript Object Notation의 약자이며 서로 다른 언어들 간의 데이터를 주고 받을 수 있는 텍스트 형식의 경량의 데이터 포맷입니다.

다양한 언어 사이 간의 통신을 할 때 사용할 수 있기 때문에 많은 곳에서 사용됩니다.

(예제 프로젝트의 경우 JAVA와 javascript 사이에서 통신을 하는 것입니다.)

JSON은 name과 value 쌍으로 이루어진 텍스트(String)형의 객체입니다.

아래의 Controller 코드를 보겠습니다.

JSONObject 클래스로 JSON객체를 생성합니다.

HashMap 객체에 key, value를 입력하는 것처럼 보이지만 "tel"은 name값입니다.

json.put("tel", tel);을 입력하면 노랑줄이 그어진 모습을 볼 수 있습니다.(직접 확인해보세요 ^^)

이 경우는 SuppressWarnings를 사용하여 경고를 무시할 수 있습니다.

* SuppressWarnings란?

간단히 말하면 컴파일러에게 SuppressWarnings가 지정된 메소드 등에 컴파일 경고를 하지 말라는 것입니다.

출처 : https://www.ibm.com/support/knowledgecenter/ko/SSQ2R2_9.0.0/org.eclipse.jdt.doc.user/tasks/task-suppress_warnings.htm

HttpServletResponse 객체를 통해 Ajax 통신을 요청한 페이지에 데이터를 전송할 수 있는 PrintWriter 객체를 getWriter() 메소드를 통해 가져옵니다.

이 때 resp.getWriter()는 IOException이 발생할 수 있습니다. (직접 확인해보세요 ^^)

그래서 저는 findTelPro 메소드에 예외전가인 throws를 선언했습니다.

그리고 println(JSON객체); 호출하여 JSON객체를 매개변수로 입력 후 flush() 메소드를 호출하면 데이터가 요청 페이지로 전송됩니다.

사용 후 PrintWriter 객체는 자원반납을 위해 close() 메소드를 호출하고 사용을 종료합니다.

서버에서 전송된 JSON 객체는 success: function(result){} 의 result가 받게 됩니다.

여기서 $("#place")란? <body> 태그 안에 있는 <div id="place">를 의미합니다.

자바스크립트는 HTML 태그에 접근할 수 있습니다.

자바스크립트의 경우에는 document.getElementById("place"); 로 <div>태그에 접근할 수 있습니다.

하지만 jQuery를 사용하면 $("#place")로 접근할 수 있어 더 편리합니다.

html(), append()등의 메소드는 jQuery API이므로 메소드를 사용하려면 jQuery를 통해 태그에 접근을 해야합니다.

html() 메소드는 태그의 내용을 가져오는 메소드이지만, 매개변수를 입력할 경우 태그의 내용을 매개변수로 바꾸는 메소드입니다.

화면 초기화를 위해 ""를 입력하여 공백으로 만듭니다.

append()메소드는 매개변수로 입력된 내용을 태그의 내용에 이어붙이는 메소드입니다.

그래서 아래와 같이 페이지 자체가 갱신되는게 아니라 부분적으로 갱신되는 모습을 볼 수 있습니다.

이상으로 maven없이 스프링(Spring) 프로젝트 만들기 포스팅을 마칩니다.

더 많은 내용을 보시려면 아래를 참고하세요.

블로그의 다른 글

https://developer-syubrofo.tistory.com/23

Map - Hashtable 사용하는 방법

1. Hashtable이란? Map 인터페이스를 구현한 클래스입니다. 2. 특징 1) (key,value)쌍으로 데이터를 입력합니다. 2) key, value의 값은 null이 될 수 없습니다. 3) Hashtable 객체는 initial capacity와 load fa..