오픈프레임워크_Day62

OpenFrameWork 2015. 6. 11. 08:51
### : 목차 구분 기호
--- : 목차 내에 항목 구분 기호
@@@ : 태그 용도 
,,, : 같은 항목 내에 구분 기호

목차
1. 이론 및 정보
2. 설정 및 그 밖에
3. 소스코드 또는 실습
4. 과제

###################################
1. 이론 및 정보
-----------------------------------
* JSON 
- 자바스크립트를 위한 표기법? 
- 약속, XML을 대체해서 간단하게, 읽고 쓰기 위해
- 서로 다른 프로그래밍 언어 간에 데이터를 교환하기 위한 표기법이다.

문법 : 아래 두 가지를 혼합해서 씀
- 맵 형식
     {이름:값,이름:값, ...}

- array 형식
     [값,값, ...]

위 두가지 방식 혼합이 가능

XML을 JSON으로 바꾸는 연습 필요!!!
----------------------------------- 
###################################
2. 설정 및 그 밖에
-----------------------------------
* AjaxApp 프로젝트 설정 변경
/AjaxApp/WebContent/WEB-INF/web.xml

아래 내용 추가 
  <servlet>
    <servlet-name>valid</servlet-name>
    <servlet-class>ajax.ValidateServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>valid</servlet-name>
    <url-pattern>/valid.do</url-pattern>
  </servlet-mapping>
  <servlet>
    <servlet-name>dynamic</servlet-name>
    <servlet-class>ajax.DynamicServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>dynamic</servlet-name>
    <url-pattern>/dynamic.do</url-pattern>
  </servlet-mapping>
----------------------------------- 
###################################
3. 소스코드 또는 실습 
-----------------------------------
xml 데이터를 가지고 있는 코드 전반적인 문제가 있는 건가?
아래 코드를 변경해야 xml을 받아 올 수 있는 것으로 보임
<%@ page contentType="text/html; charset=EUC-KR"%>

<%@ page contentType="text/xml; charset=EUC-KR"%>
-----------------------------------
3-1
수정 - AJAX 연습 - XML 합치기 마무리
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/xml02.html

<!DOCTYPE html><html><head><meta charset="EUC-KR"><title></title>
<script src="ajax.js"></script><script>
     var xmlDoc = "", xslDoc = "";
     function fnRequest() {
          // 아래처럼 처리를 하면 비동기 방식이라 callback 함수에서
          // 합칠때 문제가 생길 수 있음, 반드시 xsl 결과가 온뒤에
          // xml 내용이 와야 한다
          //sendRequest("GET","book.jsp",null,fncallback);
          //sendRequest("GET","book.xsl",null,fncallback);
         
          sendRequest("GET","book.jsp",null,fncallback);
     }
     function fncallback() {
          if(httpRequest.readyState == 4){
               if(httpRequest.status == 200){
                    xmlDoc = httpRequest.responseXML;
                    sendRequest("GET","book.xsl",null,fncallback2);
                   
               }else{
                    alert(httpRequest.status);
               }
          }
     }
     function fncallback2() {
          if(httpRequest.readyState == 4){
               if(httpRequest.status == 200){
                    xslDoc = httpRequest.responseXML;
                   
                    // XML과 XSL 결합 시키는 함수
                    fnXSLT();
               }else{
                    alert(httpRequest.status);
               }
          }
     }    
     function fnXSLT(){
          // 이 함수는 두개 파일이 다 있다는 전제 하에 호출해야함
          if(xmlDoc == null || xslDoc == null)
               return;
         
          var div = document.getElementById("bookList");
         
          if(window.ActiveXObject){
               div.innerHTML = xmlDoc.transformNode(xslDoc);
          }
          else{
               var xsltProc = new XSLTProcessor();
               xsltProc.importStylesheet(xslDoc);
               var fragment = xsltProc.transformToFragment(xmlDoc, document);
              
               div.appendChild(fragment);
          }
     }
     window.onload = function() { fnRequest(); }
