1. 쿠키(Cookie)의 개요


- HTTP 프로토콜은 상태가 없다. 즉 이전에 무엇을 했고, 지금 무엇을 했는지에 대한 정보를 갖고 있지 않는 특성을 가지고 있다.

즉, 웹 브라우저(클라이언트)의 요청에 대한 응답을 하고 나면 해당 클라이언트와의 연결을 지속하지 않는다 (Connectionless)


- HTTP 프로토콜은 상태에 대한 지속적인 연결이 없다. 따라서 이런 부분을 해결하기 위해서 웹 서버 측에 웹 브라우저의 정보를 저장한 후 계속되는 웹브라우저의 요청 속에 포함되어 있는 웹 브라우저의 정보와 비교해서 동일한 웹 브라우저로부터 온 요청을 판단할 수 있다.



- 쿠키(Cookie)는 상태가 없는 프로토콜을 위해 상태를 지속시키기 위한 방법이다. 쿠키는 웹 브라우저의 정보를 웹 브라우저에 저장하므로, 이후에 서버로 전송되는 요청에는 쿠키가 가지고 있는 정보가 같이 포함돼 전송된다. 이때 웹 서버는 웹 브라우저의 요청 속에 포함되어 있을 쿠키를 읽어서 새로운 웹 브라우저인지 이전에 요청을 했던 웹 브라우저인지를 판단할 수 있다.


- 이러한 방법으로 웹 브라우저를 통해서 특정 사이트에 접속하면 웹 브라우저에 쿠키가 저장되어 접속한 사용자의 정보가 유지되는 것이다.

 




- 쿠키는 웹 사이트에 접속할 때 생성되는 정보를 담은 임시 파일이다. 일반적으로 쿠키는 4KB 이하의 크기로 생성된다. 이러한 쿠키의 목적은 원래 사이트에 접속한 사용자의 정보를 유지하거나, 사이트에 접속하는 사용자들이 해당 사이트에 쉽게 접속하기 위한 것이다.


- 어떤 웹 사이트를 처음 방문해서 로그인해 사용하고 나면, 아이디와 패스워드를 기록한 쿠키가 만들어진다. 그 다음부터 해당 사이트에 접속하면 별도의 절차 없이 사이트에 빠르게 연결할 수 있게 된다. 쿠키는 이러한 목적으로 사용하기 위해 만들어진 것이다.


- 그러나 쿠키는 웹 브라우저가 방문했던 웹 사이트에 대한 정보 및 개인의 정보가 기록되기 때문에 개인의 사생활이나 정보를 침해할 소지가 있다는 문제점을 안고 있다. 이러한 보안상의 문제를 조금이나마 해소하기 위해서 웹 브라우저 자체에 쿠키 거부 기능이 추가되었다.


- 쿠키에 대한 거부가 웹 브라우저에 설정되어 있으면, 쿠키 본래의 목적인 웹 브라우저와의 연결을 지속시키는 기능을 수행할 수 없게 된다. 따라서 이것은 쿠키의 가장 치명적인 단점이 된다.


 

2. 쿠키(Cookie)의 사용

 

- JSP에서 쿠키를 사용하려면 javax.servlet.http 패키지에 있는 Cookie 클래스의 객체를 생성해야 한다. 이렇게 생성된 쿠키에는 각각의 웹 브라우저를 판별할 수 있는 정보가 포함되어 있다. 쿠키는 웹 서버가 웹 브라우저의 요청에 응답할 때 response 객체에 실려서 사용자의 웹 브라우저에 저장된다.


- 웹 브라우저에 저장된 쿠키는 사용자가 다시 웹 서버에 요청을 할 때 request 객체에 실려서 다시 웹 서버에 전달된다. 이때 웹 서버는 전달된 쿠키의 값을 읽어서 같은 웹 브라우저로부터 온 요청인지를 판별하게 된다.


- 이러한 방법에 의해 웹 서버는 각각의 웹 브라우저와의 상태를 지속시킬 수 있는 것이다.


3. 쿠키 생성 및 사용

 

- 쿠키는 이름, 값, 유효기간, 도메인, 경로 등으로 이루어져 있다. 이들 중 가장 중요한 구성 요소는 쿠키의 이름과 값이다.


(1) 쿠키 생성하기

 

<%

Cookie info = new Cookie("testCookie", "Hello Cookie");    // 쿠키를 생성한다. 이름:testCookie, 값 : Hello Cookie

info.setMaxAge(365*24*60*60);                                     // 쿠키의 유효기간을 365일로 설정한다.

info.setPath("/");                                                      // 쿠키의 유효한 디렉토리를 "/" 로 설정한다.

response.addCooke(info);                                          // 클라이언트 응답에 쿠키를 추가한다.

%>


(2) 쿠키에 저장된 정보 읽어오기

 

<%

Cookie[] cookies = request.getCookies();            // 요청정보로부터 쿠키를 가져온다.

out.println("현재 설정된 쿠키의 개수 : " + cookies.length);    // 쿠키가 저장된 배열의 길이를 가져온다.

for(int i = 0 ; i<cookies.length; i++){                            // 쿠키 배열을 반복문으로 돌린다.

out.println(i + "번째 쿠키 이름 : " + cookies[i].getName());            // 쿠키의 이름을 가져온다.

out.println(i + "번째 쿠키에 설정된 값 : " + cookies[i].getValue());    // 쿠키의 값을 가져온다.

}

%>


(3) 설정된 쿠키를 모두 삭제하기

<%

Cookie[] cookies = request.getCookies();            // 요청정보로부터 쿠키를 가져온다.

for(int i = 0 ; i<cookies.length; i++){                    // 쿠키 배열을 반복문으로 돌린다.

cookies[i].setMaxAge(0);                        // 특정 쿠키를 더 이상 사용하지 못하게 하기 위해서는 

    쿠키의 유효시간을 만료시킨다.

response.addCookie(cookies[i]);    // 해당 쿠키를 응답에 추가(수정)한다.

}

%>

 

4. 쿠키 관련 메소드


 메소드

설명 

String getCommnet() 

 쿠키에 대한 설명을 가져온다. 

String getDomain() 

 쿠키의 유효한 도메인 정보를 가져온다. 

int getMaxAge() 

 쿠키의 사용할 수 있는 기간에 대한 정보를 가져온다. 

String getName()

 쿠키의 이름을 가져온다 

String getPath() 

 쿠키의 유효한 디렉토리 정보를 가져온다. 

boolean getSecure() 

 쿠키의 보안이 어떻게 설정되어 있는지 가져온다. 

String getValue() 

 쿠키에 설정된 값을 가져온다. 

int getVersion() 

 쿠키의 버전을 가져온다. 

void setComment(String) 

 쿠키에 대한 설명을 설정한다. 

void setDomain(String) 

 쿠키에 유효한 도메인을 설정한다. 

void setMaxAge(int) 

 쿠키의 유효한 기간을 설정한다. 

void setPath(Striong) 

 쿠키의 유효한 디렉토리를 설정한다. 

void setSecure(boolean) 

 쿠키의 보안을 설정한다. 

void setValue(String) 

 쿠키의 값을 설정한다. 

void setVersion(int) 

 쿠키의 버전을 설정한다. 


5. 쿠키 사용 예제

 

(1) 쿠키 읽어서 가져오기    (자동 로그인 처리)

<%@ page language ="java" contentType ="text/html;charset=EUC-KR" pageEncoding="EUC-KR"%>

 

<%

String id = "";

try{

Cookie[] cookies = request.getCookies();                 // 요청에서 쿠키를 가져온다.

if(cookies!=null){                                                    // 쿠키가 Null이 아닐때,

for(int i=0; i<cookies.length; i++){                        // 쿠키를 반복문으로 돌린다.

if(cookies[i].getName().equals("id")){            // 쿠키의 이름이 id 일때

id=cookies[i].getValue();                        // 해당 쿠키의 값을 id 변수에 저장한다.

}

}

if(id.equals("")){                                            // 쿠키에서 이름 id를 찾지 못했을때

response.sendRedirect("loginForm.jsp");    // loginForm 으로 리다이렉트 한다.

}

}else{                                                                // 요청에서 쿠키가 없을때

response.sendRedirect("loginForm.jsp");    // loginForm 으로 리다이렉트 한다.

}

}catch(Exception e){}

