오픈프레임워크_Day61

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

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

###################################
1. 이론 및 정보
-----------------------------------
* AJAX에서 POST 방식은 GET과 다르게 헤더를 지정해줘야함
----------------------------------- 
* 컨트롤러를 Servlet 으로 하는 이유, JSP로 안쓰는 이유
자바 문법 활용, 다른 클래스 사용
보통 프레임워크를 가져다 쓰는 경우가 많은데
프레임워크가 Servlet으로 많이 되어 있음

그러나! JSP로 컨트롤러를 사용해도 됨!
고정관념을 가질 필요가 없음
----------------------------------- 
* XSL
Xml Style sheet language
XML과 HTML을 섞어서 스타일을 입힘

XML과 XSL을 전달해서 스타일을 입히는 예제

----------------------------------- 
###################################
2. 설정 및 그 밖에
-----------------------------------

* XSL 만들기


----------------------------------- 
----------------------------------- 
----------------------------------- 
###################################
3. 소스코드 또는 실습 
-----------------------------------
3-1
생성 - AJAX 연습 - ajax.js 모듈 연습
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/basic04.html

<!DOCTYPE html><html><head><meta charset="EUC-KR">
<title>Insert title here</title>
<script src="ajax.js"></script>
<script>
     function fnSubmit() {
          var params = "name="+document.getElementById("name").value;
          //sendRequest("GET","basic01_proc.jsp",params,callback);
          //POST 방식
          sendRequest("POST","basic01_proc.jsp",params,callback);
     }
     
     function callback() {
          if(httpRequest.readyState == 4){
               if(httpRequest.status == 200){
                    // 서버로 부터 받아온 알맹이          
                    //alert(httpRequest.responseText);
                    var data = httpRequest.responseText;
                    var div = document.getElementById("display");
                    div.innerHTML = data;
               }else{
                    alert(httpRequest.status);
               }
          }
     }
</script>
</head><body>
<input type="text" name="name" id="name"/>
<input type="button" value="전송" onclick="fnSubmit()"/>
<hr/>
<div id="display"></div>
</body></html>
-----------------------------------  
3-2
수정 - AJAX 연습 - 반복된 코드 분리,POST 방식 적용
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/ajax.js

var httpRequest = null;
function getXMLHttpRequest() {
     return new XMLHttpRequest();
}
function sendRequest(method,url,params,callback) {
     httpRequest = getXMLHttpRequest();     
     var httpMethod = method ? method : "GET" ;
     if(httpMethod != "GET" && httpMethod != "POST"){
          httpMethod = "GET";
     }
     var httpUrl = url;     
     var httpParams = (params == null || params == "")?null:params;
     
     if(httpMethod == "GET" && httpParams != null){
          httpUrl = httpUrl + "?" + httpParams;
     }
     httpRequest.open(httpMethod,httpUrl,"true");
     httpRequest.onreadystatechange = callback;
     httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
     httpRequest.send(httpMethod =="POST"?httpParams:null);
}
-----------------------------------  
3-3
생성 - AJAX 연습 - 
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/basic05.html

<!DOCTYPE html><html><head><meta charset="EUC-KR">
<title>Insert title here</title>
<script src="ajax.js"></script>
<script>
     function fnSubmit() {
          sendRequest("GET","basic05_proc.jsp",null,callback);
     }
     
     function callback() {
          if(httpRequest.readyState == 4){
               if(httpRequest.status == 200){
                    var data = httpRequest.responseText;
                    var span = document.getElementById("maxTemp");
                    
                    var splitData = data.split(",");
                    
                    //위에 받은 데이터(문자들)를 위한 배열 준비
                    var arrData = new Array(splitData.length);
                    var maxNum = 0;
                    for(var i=0;i<splitData.length;i++){
                         arrData[i] = parseFloat(splitData[i]);
                         if(arrData[i] > maxNum){
                              maxNum = arrData[i];
                         }
                    }
                    span.innerHTML = maxNum;
               }else{
                    alert(httpRequest.status);
               }
          }
     }
     
     window.onload = function() {
          fnSubmit();
     }
</script>
</head><body>
<h2>최근 5일간 최고 기온 : <span id="maxTemp"></span></h2>
</body></html>
----------------------------------- 
3-4
생성 - AJAX 연습 - basic05.html의 서버
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/basic05_proc.jsp

<%@ page contentType="text/html; charset=EUC-KR"%>
<%
     double[] temp = {10.2, 11.8, 13.2, 9.8, 12.7};
     for(int i=0;i<temp.length;i++){
          out.print(temp[i]);
          if(i<temp.length-1)
               out.print(",");
     }
%>
----------------------------------- 
3-5
생성 - AJAX 연습 - Ajax를 이용한 문자 변환
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/basic06.html

<!DOCTYPE html><html><head><meta charset="EUC-KR">
<title>Insert title here</title>
<script src="ajax.js"></script>
<script>
function fnSubmit() {
     var key = document.getElementById("key").value;
     document.getElementById("keypressed").value = key;
     key = "key="+key;
     sendRequest("GET","/AjaxApp/ascii.do",key,callback);
}