</script></head><body>
<h1>신규 책 목록</h1>
<div id="bookList"></div>
</body></html>
-----------------------------------  
3-2
생성 - AJAX 연습 - 날짜 검사 기능
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/xml03.html

<!DOCTYPE html><html><head><meta charset="EUC-KR"><title></title>
<script src="ajax.js"></script><script>
     function fnRequest() {
          var param = document.getElementById("birthDate").value;
          param = "birthDate="+param;
          sendRequest("GET","/AjaxApp/valid.do",param,fncallback);
     }
     function fncallback() {
          if(httpRequest.readyState == 4){
               if(httpRequest.status == 200){
                    var data = httpRequest.responseXML;
                    var message = data.getElementsByTagName("message");
                    var span = document.getElementById("dateMessage");
                    //span.innerHTML = message.item(0).firstChild.nodeValue;
                    span.innerHTML = message[0].firstChild.nodeValue;
               }else{
                    alert(httpRequest.status);
               }
          }
     }
</script></head><body>
<h1>Ajax를 이용한 유효성 검사</h1>
날짜 입력 :
<input type="text" size="10" id="birthDate" onchange="fnRequest()"/>
<span id="dateMessage"></span>
</body></html>
-----------------------------------  
3-3
생성 - AJAX 연습 - 날짜 검사 기능,서버
Workspace : ~\JSP\EclipseWork
/AjaxApp/src/ajax/ValidateServlet.java
여기서 테스트 해보는 방법
http://localhost:8080/AjaxApp/valid.do?birthDate=1999/1/1

package ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.ParseException;
import java.text.SimpleDateFormat;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ValidateServlet extends HttpServlet {
     protected void doGet(HttpServletRequest request,
               HttpServletResponse response)
                         throws ServletException, IOException {
          doPost(request, response);
     }

     protected void doPost(HttpServletRequest request,
               HttpServletResponse response)
                         throws ServletException, IOException {
          response.setContentType("text/xml");
          response.setCharacterEncoding("utf-8");
          PrintWriter out = response.getWriter();

          String params = request.getParameter("birthDate");
          boolean passed = isValidateDate(params);
          String msg = "당신이 입력한 날짜는 잘못되었다.";
          if(passed == true){
               msg = "잘 입력하였다.";
          }
          out.println("<response>");
          out.println("<passed>");
          out.println(Boolean.toString(passed));
          out.println("</passed>");
          out.println("<message>");
          out.println(msg);
          out.println("</message>");
          out.println("</response>");
     }

     private boolean isValidateDate(String params) {
          boolean isValid = true;
          if (params != null) {
               SimpleDateFormat formatter =
                         new SimpleDateFormat("yyyy/MM/dd");
               try {
                    formatter.parse(params);
               } catch (ParseException e) {
                    isValid = false;
               }
          } else {
               isValid = false;
          }
          return isValid;
     }
    
}
----------------------------------- 
3-4
생성 - AJAX 연습 - 서버로 부터 메세지를 받아 한줄 씩 추가 
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/xml04.html

<!DOCTYPE html><html><head><meta charset="EUC-KR"><title></title>
<script src="ajax.js"></script><script>
     function fnRequest() {
          var params = "task=reset";
          sendRequest("GET","/AjaxApp/dynamic.do",params,fncallback);
     }
     function fncallback() {
          if(httpRequest.readyState == 4){
               if(httpRequest.status == 200){
                    // 5초마다, 호출할 메서드를 입력
                    setInterval(pollServer, 5000);
               }else{
                    alert(httpRequest.status);
               }
          }
     }
     function pollServer() {
          var params = "task=bravo";
          sendRequest("GET","/AjaxApp/dynamic.do",params,fncallback2);
     }
     function fncallback2() {
          if(httpRequest.readyState == 4){
               if(httpRequest.status == 200){
                    // 디자인 할 곳
                    //alert(httpRequest.responseText);
                    var data = httpRequest.responseXML;
                    var msg = data
                              .getElementsByTagName("message")[0]
                              .firstChild.nodeValue;
                    //document.getElementById("test").innerHTML = msg+"<br/>";
                   
                    var table = document.getElementById("dynamicUpdateArea");
                    var tbody = table.getElementsByTagName("tbody").item(0);
                    var first_row = tbody.getElementsByTagName("tr").item(0);
                   
                    var new_row = createRow(msg);                   
                    tbody.insertBefore(new_row,first_row);
               }else{
                    alert(httpRequest.status);
               }
          }
     }
     function createRow(msg) {
          var row = document.createElement("tr");
          var cell = document.createElement("td");
          var cell_data = document.createTextNode(msg);
          cell.appendChild(cell_data);
          row.appendChild(cell);
          return row;
     }