%>


(2) 쿠키 저장하기    (로그인 정보 등록)

 

<%@ page language ="java" contentType ="text/html;charset=EUC-KR" pageEncoding="EUC-KR"%>

<% request.setCharacterEncoding("euc-kr"); %>

 

<%

String id = request.getParameter("id");                        // 요청에서 id 값을 가져온다.

String passwd = request.getParameter("passwd");        // 요청에서 passwd 값을 가져온다.

                                            

{}  // id 와 passwd 로 로그인 을 확인한다.

if(check == 1){                                                       // 로그인이 성공일때,

Cookie cookie = new Cookie("id", id);              // id 라는 이름과 request의 id 값으로 쿠키 생성

cookie.setMaxAge(20*60);                             // 쿠키의 유효시간을 20분으로 설정

response.addCookie(cookie);                        // 쿠키를 응답에 추가

response.sendRedirect("cookieMain.jsp");       // cookieMain 으로 리다이렉트

}else {}

%>

 

(3) 쿠키 삭제하기    (로그아웃)

<%@ page language ="java" contentType ="text/html;charset=EUC-KR" pageEncoding="EUC-KR"%>

<%

Cookie[] cookies = request.getCookies();                    // 요청에서 쿠키를 가져온다.

if(cookies!=null){                                                    // 쿠키가 Null이 아니라면

for(int i=0; i<cookies.length; i++){                     // 쿠키를 반복문으로 돌린다.

if(cookies[i].getName().equals("id")){     // 쿠키의 이름이 id 일때

cookies[i].setMaxAge(0);            // 쿠키의 유효시간을 0 으로 셋팅한다.

response.addCookie(cookies[i]);  // 수정한 쿠키를 응답에 추가(수정) 한다.

}

}

}

%>

 

 

*(추가)  쿠키 활용 예제


쿠키 생성 버튼을 누른 후 이 페이지를 닫고 다시 들어와서 쿠키 보기를 눌러보세요.



<!--
     // 쿠키 생성
     function setCookie(cName, cValue, cDay){
          var expire = new Date();
          expire.setDate(expire.getDate() + cDay);
          cookies = cName + '=' + escape(cValue) + '; path=/ '; // 한글 깨짐을 막기위해 escape(cValue)를 합니다.
          if(typeof cDay != 'undefined') cookies += ';expires=' + expire.toGMTString() + ';';
          document.cookie = cookies;
     }

     // 쿠키 가져오기
     function getCookie(cName) {
          cName = cName + '=';
          var cookieData = document.cookie;
          var start = cookieData.indexOf(cName);
          var cValue = '';
          if(start != -1){
               start += cName.length;
               var end = cookieData.indexOf(';', start);
               if(end == -1)end = cookieData.length;
               cValue = cookieData.substring(start, end);
          }
          return unescape(cValue);
     }
//-->


쿠키 생성 버튼을 누른 후 쿠키 보기를 눌러 보세요.<br>
쿠키 삭제 버튼을 누른 후 쿠키 보기도 눌러 보세요.<br>
<br>
쿠키 생성 버튼을 누른 후 이 페이지를 닫고 다시 들어와서 쿠키 보기를 눌러보세요.<br>
<br>

<input type="button" value="쿠키 생성" onclick="setCookie('test', 'cookie test, 쿠키 테스트', 1)">
<input type="button" value="쿠키 보기" onclick="alert(getCookie('test'))">
<input type="button" value="쿠키 삭제" onclick="setCookie('test', '', -1)">



 

 소스 설명

setCookie() - 쿠키를 만드는 함수입니다.
setCookie('쿠키이름', '쿠키값', 만료일)

쿠키이름 : 쿠키이름을 영문으로 넣어주세요.
쿠키값 : 쿠키의 값을 문자열로 넣어주세요.
만료일 : 쿠키의 만료일을 숫자로 넣어주세요
예) 만료일이 1 이면 하루동안 지속되는 쿠키입니다.
예) 만료일이 -1 이면 쿠키가 삭제됩니다.


getCookie() - 쿠키값을 가져오는 함수입니다.
getCookie('쿠키이름')

쿠키이름을 넣어 주면 해당 쿠키의 값을 반환합니다. 쿠키가 있을때만 반환하며
없으면 공백이 반환됩니다.

 

 

 

 

2. 세션(session)의 개요


쿠키가 웹 브라우저에 사용자의 상태를 유지하기 위한 정보를 저장했다면, 세션(session)은 웹 서버 쪽의 웹 컨테이너에 상태를 유지하기 위한 정보를 저장한다.


세션은 사용자의 정보를 유지하기 위해 javax.servlet.http 패키지의 HttpSession 인터페이스를 구현해서 사용한다. 쿠키는 사용자의 상태 유지를 위한 정보를 웹 브라우저에 저장해서 웹 서버가 쿠키 정보를 읽어서 사용한다.

이것은 웹 브라우저에 저장된 쿠키는 웹 서버에서 열어볼 수 있다는 점에서 보안상 문제가 발생할 수 있다.

따라서 사용자의 정보를 유지하기 위해서는 쿠키를 사용하는 것보다 세션을 사용한 웹 브라우저와 웹 서버의 상태 유지가 훨씬 안정적이고, 보안상의 문제도 해결할 수 있다.


세션은 웹 브라우저 당 1개씩 생성되어 웹 컨테이너에 저장된다.




웹 서버는 각각의 웹 브라우저로부터 발생한 요청에 대해서 특별한 식별자를 부여한다. 이후에 이 식별자를 웹 브라우저에서 발생한 요청들과 비교해서 같은 식별인지를 구별하게 된다. 이 특별한 식별자에 특정한 값을 넣을 수 있으며, 이것을 사용해서 세션을 유지하게 된다.



2. 세션(Session) 메소드 리스트


 메소드 이름

리턴 타입 

설명 

getAttribute(String name) 

 java.lang.Object

 세션 속성명이 name인 속성의 값을 Object 타입으로 리턴한다. 해당 되는 속성명이 없을 경우에는 null 값을 리턴한다.

getAttributeNames() 

java.util.Enumeration 

 세션 속성의 이름들을 Enumeration 객체 타입으로 리턴한다.

getCreationTime() 

long 

1970년 1월 1일 0시 0초를 기준으로 하여 현재 세션이 생성된 시간까지 경과한 시간을 계산하여 1/1000초 값으로 리턴한다. 

getId() 

java.lang.String 

세션에 할당된 고유 식별자를 String 타입으로 리턴한다. 

getMaxInactiveInterval()

int 

현재 생성된 세션을 유지하기 위해 설정된 세션 유지시간을 int형으로 리턴한다.

invalidate() 

void 

현재 생성된 세션을 무효화 시킨다.

removeAttribute(String.name)

void 

세션 속성명이 name인 속성을 제거한다. 

setAttribute(String name, Object value)

void 

세션 속성명이 name인 속성에 속성값으로 value를 할당한다. 

setMaxInactiveInterval(int interval) 

void 

세션을 유지하기 위한 세션 유지시간을 초 단위로 설정한다. 

 

 

3. 세션(Session)의 속성


- 세션의 속성 설정은 session 객체의 setAttribute() 메소드를 사용한다.

session.setAttribute("id", "value");


이때 주의할 사항은 세션의 속성 값은 객체 형태만 올 수 있다는 것이다.

session 객체는 웹 브라우저와 매핑되므로 해당 웹 브라우저를 닫지 않는 한 같은 창에서 열려진 페이지는 모두 같은 session 객체를 공유하게 된다. 따라서 session 객체의 setAttribute() 메소드를 사용해서 세션의 속성을 지정하게 되면 계속 상태를 유지하는 기능을 사용할 수 있게 된다.