function callback() {
     if(httpRequest.readyState == 4){
          if(httpRequest.status == 200){               
               document.getElementById("decimal").value 
               = httpRequest.responseText;
          }else{
               alert(httpRequest.status);
          }
     }
}
</script>
</head><body>
<h1>Ajax를 이용한 문자 변환</h1>
키를 입력하시오 : <input type="text" id="key" name="key" onkeyup="fnSubmit()"/>
<br/><br/>
입력된 키값 : <input type="text" id="keypressed" name="keypressed"/>
<br/><br/>
변환된 키값 : <input type="text" id="decimal" name="decimal"/>
</body></html>
----------------------------------- 
3-6
생성 - AJAX 연습 - Ajax를 이용한 문자 변환
Workspace : ~\JSP\EclipseWork
/AjaxApp/src/ajax/AsciiServlet.java
테스트 방법
http://localhost:8080/AjaxApp/ascii.do?key=a

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 AsciiServlet 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 {
          //System.out.println("test...");
          // HTML이 아닌 일반 문서는 plain으로 해준 것
          response.setContentType("text/plain");
          
          // 캐시 설정 변경, 캐시 정보를 쓰지 않겠다
          // 무줘건 서버로 부터 새로운 정보를 받게 만듬
          // 만약 같은 내용이라면 서버에 가지 않고 캐시를 쓰기 때문에
          // html은 meta 태그에 캐시를 쓰지 않게 하는 내용이 있음
          response.setHeader("Cache-Control", "no-cache");
          
          PrintWriter out = response.getWriter();
          try{
               String key = request.getParameter("key");
               if(key != null){
                    // 아스키 코드로 변환
                    int keyChar = key.charAt(0);
                    String strDecimal = Integer.toString(keyChar);
                    out.println(strDecimal);
               }
          }catch(Exception e){
               System.out.println(e);
               out.println("I don't know!");
          }
     }
}
----------------------------------- 
3-7 
생성 및 수정
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>AjaxApp</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
     <servlet-name>ascii</servlet-name>
     <servlet-class>ajax.AsciiServlet</servlet-class>
  </servlet>
  
  <servlet-mapping>
       <servlet-name>ascii</servlet-name>
       <url-pattern>/ascii.do</url-pattern>
  </servlet-mapping>
</web-app>
-----------------------------------  
3-8 
생성 - AJAX 연습 - 과제, 요즘스타일로 바꿔라
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/basic07.html
회원번호만 입력하면 자동으로 나머지가 나오는 예제

<!DOCTYPE html><html><head><meta charset="EUC-KR">
<title>Insert title here</title><script>
function fnSubmit() {
     var userNum = document.getElementById("userNum").value;
     document.getElementById("hiddenFrame").src =
          "basic07_1.jsp?userNum="+userNum;
}
function setUserData(name,gender,addr,tel) {
     document.getElementById("userName").value = name;
     document.getElementById("userGender").value = gender;
     document.getElementById("userAddr").value = addr;
     document.getElementById("userTel").value = tel;
}
</script></head><body>
<h2>회원 정보 조회</h2>
회원 번호 : <input type="text" name="userNum" id="userNum" onkeyup="fnSubmit()"/>
<br/><br/>
이름 : <input type="text" name="userName" id="userName" />
<br/><br/>
성별 : <input type="text" name="userGender" id="userGender" />
<br/><br/>
주소 : <input type="text" name="userAddr" id="userAddr" />
<br/><br/>
전화번호 : <input type="text" name="userTel" id="userTel" />
<iframe id="hiddenFrame" width="0" height="0" boarder="0"/>
</body></html>
-----------------------------------  
3-9 
생성 - AJAX 연습 - 과제, 요즘스타일로 바꿔라
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/basic07_1.jsp

<%@ 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";
     }     
%>
<script>
     function fnSetting() {
          var name = "<%=name%>";
          var gender = "<%=gender%>";
          var addr = "<%=addr%>";
          var tel = "<%=tel%>";
          
          // frame에 접근하는 방식
          // 꼭대기에서 부터 접근을 한다
          // 가장 꼭대기에 있는 frame ==> top
          // 하나의 페이지에는 최소 한개의 프레임이 있음
          // 다른 프레임을 접근해서 해당 프레임에 
          // 자바스크립트 함수를 호출
          
          // 메인 프레임 접근
          top.setUserData(name,gender,addr,tel);
          
     }
     window.onload = function() { fnSetting(); }
</script>
-----------------------------------  
3-10 
생성 - AJAX 연습 - xml로 전달
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/xml01.html