</script></head><body>
<h1>이 페이지는 자동으로 업데이트 됩니다.</h1>
<input type="button" value="실행" id="go" onclick="fnRequest()"/>
<br/><br/>
이 페이지는 <span id="time">5</span>초 후에 갱신됩니다.
<br/><br/>
<table id="dynamicUpdateArea">
     <tbody>
          <tr id="row"><td></td></tr>
     </tbody>
</table>
<div id="test"></div>
</body></html>
----------------------------------- 
3-5
생성 - AJAX 연습 - xml04.html
Workspace : ~\JSP\EclipseWork
/AjaxApp/src/ajax/DynamicServlet.java
여기서 테스트 해보는 방법
http://localhost:8080/AjaxApp/dynamic.do?task=1

package ajax;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class DynamicServlet extends HttpServlet {
     private int counter = 1;
     protected void doGet(HttpServletRequest request,
               HttpServletResponse response)
                         throws ServletException, IOException {
          doPost(request, response);
     }

     protected void doPost(HttpServletRequest request,
               HttpServletResponse response)
                         throws ServletException, IOException {
          response.setContentType("text/xml");
          response.setCharacterEncoding("utf-8");
          response.setHeader("Cache-Control", "no-cache");
          PrintWriter out = response.getWriter();
         
          String res = "";
          String message = "";
          String task = request.getParameter("task");
         
          if(task.equals("reset")){
               counter = 1;
          }else{
               switch (counter) {
               case 1:
                    message = "아는 것이 힘이다.";break;
               case 2:
                    message = "천리길도 한 걸음부터";break;
               case 3:
                    message = "콩심은데 콩나도 팥심은데 팥난다.";break;
               case 4:
                    message = "낫 놓고 ㄱ자도 모른다.";break;
               case 5:
                    message = "술 먹을 돈은 없어도 책은 사보자.";break;
               case 6:
                    message = "가는 말이 고와야 오는 말이 곱다.";break;
               default:
                    message = "다른 값을 넣어 주세요.";                    break;
               }
               counter++;
          }
          res = "<message>" + message + "</message>";
          out.println("<response>");
          out.println(res);
          out.println("</response>");
          out.close();
     }

}
----------------------------------- 
3-6
생성 - JSON 연습 - 
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/json01.html

<!DOCTYPE html><html><head>
<meta charset="EUC-KR">
<script>
     window.onload = function() {
          var map1 = {ko:"한국", fr:"프랑스", uk:"영국"};
          //alert(map1.ko+","+map1.fr+","+map1.uk);
         
          var array1 = ["한국","프랑스","영국"];
          //alert(array1[0]);
         
          var mix = {
                    name:"홍길동",
                    food:["짜장면","짬뽕"],
                    favorateColor:["빨강","노랑","파랑"]
          };
          alert(mix.name+","+mix.food.length+","+mix.favorateColor[1]);
     }
</script>
</head><body>
</body></html>
----------------------------------- 
3-7 
생성 - JSON 연습 - 
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/json02.html