- 세션의 속성을 사용하려면 session 객체의 getAttribute() 메소드를 사용한다.


String id = (String)session.getAttribute("id");


      getAttribute() 메소드는 리턴 타입이 Object 타입이므로 사용 시 실제 할당된 객체 타입으로 형변환(casting)을 해야 한다.


- 세션의 속성을 삭제하려면 session 객체의 removeAttribute() 메소드를 사용한다.


session.removeAttribute("id");


- 세션의 모든 속성을 삭제할 때는 session 객체의 invalidate() 메소드를 사용한다.


session.invalidate();



4. 세션(Session) 사용 예제


- 세션(Session) 설정 (로그인 성공시에 로그인 아이디를 세션에 저장한다.)


<%@ page language ="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>


<% request.setCharacterEncoding("euc-kr");%>


<%

String id = request.getParameter("id");                        // request에서 id 파라미터를 가져온다

String passwd = request.getparameter("passwd");      // request에서 passwd 파라미터를 가져온다.


--- 로그인 처리 ...   로그인 성공시 check 는 TRUE --


if(check){                                                        // 로그인 성공시


session.setAttribute("id", id);                 // 세션에 "id" 이름으로 id 등록

response.sendRedirect("main.jsp");               // 로그인 성공 메인페이지 이동


}else{%>                                                        // 로그인 실패

<script>

alert("로그인 실패");

history.go(-1);                                    // 이전 페이지로 이동

</script>

<%}%>


- 세션(Session) 가져오기 (세션에서 아이디를 가져와 로그인 상태를 인증하고, 값이 없을 경우 로그인 페이지로 넘긴다.)


<%@ page language ="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>


<% request.setCharacterEncoding("euc-kr");%>


<%


String id = "";


try{

id = (String)session.getAttribute("id");            // request에서 id 파라미터를 가져온다


if(id==null||id.equals(""){                            // id가 Null 이거나 없을 경우

response.sendRedirect("loginform.jsp");    // 로그인 페이지로 리다이렉트 한다.

}

<%}%>


- 세션(Session) 제거하기 (로그아웃 시 현재의 세션 정보를 제거한다.)


<%@ page language ="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>


<% session.invalidate(); %>                         // 세션 정보 제거


<script>

alert("로그아웃 되었습니다.");

location.href="logout.jsp";                                    // 로그아웃 페이지로 이동

</script>


 

 

(추가) 세션 설명및 예제.

 

Session : Cookie에서도 그렇듯 상태유지를 위한 특별한 기법있다. 상태유지는 다른 페이지로 이동하더라도 그전 페이지의 정보가 유지되어아 하는것을 말한다.

Cookie는 client의 하드웨어를 이용하여 정보를 저장하였다가 사용함으로서 페이지가 이동하더라도 상태가 유지되는 기술인데, PC방같이 여러사람이 PC를 공유하는 경우 정보가 유출될수 있는 단점과 저장할수있는 데이터도 1.2MB로 한계가 있다.

이러한 단점을 극복하기 위해 Session을 사용한다.

Session의 장점

 

1)JSP(server)에만 접근 가능하므로 보안유지에 강력하다.

2)저장할수 있는 데이터에 한계가 없다.

Session은  web browser당 하나씩만 발급된다.

 

■ Session객체가 제공하는 메소드

1)

리턴값 java.lang.Object

메소드 getAttribute(java.lang.String name) :

세션에 바인딩된 객체중 name에 해당되는 객체 값을 가져온다.없을겨우에는 null을 반환

반환값은 Object형 이므로 반드시 형변환을 하여 사용한다.

2)

리턴값 java.util.Enumeration

메소드 getAttributeNames() :

세션에 바인딩된 모든 객체들의 이름을 Enumeration형으로 되돌려 준다.

서블릿 2.1과 이전 API들의 getValueNames메소드 대신 이것을 사용한다.

3)

리턴값 long

메소드 getCreationTime() :

세션이 만들어진 시간을 반환한다. 반환값은 long형이며 이값은 GMT 시간으로 1970.1.1

자정을 기준으로 단위의 값을 반환한다.

4)

리턴값 java.lang.String

메소드 getId() :

해당 세션을 가리키는 고유 id값을 String 형으로 변환한다.

5)

리턴값 long

메소드 getLastAccessedTime() :

해당 세션이 client가 마지막으로 request를 보낸 시간을 long형으로 반환한다.

반환값은 long형이며 이값은 GMT시간으로 1970.1.1 자정을 기준으로 한 밀리second

단위의 값을 되돌려 준다.

6)

리턴값 int

메소드 getMaxInactiveInterval() :

사용자가 다음 요청을 보낼때까지 세션을 유지하는 최대시간(초 단위)을 반환한다.

7)

리턴값 boolean

메소드 isNew() :

해당 세션이 처음 생성되었으면 true값을 반환하고 이전에 생성이 된 세션이라면 false

를 반환한다.

8)

리턴값 void

메소드 removeAttribute(java.lang.Strng name) :

지정된 이름에 해당하는 객체를 이 세션에서 제거한다. 서블릿 2.1과 이전 API들의

removeValue 메소드 대신 이것을 사용한다.

9)

리턴값 void

메소드 setAttribute(java.lang.String name,java.lang.Object value) :

지정된 이름을 사용하여 이 세션에 객체를 바인딩 시킨다.이전의 putValue메소드 대신 이것

을 사용해야 한다.

10)

리턴값 void

메소드 setMaxInactiveInterval(int interval) :

사용자가 다음 요청을 보낼때 까지 세션을 유지하는 최대시간(초단위)을 설정한다.

이 시간을 넘기면 서블릿 엔진은 세션을 종료한다.

11)

리턴값 void

메소드 Invalidate() :

해당 세션을 없애고 세션에 속해있는 값들을 없앤다.

 

 

■ session에  저장된 값을 얻기 위해서는 session 의 getAttribute 메소드를 사용.

session객체 안에 지정한 name에 해당속성이 없으면 null값을 되돌린다. 반환값이 Object형이기 때문에 반드시

형변환(casting)을 해야 한다.

형식 : Object getAttribute(String anme);

ex1) String ls_test="세션에 저장된 데이터";

     session.setAttribute("Testing",ls_test);

ex2) Object lobj_getdata=session.getAttribute("Testing");

       String ls_getdata=(String)lobj_getdata;

에문)

file 이름 : getAttribute.jsp

<%@ page contentType="text;charset=euc-kr"%>

<html>

<body>

<center><h3>[ 세션 값을 얻어오는 예제 ]</h3></center>

<hr>

얻어온 값은 다음과 같다.

<hr>

<%

Object lobj_getdata=session.getAttribute("Testing");

String ls_getdata=(String)lobj_getdata;

 

int li_primitive=(Integer)session.getAttribute("Mydata");

 

out.println(" 설정된 세션값 [1] : "+ls_getdata+"<br><br>");/*

String ls_test="세션에 저장된 데이터";

session.setAttribute("Testing",ls_test);//"Testing"을 키로 문자열을 저장.result=>세션에 저장된 데이터

*/

out.println(" 설정된 세션값 [2] : "+li_primitive+"<hr>");

/*session.setAttribute("Mydata",10);//"Mydata"를 키로 정수를 저장.

result=> 10*/

%>

</body>

</html>

 

 

SESSION 정보얻기

 

getId() 메소드 : 세션 ID를 되돌리는 메소드로서 해당 세션을 가리키는 고유 ID값을 String형으로 변환한다.

 

getCreationTime() 메소드 : getCreation 메소드는 세션이 만들어진 시간을 반환.웹브라우저를 띄울때 마다

                                      세션이 생성되므로 그때의 시간을 되돌린다.

 

