Ajax을 이용한 Servlet의 요청과 응답

---

서버

---

Ajax(XML) 활용 예제

  <div>
    <div>
      <input type="text" id="name" placeholder="이름">
    </div>
    <div>
      <input type="text" id="age" placeholder="나이">
    </div>  
    <div>
      <button type="button" id="btn1">XML요청</button>
    </div>
    <div id="content1"></div>
  </div>
  <script>
    $('#btn1').click(function() {
      $.ajax({
        /* 요청 */
        type: 'get',
        url: '/servlet/getXML',
        data: 'name=' + $('#name').val() + '&age=' + $('#age').val(),  // 파라미터를 data 속성에 저장
       
        /* 응답 */
        dataType: 'xml',
        success: function(resData) {  // resData는 <person><name>alice</name><age>30</age></person> 형태이다.
          var ul = '<ul>';
          ul += '<li>' + $(resData).find('name').text() + '</li>';
          ul += '<li>' + $(resData).find('age').text() + '</li>';
          $('#content1').html(ul);   // empty() 또는 html() 두가지로 확인 가능(html은 덮어쓰기가 가능하다.)
         
        },
        error: function(jqXHR) {
          alert(jqXHR.status + '(' + jqXHR.statusText + ')');
        } 
      })
    })
  </script>

Ajax(JSON) 활용 예제

  <div>
    <form id="frm">
      <div>
        <input type="text" name="title" placeholder="제목">
      </div>
      <div>
        <input type="text" name="writer" placeholder="작성자">
      </div>
      <div>
        <button type="button" id="btn2">JSON요청</button>
      </div>
    </form>
      <div id="content2"></div>
  </div>
  <script>
    $('#btn2').click(function() {
      $.ajax({
        /* 요청 */
        type: 'get',
        url: '/servlet/getJSON',
        data: $('#frm').serialize(),  // <form> 태그의 모든 입력 요소들을 파라미터로 보낸다. 이 때 입력 요소드은 name 속성을 가지고 있어야 한다.
        /* 응답 */
        dataType: 'json',
        success: function(resData) {  // resData는 {"writer":"관리자","title":"공지사항"} 형태이다.
          var str = '';
          str += '<h4>' + resData.title + '</h4>';
          str += '<h4>' + resData.writer + '</h4>';
          $('#content2').html(str);
        },
        error: function(jqXHR) {
          alert(jqXHR.status + '(' + jqXHR.statusText + ')');
        }
      })
    })
  </script>  

---

XML Servlet

---

doGet() 메소드로 받아오는 파라미터 처리 예제

요청 인코딩

request.setCharacterEncoding("UTF-8");

요청 파라미터 (null & 빈문자열 처리)

String name = request.getParameter("name");
String strAge = request.getParameter("age");
int age = 0;
if(strAge != null && !strAge.isEmpty()) {  // null & 빈문자열 처리
	age = Integer.parseInt(strAge);
}

XML 만들기

// {"person": {"name": "alice", "age": 30}}를 생성한 뒤 XML 태그 형식으로 변환
<?xml version="1.0" encoding="UTF-8"?>
<person>
	<name>alice</name>
	<age>30</age>
</person>

JSONObject person = new JSONObject();
person.put("name", name);
person.put("age", age);
JSONObject resJSON = new JSONObject();
resJSON.put("person", person);
	  
String responseXML = XML.toString(resJSON);

응답 데이터 타입과 인코딩

response.setContentType("application/xml; charset=UTF-8");

응답 스트림 생성

PrintWriter out = response.getWriter();

응답

out.println(responseXML); // $.ajax({success: function(resData){}...)
	                      // function의 매개변수 resData로 responseXML이 전달된다.
out.flush();
out.close();    

---

JSON Servlet

---

doGet() 메소드로 받아오는 파라미터 처리 예제

요청 인코딩

request.setCharacterEncoding("UTF-8");

요청 파라미터

String title = request.getParameter("title");
String writer = request.getParameter("writer");

JSON 만들기

// {"title": "공지사항", "writer": "관리자"}
JSONObject responseJSON = new JSONObject();
responseJSON.put("title", title);
responseJSON.put("writer", writer);

외부 라이브러리를 사용하지 않고 순수하게 Java만 가지고 만드는 기본적인 방식

String str = "{\"writer\":\"" + writer + "\", \"title\":\"" + title + "\"}";

응답 데이터 타입과 인코딩

response.setContentType("application/json; charset=UTF-8");

응답 스트림 생성

PrintWriter out = response.getWriter();

응답

out.println(responseJSON);
out.flush();
out.close();

---

---