<!DOCTYPE html><html><head>
<meta charset="EUC-KR">
<script>
     window.onload = function() {
         
          // 클래스 생성
          Member = function(id,name,age) {
               this.id = id;
               this.name = name;
               this.age = age;
          }
         
          /*
          // 메서드 추가
          Member.prototype.setValue = function(id,name,age) {
               this.id = id;
               this.name = name;
               this.age = age;
          }
         
          // 메서드 추가
          Member.prototype.getAge = function() {
               return this.age;
          }
         
          // 메서드 추가
          Member.prototype.toString = function() {
               return this.id+" ("+this.name+")의 나이는 "+this.age;
          }
          */
                   
          // 위 코드를 json 표기법으로 리펙토링이 가능
          Member.prototype = {
                    setValue : function(id,name,age) {
                         this.id = id;
                         this.name = name;
                         this.age = age;
                    },                   
                    getAge : function() {
                         return this.age;
                    },                   
                    toString : function() {
                         return this.id+" ("+this.name+")의 나이는 "+this.age;
                    }
          }
         
          // 활용
          var mem = new Member("eagle", "임꺽정", 20);
          alert(mem.toString());         
     }
</script>
</head><body>
</body></html>
-----------------------------------  
3-8 
생성 - JSON 연습 - json03.html 의 서버
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/member_xml.jsp

<?xml version="1.0"?>
<%@ page contentType="text/html; charset=EUC-KR"%>
<result>
     <code>success</code>
     <data>
          <member>
               <name>홍길동</name>
               <id>tiger</id>
               <age>20</age>
          </member>
     </data>
</result>
-----------------------------------  
3-9 
생성 - JSON 연습 - xml 데이터 받기
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/json03.html     

<!DOCTYPE html><html><head><meta charset="EUC-KR">
<script src="ajax.js"></script>
<script>
     function fnRequest() {
          sendRequest("GET","member_xml.jsp",null,fncallback);
     }
     function fncallback() {
          if(httpRequest.readyState == 4){
               if(httpRequest.status == 200){
                    var xmlDoc = httpRequest.responseXML;
                    var code = xmlDoc
                              .getElementsByTagName("code")[0]
                              .firstChild.nodeValue;
                   
                    if(code == "success"){
                        
                    }
                   
               }else{
                    alert(httpRequest.status);
               }
          }
     }
     window.onload = function() { fnRequest(); }
</script>
</head><body>
<h1>서버로부터 xml타입의 데이터를 받는 예제</h1>
</body></html>
-----------------------------------  
3-10 
생성 - JSON 연습 - xml,json 데이터 받기
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/json04.html

<!DOCTYPE html><html><head><meta charset="EUC-KR">
<script src="ajax.js"></script>
<script>
     function fnRequest() {
          sendRequest("GET","member_json.jsp",null,fncallback);
     }
     function fncallback() {
          if(httpRequest.readyState == 4){
               if(httpRequest.status == 200){
                    // json으로 파싱해주는 방법, json 객체로 활용가능
                    var txtDoc = eval("("+httpRequest.responseText+")");
                    if(txtDoc.code == "success"){
                         var mem = txtDoc.data.member;
                         alert(mem.name+","+mem.id+","+mem.age);
                    }
               }else{
                    alert(httpRequest.status);
               }
          }
     }
     window.onload = function() { fnRequest(); }
</script>
</head><body>
<h1>서버로부터 xml과 json타입의 데이터를 받는 예제</h1>
</body></html>
-----------------------------------  
3-11 
생성 - JSON 연습 - json04.html 의 서버
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/member_json.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
{
     code : "success",
     data :{
          member : {name:"임꺽정",id:"lion",age:30}
     }
}
-----------------------------------  
3-12 
생성 - JSON 연습 - member_json1.jsp과 연결
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/json05.html

<!DOCTYPE html><html><head><meta charset="EUC-KR">
<script src="ajax.js"></script>
<script>
     function fnRequest() {
          sendRequest("GET","member_json1.jsp",null,fncallback);
     }
     function fncallback() {
          if(httpRequest.readyState == 4){
               if(httpRequest.status == 200){
                    // json으로 파싱해주는 방법, json 객체로 활용가능
                    var txtDoc = eval("("+httpRequest.responseText+")");
                    for(var i=0;i<3;i++){
                         alert(txtDoc[i].no+","+txtDoc[i].name+","+txtDoc[i].job);
                    }
               }else{
                    alert(httpRequest.status);
               }
          }
     }
     window.onload = function() { fnRequest(); }