getLastAccessedTime() 메소드 : 이미 띄운 웹브라우저에서 다른 페이지로 이동했다가 돌아오는 경우

                                             사이트를 떠날 당시 시간을 얻고 싶을때 사용한다.

                                             getLastAccessedTime메소드는

                                             해당 세션이 client가 마지막으로 request를 보낸 시간을 long형으로

                                             반환한다.

 

isNew() 메소드 : 해당 세션이 처음 생성되었다면 true값을 반환하고 이전에 생성되었다면

                         false값을 반환하는 메소드

                         웹브라우저를 새로 띄워서 사이트에 접속하면 true 다른 페이지로 갔다가 해당 페이지로

                         돌아왔을 경우는 false를 리턴한다.

 

getMaxInactiveInterval() 메소드 : 세션의 유효시간 은 사용자의 마지막 요청(request)이 있은 후부터

                                              tomcat 홈의 conf 폴더의 web.xml파일에 저장되어있다.

                                              기본적으로 30분이다. 유효시간 단위는 분이다.

                                 web.xml : <session-config>

                                              <session-timeout>30</session-timeout>

                                              </session-config>

예제)

file 이름 : infoSession.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"  pageEncoding="EUC-KR"%>
<%@ page import="java.util.*" %>
<html>
<body>
<center><h3> 세션  예제  </h3></center>

<%
//고유한 세션 객체의 ID를 되돌려준다.
String id_str=session.getId();

//세션에 마지막으로 엑세스한 시간을 되돌려준다.
long lasttime=session.getLastAccessedTime();

//세션이 생성된 시간을 되돌려 준다.
long createdtime=session.getCreationTime();

//세션에 마지막으로 엑세스한 시간에서 세션이  생성된 시간을 빼면
//웹사이트에 머문시간이 계산된다.
long time_used=(lasttime-createdtime)/60000;

//세션의 유효시간 얻어오기
int inactive=session.getMaxInactiveInterval()/60;

//세션이 새로 만들어졌는지 알려 준다.
boolean b_new=session.isNew();
%>

[1] 세션 ID는 [<%=session.getId()%>] 입니다.<br>
[2] 당신의 웹사이트에 머문 시간은 <%=time_used%> 입니다.<br>
[3] 세션의 유효시간은 <%=inactive%> 분입니다.<br>
[4] 세션이 새로 만들어 졌나요?<br>
<%
if(b_new)
 out.println(" 새로운 세션 생성."); 
else
 out.println("  새로운 세션 생성하지 않음");
%>
<hr>
</body>
</html>

결과------------------------>

 세션 예제

[1] 세션 ID는 [53C42CA9973718029CD17B48F3A9756F] 입니다.

[2] 당신의 웹사이트에 머문 시간은 0 입니다.
[3] 세션의 유효시간은 30 분입니다.
[4] 세션이 새로 만들어 졌나요?
새로운 세션 생성하지 않음

 

 

■ getAttributeNames 메소드 : 세션에 들어있는 모든 키 값을 가져오기 위해서 사용되는 메소드이다.

   이 키 값들은 Enumeration형으로 반환된다.

형식 : Enumeration getAttributeNames()

 

Enumeration형은 데이터를 뽑아올때 유용한 인터페이스 Enumeration객체는 java.util 팩키지에 정의 되어있으므로

java.util.Enumeration을 import 시켜야 한다.

 

setAttribute 메소드에 의해 설정된 세션값들이 getAttributeNames에 의해 Enumeration형으로 반환된다.

Enumeration 객체는 여러 아이템들을 저장하는 컬렉션 클래스의 일종이며,Enumeration객체에서 아이템을 뽑아

오기 위해서는 hasMoreElements와 nextElement 메소드를 적절히 사용해야 한다.

 

메소드

hasMoreElements : Enumeration 객체에 뽑아올 데이터가 있는지를 검사하여 있다면 true를 더 이상

                          데이터가 존재하지 않는다면 false를 리턴

nextElement : 다음 아이템이 존재한다는 전재하에 아이템을 하나씩 뽑아오는 역할을 한다.

                  nextElement 메소드도 getAttribute 메소드처럼 Object 형으로 값을 반환해 주므로 이를

                  형변환(casting)해야 한다.

 

※ 션에 저장된 여러개의 값들을 얻어오기 위한 방법

ex)

Enumeration enum_app=session.getAttributeNames();

while(enum_app.hasMoreElements()){

ls_name=enum_app.nextElement().toString();

ls_value=session.getAttribute(ls_name).toString();

 

out.println("얻어온 세션 이름 : "+ls_name+"<br>");

out.println("얻어온 세션의 값 : "+ls_value+"<br>");

}

예제)

file 이름 : getAttributeNames.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="java.util.Enumeration" %>   
<html>
<body>
<center><h3>[ 설정된 세션값을 얻어오는 예제 - 2 ]</h3></center>

getAttributeNames() 메소드를 사용하여 세션값을 얻어오는 예제입니다.
<hr>
<%
String ls_validate="현재 페이지는 물론 이전 페이지에서 설정된 세션값들도 나타납니다.";
session.setAttribute("Validate",ls_validate);

String ls_name="";
String ls_value="";

Enumeration enum_app=session.getAttributeNames();
int i=0;
while(enum_app.hasMoreElements()){
 i++;
 ls_name=enum_app.nextElement().toString();
 ls_value=session.getAttribute(ls_name).toString();
 
 out.println("얻어온 세션이름 : ["+ i +"]"+ls_name+"<br>");
 out.println("얻어온 세션 값 : ["+ i +"]"+ls_value+"<br>");
}
%>
</body>
</html>

결과------------------------>

[ 설정된 세션값을 얻어오는 예제 - 2 ]

getAttributeNames() 메소드를 사용하여 세션값을 얻어오는 예제입니다.

얻어온 세션이름 : [1]Validate
얻어온 세션 값 : [1]현재 페이지는 물론 이전 페이지에서 설정된 세션값들도 나타납니다.

  session에 값을 저장하기 위해서는 session 객체의 setAttribute메소드를 사용.

   형식 : session.setAttribute(String name,Object value);

           name은 String형으로 들어가고,value는 Object형 이어야만 한다.

   ex) String ls_test="세션에 저장된 데이터";

        session.setAttribute("Testing",ls_test);

예문)

file 이름 setAttribute.jsp

<%@ page contentType="text/html;charset=euc-kr"%>

<%

String ls_test="세션에 저장된 데이터";

session.setAttribute("Testing",ls_test);//"Testing"을 키로 문자열을 저장.

session.setAttribute("Mydata",10);//"Mydata"를 키로 정수를 저장.

%>

<html>

<body>

<center><h3>[ session값을 설정하는 예제 ]</h3></center>

<hr>

세션을 설정하는 페이지

<hr>

</body>

</html>

 

 

 

'knowledge' 카테고리의 다른 글

Encoding  (0) 2014.04.08
http / https  (0) 2014.04.08
XML  (0) 2014.04.08
LocalStorage (Web Storage)  (0) 2014.04.08
AJAX  (0) 2014.04.08

XML 이란? XML의 개요


1. XML의 출현배경


 

특징 

설명 

 SGML

(1986)

서술적 마크업

전자출판용

복잡한 규칙(500 page스펙)

전문가 필요 

- SGML 문서를 분석하기 위한 파서(문서의 문법적 해석을 위한 도구) 개발의 어려움

- 이에 따른 응용 프로그램 개발의 어려움

- 공공기관 문서관리, 출판 업체에 한정되어 사용

- 사용의 어려움으로 대중화되지 못함 

 HTML

(1991)

순차적 마크업

한정된 Tag

대중화에 성공

인터넷의 핵심 기술 

- 한정된 Tag로 구조적 정보 표현 불가

- 교환 포맷으로 부적합(문서의 내용과 표현이 섞임)

- 문서 수정의 어려움

- 비효율적인 정보 검색 

 XML
(1998)

26page의 비교적 간단한 스펙

추가된 Tag로 인하여

용량의 증가 