<!DOCTYPE html><html><head><meta charset="EUC-KR"><title></title>
<script src="ajax.js"></script><script>
     function fnRequest() {
          sendRequest("GET","book.jsp",null,fncallback);
     }
     function fncallback() {
          if(httpRequest.readyState == 4){
               if(httpRequest.status == 200){
                    // alert(httpRequest.responseText);
                    
                    // XML로 받으려면 아래와 같이 받아야한다.
                    // 객체로 전달이 된다. 그래야 DOM으로 접근이 가능
                    // alert(httpRequest.responseXML);     
                    
                    var data = httpRequest.responseXML;
                    var bookList = data.getElementsByTagName("book");     
                    var msg = "책 권수 : "+bookList.length+"권 \n";
                    for(var i=0;i<bookList.length;i++){
                         var book = bookList.item(i);
                         var title = book.getElementsByTagName("title").item(0).firstChild.nodeValue;
                         var author = book.getElementsByTagName("author").item(0).firstChild.nodeValue;;
                         msg += title +"(" + author + ")\n";
                    }
                    alert(msg);
               }else{
                    alert(httpRequest.status);
               }
          }
     }
     window.onload = function() { fnRequest(); }
</script></head><body>
</body></html>
-----------------------------------  
3-11 
생성 - AJAX 연습 - xml로 전달
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/book.jsp

<?xml version="1.0" encoding="euc-kr"?>
<%--
// 여기서 처리하려면 아래와 같이 넣어주면 됨
<?xml-stylesheet type="text/xml" href="book.xsl"?>
--%>
<%@ page contentType="text/xml; charset=EUC-KR"%>
<books>
     <book>
          <title>홍길동전</title>
          <author>허균</author>
     </book>
     <book>
          <title>난중일기</title>
          <author>이순신</author>
     </book>
     <book>
          <title>동의보감</title>
          <author>허준</author>
     </book>
</books>
-----------------------------------  
3-12 
생성 - AJAX 연습 - xml로 전달, 데이터 스타일 추가
Workspace : ~\JSP\EclipseWork
/AjaxApp/WebContent/book.xsl

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
     <!-- 결과물을 어떤 형식으로 만들지 방법을 지정 -->
     <!-- 들여쓰기, 인코딩 -->
     <xsl:output method="html" indent="yes" encoding="euc-kr"></xsl:output>
     
     <!-- xsl:template에서 원하는 태그에 디자인을 함 -->
     <!-- 보통 부모태그를 지정하면 자식 태그 또한 적용이 된다 -->
     <xsl:template match="books">
          <ul>
               <!-- 반복을 돌리고자 하는 태그 이름 -->
               <xsl:for-each select="book">
               <li><b><xsl:value-of select="title"/></b>
               (<xsl:value-of select="author"/>)</li>
               </xsl:for-each>
          </ul>
     </xsl:template>
</xsl:stylesheet>
-----------------------------------  
3-13 
생성 - 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);
                    
                    // XML과 XSL 결합 시키는 함수
                    fnXSLT();
               }else{
                    alert(httpRequest.status);
               }
          }
     }
     function fncallback2() {
          if(httpRequest.readyState == 4){
               if(httpRequest.status == 200){
                    xslDoc = httpRequest.responseXML;
                    
               }else{
                    alert(httpRequest.status);
               }
          }
     }
     function fnXSLT() {
          
     }
     window.onload = function() { fnRequest(); }
</script></head><body>
<h1>신규 책 목록</h1>
<div id="bookList"></div>
</body></html>
-----------------------------------  
3-14 
-----------------------------------  
3-15 
-----------------------------------  
3-16 
-----------------------------------  
3-17 
-----------------------------------  
3-18 
-----------------------------------  
3-19 
-----------------------------------  
3-20 
-----------------------------------  
3-21 
-----------------------------------  
3-22 
-----------------------------------  
3-23 
-----------------------------------  
3-24 
-----------------------------------  
3-25 
-----------------------------------  
3-26 
-----------------------------------  
3-27 
----------------------------------- 
3-28 
----------------------------------- 
3-29 
----------------------------------- 
3-30 
----------------------------------- 
3-31 
----------------------------------- 
###################################
4. 과제
-----------------------------------
4-1
/AjaxApp/WebContent/basic07_1.jsp
/AjaxApp/WebContent/basic07.html
예전 스타일을 요즘 스타일로 바꾸라
ajax.js안에 모듈 이용해서 변경
----------------------------------- 
4-2
----------------------------------- 
4-3
----------------------------------- 
4-4
----------------------------------- 
4-5
-----------------------------------
###################################
5. 과제 해결
-----------------------------------
5-1
-----------------------------------
5-2
----------------------------------- 
5-3
-----------------------------------
5-4
-----------------------------------
###################################
6. 기타
----------------------------------- 
----------------------------------- 


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

'OpenFrameWork' 카테고리의 다른 글

오픈프레임워크_Day63  (0) 2015.06.12
오픈프레임워크_Day62  (0) 2015.06.11
오픈프레임워크_Day60  (0) 2015.06.09
오픈프레임워크_Day59  (0) 2015.06.08
오픈프레임워크_Day58  (0) 2015.06.05
,

티스토리툴바