</script>
</head><body>
<h1>서버로부터 json타입의 데이터를 받는 예제</h1>
</body></html>
-----------------------------------  
3-13 
생성 - JSON 연습 - json05.html의 서버, 배열 형식
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/member_json1.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
[
     {"no":"1","name":"임꺽정","job":"개그맨"},
     {"no":"2","name":"홍길동","job":"가수"},
     {"no":"3","name":"신돌석","job":"방송인"}
]
-----------------------------------  
3-14 
생성 - JSON 연습 -
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/member_xml_json.jsp

<?xml version="1.0"?>
<%@ page contentType="text/html; charset=EUC-KR"%>
<result>
     <code>success</code>
     <data>
          <![CDATA[{"name":"강감찬","id":"eagle","age":"30"}]]>
     </data>
</result>
-----------------------------------  
3-15 
생성 - JSON 연습 -
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/json06.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script src="ajax.js"></script>
<script>
     function fnRequest(){
          sendRequest("GET", "member_xml_json.jsp", null, fnCallback);
     }
    
     function fnCallback(){
          if(httpRequest.readyState == 4){
               if(httpRequest.status == 200){
                    var xmlDoc = httpRequest.responseXML;
                    var code = xmlDoc.getElementsByTagName("code")[0].firstChild.nodeValue;
                    alert(code);
                    if(code == "success"){
                         var data = xmlDoc.getElementsByTagName("data")[0].firstChild.nodeValue;
                         var jsonData = eval("(" + data + ")");
                         alert(jsonData.name + ", " + jsonData.id + ", " + jsonData.age);
                    }
               }
               else{
                    alert(httpRequest.status);
               }
          }
     }
    
     window.onload = function(){ fnRequest(); }
</script>
</head>
<body>
<h1>서버로부터 xml과 json타입의 데이터를 받는 예제</h1>
</body>
</html>
-----------------------------------  
3-16 
생성 - JSON 연습 - xml로 변환 했음
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/basic07_2.jsp

<?xml version="1.0"?>
<%@ page contentType="text/html; charset=EUC-KR"%>
<%
     String userNum = request.getParameter("userNum");
     // 디비 연결해서 결과 받아옴
     String name = "", gender = "", addr = "", tel = "";
     if (userNum.equals("1")) {
          name = "홍길동";
          gender = "남성";
          addr = "서울";
          tel = "111-1111";
     } else if (userNum.equals("2")) {
          name = "신사임당";
          gender = "여성";
          addr = "강릉";
          tel = "222-2222";
     } else if (userNum.equals("3")) {
          name = "임꺽정";
          gender = "남성";
          addr = "경기";
          tel = "333-3333";
     }    
%>

<employees>
     <employee name="<%=name%>" gender="<%=gender%>" addr="<%=addr%>" tel="<%=tel%>"/>
</employees>
----------------------------------- 
###################################
4. 과제
-----------------------------------
4-1
/AjaxApp/WebContent/json03.html  
----------------------------------- 
4-2
/AjaxApp/WebContent/basic07_2.jsp
를 받는 클라이언트를 작성해보시오
----------------------------------- 
4-3
코드 전반적으로 문제가 있는지 확인하기
----------------------------------- 
4-4
----------------------------------- 
4-5
-----------------------------------
###################################
5. 과제 해결
-----------------------------------
-----------------------------------
###################################
6. 기타
-----------------------------------
----------------------------------- 


저작자표시 비영리 변경금지 (새창열림)

'OpenFrameWork' 카테고리의 다른 글

오픈프레임워크_Day64  (0) 2015.06.15
오픈프레임워크_Day63  (0) 2015.06.12
오픈프레임워크_Day61  (0) 2015.06.10
오픈프레임워크_Day60  (0) 2015.06.09
오픈프레임워크_Day59  (0) 2015.06.08
,

티스토리툴바