- 구조적 정보의 표현
- 교환 포맷으로 적합
- 쉬운 사용법

- 효율적인 정보 검색 


XML이 탄생하게 된 배경



2. XML의 정의


- eXtensible Markup Language의 약자로 확장성 있는 마크업 언어


- W3C가 인간과 응용프로그램간, 혹은 응용프로그램 간에 정보를 쉽게 교환하기 위해 만든 데이터 교환 포맷


- eXtensible : 데이터를 설명하는 태그(Tag)를 사용자 마음대로 정의할 수 있음, 다른 마크업 언어 생성 가능



3. XML 언어의 특징


표준성 : W3C에서 표준화를 주도하며, SGML과 HTML의 한계를 극복하기 위하여 만든 표준 인터넷 언어


분리성 : 표현과 내용이 완전히 분리, XML 문서는 데이터의 구조와 내용을 기술하고 있으며, 스타일 시트를 이용하여 다양한 방식으로 데이터 표현


단순성, 호환성 : XML 문서는 텍스트로 되어 있기 때문에 하드웨어나 소프트웨어에 의존하지 않고 읽어 들일 수 있다는 장점을 가지고 있으며, 이러한 특징은 다양한 시스템간에 상호 작용을 중계하는데 XML을 이용될 수 있게 한다.


수용성 : HTML과 같이 현재 인터넷에서 가장 많이 사용되는 HTTP 프로토콜을 이용하여 전달


확장성 : XML은 확장성 있는 태그를 사용하고 있음으로써, 어떤 분야의 데이터도 정확하게 기술


정보검색의 정확성 : XML 문서의 경우 의미가 있는 태그를 사용함으로써 원하는 데이터를 쉽게 찾음




4. XML 언어의 장점


- 텍스트로 이루어져 있기 때문에 어떤 시스템이든지 간에 읽어 들임


- 문서 자체가 정보와 구조를 포함하고 있기 때문에 사람이 읽어도 그 안의 데이터의 의미를 쉽게 이해


- HTML처럼 쉬우면서도, SGML의 강력한 기능을 가짐. 즉, 사용하기 쉬우면서 강력하게 데이터를 정의하고 데이터를 표현


- 확장성 있는 마크업 언어로 데이터를 정의하는 태그를 마음대로 정의


- 새로운 마크업 언어를 만듦



5. XML의 응용분야


* XML Web Service 


XML의 응용 분야는 무궁무진하고 데이터 교환이 필요한 모든 분야에 활용될 수 있다. 주된 응용 분야로 XML은 원격 프로시저 호출(Remote Procedure Calls)에도 사용 가능하다. RPC는 하나의 컴퓨터에 있는 객체가 분산 컴퓨팅 작업을 하기 위해서 다른 시스템에 있는 객체 호출을 허용하는 프로토콜로 RPC 호출에는 XML과 HTTP가 이용된다.


* XML 응용 예시 > A 여행사가 날씨정보를 보여주기 위해 현재의 사이트를 수정하고자 한다.


- 기상청이 데이터 교환 포맷인 XML로 데이터를 공개한다. 실제 웹 서비스의 내용을 XML 기반 언어인 WSDL로 작성하고 문서 교환시 SOAP 프로토콜을 사용하며 이런 서비스를 제공한다는 것을 UDDI에 등록한다. 이를 XML 웹 서비스라고 한다.


이렇게 제공해주는 Open API들을 잘 활용하면, 유용한 정보를 얻을 수 있다.


--





'knowledge' 카테고리의 다른 글

http / https  (0) 2014.04.08
COOKIE , Session  (0) 2014.04.08
LocalStorage (Web Storage)  (0) 2014.04.08
AJAX  (0) 2014.04.08
JSON  (0) 2014.04.08

HTML5의 WebStorage API 중 하나인 Local Storage


개요

HTML5에서는 클라이언트에 데이터를 저장하는 2개의 객체를 제공한다.
하나의 세션 단위로 데이터를 저장하는 SessionStorage 와,
만료 기간이 없는 LocalStorage 가 있다.

두 가지 모두 key/value 쌍으로 저장하며, 사용 방법은 거의 비슷하다.
여기서는 Local Strorage 에 대해 자세히 살펴보려고 한다.


간단 사용법

사용법은 정말 간단하다.
전역으로 할당되어 있는 localStorage의 메서드를 사용하며, 데이터는 key/value 쌍으로 구성된다.

아래와 같이 setItem() 과 getItem()으로 값을 저장하거나 가져올 수 있다.

    localStorage.setItem('foo', 'bar');
    localStorage.getItem('foo'); //--> "bar"

주의할 것은 key와 value 모두 string 으로 저장된다는 것이다.
예를 들어, 아래 코드에서처럼 원시 타입으로 저장해도, 가져오는 값의 타입은 string 이다.

    var n = 1;
    localStorage.setItem('n', n);
    typeof localStorage.getItem('n'); //--> "string"

Object 타입을 추가할 경우, toString()을 호출한 형태로 저장된다.

    var obj = {};
    var obj2 = {
      toString: function () {
        return "I'am obj2";
      }
    };

    localStorage.setItem('obj', obj);
    localStorage.setItem('obj2', obj2);

    localStorage.getItem('obj'); //--> "[object Object]"
    localStorage.getItem('obj2'); //--> "I'm obj2"


setItem()과 getItem()은 대부분의 경우 에러 없이 암묵적으로 수행된다.
  - setItem()은 기존 아이템이 있을 경우 덮어쓴다.
  - getItem()으로 값을 찾지 못했다면, 에러를 발생하지 않고 null을 리턴한다.


값은 [ ]  형태로도 설정하거나 가져올 수도 있다.

    localStorage['foo'] = 'bar';
    localStorage['foo']; //--> "bar"


그 외에도 몇 가지 유용한 메서드와 속성이 있다.

    localStorage.removeItem(키); // 해당 키를 지운다.
    localStorage.clear(); // 모두 지운다.

    localStorage.length; // 저장된 키의 개수
    localStorage.key(값); // 값으로 키를 찾는다.


이벤트 처리

로컬 스토리지의 내용이 변경되었을 때엔 'storage' 이벤트가 발생한다.
setItem()이 호출되었을 때가 아닌, 실제로 값이 변경되었을 때 발생한다.

window 객체에 이벤트를 할당하는 방식으로 처리할 수 있다.

    window.addEventListener('storage', function (evt) {
      // evt = 이벤트 객체
    }, false);


evt 객체에는 다음 속성이 존재한다.

    key
    oldValue
    newValue
    url

데이터가 removeItem()에 의해 삭제되었다면, newValue 값엔 null이 할당되고,
clear()로 모든 데이터가 삭제되었다면, key에는 공백 문자열('')이, value에는 각각 null이 할당된다.


주의:
대부분의 브라우저에서는 다른 윈도우에서 로컬 스토리지의 데이터를 변경했을 때 이벤트가 발생한다.
즉, 같은 창에 이벤트를 추가하고, localStroage의 값을 변경해도 이벤트가 발생하지 않는다.
아마도, 자신의 window에서는 변경된 상황을 알고 있을 것이라는 가정 때문인가 보다.



어떤 제한이 있나?

- 동일 근원 정책을 기준으로 동작한다.
  즉, 프로토콜, 호스트, 포트 중 어느 하나라도 다르면, 각각 별도의 공간에 데이터가 저장된다.
  (document.domain 을 설정하더라도 공유되지 않는다)

- 디바이스마다 다르지만, 대부분 Origin 당 약 5MB 정도를 저장할 수 있다.
  문자열만 저장할 수 있으며, 2바이트 캐릭터(UTF-16)으로 저장된다.
  5메가를 넘어설 경우, QUOTA_EXCEEDED_ERR 오류가 발생한다.
  추가 공간을 요구할 수 없다.

