06.ajax

이현주·2023년 9월 17일

Servlet

목록 보기

7/10

[XMLServlet.java]

1.요청 인코딩

request.setCharacterEncoding("UTF-8");

2.요청 파라미터

String name= request.getParameter("name");
String strAge=request.getParameter("age");

//null,공백 확인 후 형변환
int age=0;
if(strAge!=null&&!strAge.isEmpty())
{
	age=Integer.parseInt(strAge);
}

3.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);

4.응답 데이터 타입과 인코딩

response.setCharacterEncoding("UTF-8");

5.응답 스트림 생성

PrintWriter out =response.getWriter();

6. 응답

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

[JSONServlet.java]

1.요청 인코딩

request.setCharacterEncoding("UTF-8");

2.요청 파라미터

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

3.JSON만들기

JSONObject responseJSON=new JSONObject();
responseJSON.put("title",title);
responseJSON.put("writer",writer);

4.응답 데이터 타입과 인코딩

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

5.응답 스트림 생성

PrintWriter out =response.getWriter();

6.응답

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

[NewFile.html]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>


   <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(),
		  
		  
		  /*응답*/
		  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);
		},
		error:function(jqXHR){
			alert(jqXHR.status+'('+jqXHR.statusText+')');
		}
	  
	  
	  })
})
  
  </script>
  
  <hr>
  
  
  
   <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>


</body>
</html>