- Safari아 iOS Safari에서 Private Browsing 옵션을 켜는 경우에는 사용할 수 없다.
  Private Browsing 을 사용하는 경우,
    - getItem()에서는 항상 null을 리턴하고,
    - setItem()에서는 QUOTA_EXCEEDED_ERR 을 발생한다.
    - clear()를 호출할 때에는 아무 동작을 수행하지 않는다. 에러를 발생하지도 않는다.


어디에 저장되나?

로컬 스토리지 데이터는 물리적으로 저장된다.
크롬은 localStorage로 SQLite 를 사용하며, Mac OS 에서는 해당 파일을 아래 디렉토리에 저장한다.

    ~/Library/Application Support/Google/Chrome/Default/Local Storage

데이터 파일은 `프로토콜_도메인_인덱스.localstorage` 라는 이름의 파일로 저장된다.
예를 들어 ohgyun.com에서 생성한 로컬 스토리지라면, `http_ohgyun.com_0.localstorage`라는 파일로 저장된다.

페이지가 로드되기 전에, 브라우저는 물리적으로 저장되어 있는 데이터를 읽어 메모리에 올려둔다.

참고:
sqlite3 커맨드라인 툴로 직접 해당 파일을 조회할 수 있다.


언제까지 저장되나? 만료 기간은?

사용자가 직접 데이터를 삭제하기 전까지 영구적으로 보관된다.
만료 기간을 설정할 수 없다.


성능은 어떤가?

로컬 스토리지는 동기적으로 작동한다.
즉 로컬 스토리지에 값을 설정하거나 가져올 때에는 렌더링이 블락된다.
또한 로컬 스토리지는 File I/O를 발생하기 때문에 다른 작업에 비해 비용이 큰 편이다.
따라서, 빈번하게 많은 양의 데이터를 읽고 쓰거나, 1MB 이상의 큰 데이터를 쓰는 것은 피하는 것이 좋다.

참고:
'모바일 디바이스에서 로컬 스토리지가 브라우저의 캐시보다 빠르다'는 포스트가 있다.

위 포스트는 브라우저 캐시를 사용하는 것보다 로컬 스토리지에 저장해둔 것을 가져오는 게 더 빠르다는 내용이다.
25KB 크기의 스크립트를, 브라우저 캐시를 사용해 로드하는 것과,
로컬 스토리지에 저장해뒀다가 로드하는 것의 시간을 비교하는 방식으로 실험했다.
테스트 대상이었던 모든 모바일 기기에서 로컬 스토리지에서 불러오는 평균 속도가 더 빨랐다.

댓글 중에, 성능 분야에서 유명한 스티브 사우더스가 남긴 글이 있다.
로컬 스토리지는 페이지가 로드되기 전 데이터를 메모리에 올리는데, 실험에서는 이 시간을 고려하지 않았다는 의견이다.
다음 실험 결과를 지켜볼만 하다.


안전한가?

일단은 쿠키와 비교했을 때, 클라이언트의 디바이스에 직접 저장되고
네트워크로는 전송되지 않기 때문에 네트워크 레벨에서는 안전하다고 볼 수 있다.
하지만 평문으로 저장하는 경우, 그 값이 그대로 노출되어 XSS 등의 공격으로부터 안전하지 않다.

고려대학교 정보보호대학원에서 작성한,
'안전한 HTML5 로컬스토리지 구현에 대한 연구'라는 이름의 논문이 있다.
(로그인 없이 다운로드 가능하다)

사용자로부터 받은 암호로 로컬 스토리지에 저장되는 데이터를 암호화한다는 아이디어다.
대칭키 방식으로 사용하며, 보안을 위해 도메인마다 랜덤하게 salt가 생성되도록 하는 방식이다.

암호화/복호화 비용이 꽤 클 것 같은데, 논문에서는 성능 차이가 거의 없다는 결론이다.
암호화할 레코드의 개수를 최대 10만 번까지 시도하며 걸린 시간의 평균값으로 비교를 했는데,
레코드의 크기에 대한 언급이 없고 특정 PC에서만의 결과라 신뢰하기엔 좀 조심스럽다.

아이디어는 괜찮은 것 같은데, 모바일에서의 성능이 궁금하기도 하고,
실제로 로컬 스토리지에 민감한 데이터를 저장하는 경우에는 어떤 게 있을지도 궁금하다.

일단은, 보안이 민감한 데이터는 평문으로 넣지 않는게 (당연하지만) 좋겠다.


로컬 스토리지를 활용한 라이브러리에는 어떤 게 있나?


로컬 스토리지를 활용해 스크립트를 캐싱하고 로딩하는 모듈이다.
Addy Osmani가 만든 거라 왠지 믿음이 간다. ㅎㅎ

간단한 사용법에 대해 정리한 포스트가 있다.




그 외 참고:
Session Storage

localStorage 와 사용법은 거의 동일하다.
단, 세션 범위 내, 즉, 새 탭이나 새 윈도우로 범위가 제한된다.
http://www.nczonline.net/blog/2009/07/21/introduction-to-sessionstorage/


-- 

값을 저장하는 저장소 중 localStorage를 사용하는 방법입니다.

session이나 cookie를 사용하는 방법처럼 localStorage를 사용하여 값을 저장 후 사용할 수 있습니다.


1. 아래는 ABC의 이름을 가진 localStorage에 "저장할값"이라는 값을 저장하는 코드입니다.

  var valueABC = "저장할값";

  window.localStorage.setItem("ABC",valueABC);


2. 아래는 localVal이라는 변수에 위에서 저장한 ABC의 이름을 가진 localStorage에 저장된 값을 불러와서 저장하는 

   코드입니다.

  var localVal = window.localStorage.getItem("ABC");





'knowledge' 카테고리의 다른 글

http / https  (0) 2014.04.08
COOKIE , Session  (0) 2014.04.08
XML  (0) 2014.04.08
AJAX  (0) 2014.04.08
JSON  (0) 2014.04.08

Ajax

 (Asynchronous Javascript and XML , 에이잭스)는 대화식 웹 애플리케이션의 제작을 위해 이용하는 웹 개발 기법.              


어떤 원리이고 흐름인가?







보통 웹사이트 들어갈 때 어떻게 들어가는가?

브라우저 위에 주소창에 URL을 쓰고 들어간다. 그러면 브라우저가 그 URL(서버)로 연결시켜준다.

서버에서 받아온 데이터들을 브라우저가 받아서 파싱해서 뿌려준다.


이게 보통 웹의 흐름이라면,


AJAX는 AJAX 자체가 브라우저라고 생각하면 된다. 

URL을 받고, AJAX 내부에서 XMLHttpRequest 통신을 해서 URL(서버)로 연결시켜준다.

서버에서 받아온 데이터들을 AJAX가 받는다.  (어떻게 뿌릴지는 여기서 직접 알아서 한다 ㅋㅋ)                


장점

  • 페이지 이동없이 고속으로 화면을 전환할 수 있다.
  • 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
  • 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.

단점

  • Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.
  • Http클라이언트의 기능이 한정되어 있다.
  • 페이지 이동없는 통신으로 인한 보안상의 문제
  • 지원하는 Charset이 한정되어 있다.
  • 스크립트로 작성되므로 Debugging이 용이하지 않다.
  • 요청을 남발하면 역으로 서버 부하가 늘 수 있음.
  • 동일-출처 정책으로 인해 다른 도메인과는 통신이 불가능하다.




* 순수 Ajax는 http://mainia.tistory.com/314 블로그 참조.



i. Ajax 기본 


1. 기본예제 


jQuery를 이용하면 간단 명료하게 작성 가능하다.


<script  src="http://code.jquery.com/jquery-latest.min.js"></script>


<script>

$(document).ready(function() {

     jQuery.ajax({

           type:"GET",

           url:"/test",

           dataType:"JSON", // 옵션이므로 JSON으로 받을게 아니면 안써도 됨

           success : function(data) {

                 // 통신이 성공적으로 이루어졌을 때 이 함수를 타게 된다.

                 // TODO

           },

           complete : function(data) {

                 // 통신이 실패했어도 완료가 되었을 때 이 함수를 타게 된다.

                 // TODO

           },

           error : function(xhr, status, error) {

                 alert("에러발생");

           }

     });

});

</script>


<script  src="http://code.jquery.com/jquery-latest.min.js"></script>

이렇게 쓰면 jQuery의 항상 최신 버전을 쓸 수 있다.



보통 complete을 쓸 지, success를 쓸 지는 상황에 따라 다르다.

둘 중 하나만 써야함. 그냥 설명하기 위해 2개 쓴 것임.

(반드시 둘 중 하나만 써야하는건 아니고, 둘다 쓰면 두 번 호출되기 때문에)




2. 값 받아오기


success를 통해 받아온 값을 alert 으로 띄운다거나,

HTML 코드에 추가해서 나타내거나 여러가지 방법으로 보여지도록 할 수 있다.


JSON으로 받는 법을 정리하겠다


JSON 객체는 요렇게 생긴 객체임. 


 {"name": "lioncat", "age": 14, "nickname": "qwerty"}


서버 단에서는, 

객체에 있는 값을 JSON 형태로 만들어주는 라이브러리들이 있으니

서버는 그 것을 사용해서 JSON으로 리턴 하면된다.


클라이언트에서도 JSON으로 받아야 하는데,

3번 예제처럼 dataType:"JSON" 부분을 써주면 JSON으로 받아진다.


success에서 받아온 객체인 data를 alert으로 띄워보면

[Object object] 라고 나올 것이다.


저것을 어떻게 보느냐???

-> each 함수 사용해야 된다.    (자세한 each 사용법은 검색 ㄱㄱ)


// success나 complete 안에서 사용


$.each(data, function() {

     alert(this["name"]);

     alert(this.age);

});


또는


$.each(data, function(index, entry) {

     alert(entry["name"]);

     alert(entry.age);

});



* 참고로 jQuery를 사용하지 않은 순수 AJAX를 통해 데이터를 받아왔을 때는 eval 함수를 써야한다. 

jQuery의 AJAX에서는 자체적으로 JSON Object로 변환 시켜준 것이기 때문에 each로 쓸 수 있지만,

순수 AJAX에서는 JSON 객체로 변환되지 않았기 때문이다.




ii. Ajax 메서드 


1. jquery Ajax 기본 메서드  

$.ajax( url [, settings ] );

예제 >

$.ajax({

  url: "http://fiddle.jshell.net/favicon.png",

          beforeSend: function( xhr ) {

            xhr.overrideMimeType( "text/plain; charset=x-user-defined" );

          }

    })

   .done(function( data ) {

      if ( console && console.log ) {

        console.log( "Sample of data:", data.slice( 0, 100 ) );

      }

});



2. jquery Ajax 부가 메서드

1) $.get(url [,data][,success][,dataType])               get 방식으로 ajax 를 수행함


2) $.post(url [,data][,success][,dataType])             post 방식으로 ajax 를 수행함


3) $.getJSON(url [,data][,success])                       get 방식으로 ajax 를 수행하여 json 데이터를 가져옴 (jsonp 사용가능)


4) $.getScript(url [,success])                                get 방식으로 ajax 를 수행하여 javascript 데이터를 가져옴


5) $(selector).load(url [,data][,complete])               ajax를 수행한 후에 선택자로 선택한 문서 객체 안에 응답 데이터를 넣음







3. jquery Ajax 보조 메서드

1) $.param( obj )                        객체의 내용을 요청 매개 변수 문자열로 만듬

접기

<script>
var params = { width:1680, height:1050 };
var str = jQuery.param( params );
</script>
결과 >>> width=1680&height=1050

접기


2) .serialize()                            입력 양식의 내용을 요청 매개 변수 문자열로 만듬

접기

<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<br>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<br>
<input type="checkbox" name="check" value="check1" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
<label for="ch2">check2</label>
<br>
<input type="radio" name="radio" value="radio1" checked="checked" id="r1">
<label for="r1">radio1</label>
<input type="radio" name="radio" value="radio2" id="r2">
<label for="r2">radio2</label>
</form>


<script>
function showValues() {
var str = $( "form" ).serialize();
$( "#results" ).text( str );
}
$( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
$( "select" ).on( "change", showValues );
showValues();
</script>


결과 >>> single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1

접기


3) .serializeArray()                            입력 양식의 내용을 객체로 만듬

접기

<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<br>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<br>
<input type="checkbox" name="check" value="check1" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
<label for="ch2">check2</label>
<br>
<input type="radio" name="radio" value="radio1" checked="checked" id="r1">
<label for="r1">radio1</label>
<input type="radio" name="radio" value="radio2" id="r2">
<label for="r2">radio2</label>
</form>


<script>
function showValues() {
var fields = $( ":input" ).serializeArray();
$( "#results" ).empty();
jQuery.each( fields, function( i, field ) {
$( "#results" ).append( field.value + " " );
});
}
$( ":checkbox, :radio" ).click( showValues );
$( "select" ).change( showValues );
showValues();
</script>


결과 >>> Single2 Multiple2 check2 radio1

접기




3. jquery Ajax 보조 메서드

1) $.param( obj )                        객체의 내용을 요청 매개 변수 문자열로 만듬

<script>
var params = { width:1680, height:1050 };
var str = jQuery.param( params );
</script>
결과 >>> width=1680&height=1050


2) .serialize()                            입력 양식의 내용을 요청 매개 변수 문자열로 만듬

<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<br>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<br>
<input type="checkbox" name="check" value="check1" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
<label for="ch2">check2</label>
<br>
<input type="radio" name="radio" value="radio1" checked="checked" id="r1">
<label for="r1">radio1</label>
<input type="radio" name="radio" value="radio2" id="r2">
<label for="r2">radio2</label>
</form>


<script>
function showValues() {
var str = $( "form" ).serialize();
$( "#results" ).text( str );
}
$( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
$( "select" ).on( "change", showValues );
showValues();
</script>

결과 >>> single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1



3) .serializeArray()                            입력 양식의 내용을 객체로 만듬


<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<br>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<br>
<input type="checkbox" name="check" value="check1" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
<label for="ch2">check2</label>
<br>
<input type="radio" name="radio" value="radio1" checked="checked" id="r1">
<label for="r1">radio1</label>
<input type="radio" name="radio" value="radio2" id="r2">
<label for="r2">radio2</label>
</form>


<script>
function showValues() {
var fields = $( ":input" ).serializeArray();
$( "#results" ).empty();
jQuery.each( fields, function( i, field ) {
$( "#results" ).append( field.value + " " );
});
}
$( ":checkbox, :radio" ).click( showValues );
$( "select" ).change( showValues );
showValues();
</script>


결과 >>> Single2 Multiple2 check2 radio1





4. jquery Ajax 이벤트 연결 메서드

  - spinner 구현 등에 사용 ( 아래 순서대로 이벤트 실행 )

  - 만약 $.ajax() 나 $.ajaxSetup() 의 global 옵션값이 false 이면 이벤트 핸들러는 작동하지 않음

1) .ajaxStart( handler )                        ajax 요청을 시작할 때 실행

2) .ajaxSend( handler )                       ajax 요청을 보낼 때 실행

3) .ajaxSuccess( handler )                  ajax 요청이 성공할 때 실행

4) .ajaxError( handler )                        ajax 요청이 실패할 때 실행

5) .ajaxComplete( handler )                  ajax 요청이 완료될 때 실행

6) .ajaxStop( handler )                        ajax 요청을 중지할 때 실행


예제)

$( document ).ajaxComplete(function( event, xhr, settings ) {
if ( settings.url === "ajax/test.html" ) {
$( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
xhr.responseHTML );
}
});



추가) jQuery AJAX ajaxSetup() Method



Method
Description
AJAX 요청을 수행합니다.
AJAX 요청을 완료했을 때 수행할 함수를 명시합니다.
AJAX 요청을 완료했으나 오류가 있을때 수행할 함수를 명시합니다.
AJAX 요청을 보냈을 때 수행할 함수를 명시합니다.
AJAX 요청하기 위해 디폴트 값을 설정합니다.
ajaxStart()
가장 첫 AJAX 요청을 시작할 때 수행할 함수를 명시합니다.
ajaxStop()
모든 AJAX 요청이 완료됐을 때 수행할 함수를 명시합니다.
ajax.Success()
모든 AJA 요청이 성공했을 때 수행할 함수를 명시합니다.
$.get()
AJAX HTTP GET Request를 사용하여 서버로부터 데이터를 로드합니다.
$.getJSON()
AJAX HTTP GET Request를 사용하여 서버로부터 JSON-ecoded 데이터를 로드합니다.
$.getScript()
AJAX HTTP GET Request를 사용하여 서버로부터 Javascript를 로드하거나 수행합니다.
load()
서버로부터 데이터를 로드하고 리턴된 HTML을 선택된 엘리먼트에 넣습니다.
$.param()
배열이나 오브젝트를 한 줄로 표현할 수 있게 합니다. (쉬운 예로, URL query 형식)
$.post()
AJAX HTTP POST Request를 사용하여 서버로부터 데이터를 로드합니다.
serialize()
한 세트의 form 엘리먼트를 string 형태로 submit할 때, 이를 인코딩합니다.
serializeArray()
한 세트의 form 엘리먼트를 name과 value 형태의 배열로 submit할 때, 이를 인코딩합니다.



Method
Description
data()
선택된 엘리먼트에 데이터를 추가하거나, 선택된 엘리먼트로부터 데이터를 얻습니다.
each()
selector와 일치하는 각각의 엘리먼트에 수행할 함수를 명시합니다.
get()
selector와 일치하는 DOM 엘리먼트를 얻습니다.
index()
선택된 엘리먼트 중에서 특정 엘리먼트의 index 값을 찾을 수 있습니다.
$.noConflict()
자신이 원하는 특정 이름으로 $표시를 대체할 수 있습니다.
removeData()
data()메서드를 사용하여 이전에 설정된 데이터를 삭제합니다.
size()
selector와 일치하는 DOM 엘리먼트 개수를 리턴합니다.
toArray()



[정의 및 사용법]
ajax() 메소드는 AJAX(비동기식 HTTP) 요청을 수행할 때 사용합니다.

모든 jQuery AJAX 메소드는 ajax() 메소드를 사용합니다. 이 메소드는 다른 메소드로는 할 수 없는 요청들을 수행할 때 사용합니다.

[문법]

$.ajax( { name:value, name:value, ... } )

파라메터는 한 개 이상의 name/value 쌍으로 표시합니다.

아래는 사용가능한 name/value입니다.

Name
Value/Description
async
Boolean 값
요청이 비동기식으로 처리되는지 여부를 나타냄
기본값은 true
beforeSend(xhr)
요청을 보내기 전에 실행되는 함수
cache
Boolean 값
브라우저가 요청된 페이지를 캐싱해야 하는지 여부를 나타냄
기본값은 true
complete(xhr,status)
요청이 완료됐을 때 실행되는 함수
contentType
서버로 보내지는 데이터의 content-type
기본값은 “application/x-www-form-urlencoded"
context
data
서버로 보내지는 데이터를 의미
dataFilter(data,type)
XMLHttpRequest의 응답 데이터를 처리할 때 사용되는 함수
dataType
서버 응답으로 받는 데이터 타입
error(xhr,status,error)
요청이 실패했을 때 실행되는 함수
global
Boolean 값
요청에 대해 전역 AJAX 이벤트를 실행할 지 여부를 명시함
기본값은 true
ifModified
Boolean 값
마지막 요청 이후에 응답이 변경됐을 때만 처리하는지를 명시
기본값은 false
jsonp
jsonp 요청에서 callback 함수를 오버라이딩하는 문자열
jsonpCallback
jsonp 요청에서 callback 함수 이름을 나타냄
password
HTTP 접근 인증(access authentication) 요청에 사용할 password를 나타냄
processData
Boolean 값
요청으로 보낸 데이터를 query string 형태로 변환할지 여부를 나타냄
기본값은 true
scriptCharset
요청할 때의 charset을 나타냄
success(result,status,xhr)
요청이 성공했을 때 수행되는 함수
timeout
요청에 대해 로컬의 응답제한시간(timeout)을 밀리초로 나타냄
traditional
Boolean 값
파라미터 직렬화를 기존 방식으로 사용할 지 여부를 나타냄
type
요청 type(GET 혹은 POST)을 명시함
url
요청을 보낼 URL을 나타냄
기본값은 현재페이지
username
HTTP 접근 인증(access authentication) 요청에 사용할 username을 나타냄
xhr
XMLHttpRequest 오브젝트를 생성할 때 사용하는 함수









********************************** Ajax 예제 모음. **********************************





예제> Get 방식 // 버튼 클릭시 네이버 실시간 검색어 가져오는 Ajax

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> jquery </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function (){
$('button').bind('click',function(){ 
$.ajax({
            type : 'GET',
            dataType: 'jsonp',
            crossDomain:'true',
            url : 'http://www.kimonolabs.com/api/6iwlddes?apikey=6deedcaf13e2252ad32d62eec4a5e754',
            success : function(data, textStatus, jqXHR){
            		$.each(data.results.collection1, function(index, value){
            			$('#dataAdd').append("<li>"+data.results.collection1[index].property1.text+"</li>");
            			//alert("adf")
            		})
            		 
                  }
            })
      });
});

</script>
</head>

<body>

<button>download</button>
<ul id="dataAdd">
</ul>




$.ajax({
    type : "POST" //"POST", "GET"
    , async : true //true, false
    , url : "Inquiry.jsp" //Request URL
    , dataType : "html" //전송받을 데이터의 타입
                               //"xml", "html", "script", "json" 등 지정 가능
                               //미지정시 자동 판단
    , timeout : 30000 //제한시간 지정
    , cache : false  //true, false
    , data : $("#inputForm").serialize() //서버에 보낼 파라메터
                     //form에 serialize() 실행시 a=b&c=d 형태로 생성되며 한글은 UTF-8 방식으로 인코딩
                     //"a=b&c=d" 문자열로 직접 입력 가능
                     //{a:b, c:d} json 형식 입력 가능
    , contentType: "application/x-www-form-urlencoded; charset=UTF-8"
    , error : function(request, status, error) {
     //통신 에러 발생시 처리
     alert("code : " + request.status + "\r\nmessage : " + request.reponseText);
    }
    , success : function(response, status, request) {
     //통신 성공시 처리
     $('#resultDIV').append(response);   
    }
    , beforeSend: function() {
     //통신을 시작할때 처리
     $('#ajax_indicator').show().fadeIn('fast');
    }
    , complete: function() {
     //통신이 완료된 후 처리
     $('#ajax_indicator').fadeOut();
    }
});

<!-- 결과를 저장할 영역 -->
<div id="resultDIV">
  <!-- Ajax 로딩시 이미지 출력 영역 -->
  <div id="ajax_indicator" style="display:none">
   <p style="text-align:center; padding:16px 0 0 0; left:50%; top:50%; position:absolute;"><img src="/Report/images/ajax-loader.gif" /></p>
  </div>
</div>

참고 : Ajax 호출
$(document).ready(function(){       //도큐먼트 로딩 완료시
$("#inputForm").submit(function(){ //form에서 submit시
$("#searchBtn").click(function(){   //button 클릭시
function search(){                        //일반 함수로 정의하여 버튼 등에 onclick="search()"로 연결
$(function(){                                //스크립트 로드시




'knowledge' 카테고리의 다른 글

http / https  (0) 2014.04.08
COOKIE , Session  (0) 2014.04.08
XML  (0) 2014.04.08
LocalStorage (Web Storage)  (0) 2014.04.08
JSON  (0) 2014.04.08

+ Recent posts