Ajax, xml, parser, json(JavaScript Object Notation), MVC pattern

jQuery

- javascript library (자주 사용하는 기능을 미리 정의해두고 필요할 때 사용)

library와 프레임워크의 차이는 생명주기를 관리해야하는가이다. library는 사용자가 생성, 사용, 삭제를 해주어야 하는 반면 프레임워크는 프레임워크가 관리한다.

- 존 레식이 개발하여 배포한다.(jQuery.com에서 1.x와 2.x버전을 배포하고 있다.)

- 적게쓰고 많은 일을 하기 위해서

- Angluarjs(Google), Node.js, prototype, Mobile(QueryMobile, senchatouch) 등

- selector를 사용하여 특정 HTML tag에 접근하여 사용한다.(selector는 CSS에 기반한다. id, class, tag, name selector)

- 기능으로는 Ajax, CSS, DOM, Event, Effect등을 쉽게 할 수 있다.

- plugin의 지원

- jQuery Object가 기본

 

 

사용법

기본기능이 아니기 때문에 프로포절이 되지 않는다. 따라서 이전에 플러그인을 다운받아야 한다.

- javascript 파일을 다운 받는 것

- CDN의 방식

 

1. 사용할 x.js를 다운받고 필요한 곳에서 <script type="text/javascript" src="다운 받은 js의 경로"></script>

2. script안에서 jQuery Object를 사용한다.

<script type="text/javascript" src="다운 받은 js의 경로">

// 두 가지 사용 방식

// 1. HTML의 모든 요소가 로딩된 다음 사용하는 방법(이미지가 모두 로딩된 다음 실행(이미지는 사이즈가 크기 때문에 제일 마지막에 로딩된다.))

// [참고] $ : jQuery Object

$(window).load(function(){

// 코드 작성

});

 

// 2. DON 요소가 로딩된 후 사용하는 방법(필요한 tag가 모두 로딩 된 후 사용된다. 이미지 로딩 전)

$(document).ready(function(){

// 코드 작성

});

// ready 방식을 주로 사용한다. 따라서 $(document).ready를 $(function(){});로 줄여 쓸 수 있다.

</script>

 

비압축(언컴프레스드) 버전 - tab, 들여쓰기, 내어쓰기 등의 정리가 잘 되어 있다. 따라서 코드 읽을 때 유리하다.

압축(컴프레스트) 버전 - 정리 없이 한 줄로 제공된다. 그만큼 다운이 빨리되어 서비스 할 때 유리하다. 파일 뒤에 min이 붙는다.

 

src에 들어가는 파일은 사용자에게 다운이 된다. 성능을 향상시키기 위해 압축버전을 사용한다.

 

 

http://jquery.com/ 에서 download

jQuery 1.x

 

The jQuery 1.x line had major changes as of jQuery 1.9.0. We strongly recommend that you also use the jQuery Migrate plugin if you are upgrading from pre-1.9 versions of jQuery or need to use plugins that haven't yet been updated. Read the jQuery 1.9 Upgrade Guide and the jQuery 1.9 release blog post for more information.

 

Download the compressed, production jQuery 1.11.1

 

Download the uncompressed, development jQuery 1.11.1

 

다운다운

 

기본기능이 아니기때문에 프로퍼절을 사용하고 싶은 프로젝트에마다 설정해주어야 한다.

 

selector의 사용

- jQuery Object에서 해당 tag에 접근할 때 사용한다.

- ID selector : #id명

$("#id명")

<input type="text" name="id" id="id"/>

name

폼태그에서 접근

back-end로 값 전송

id

CSS에서 디자인 적용

- class selector : .class명

-name selector : [속성명='값']

$("[type = 'text']")

- 특정태그의 하위태그 selector

div>p

 

 

event handling

- 사용자의 동작을 감지하여 해당 동작이 일어나면 정해진 코드를 실행하는 것이다.

$("selector").event함수(function(){

// 이벤트 발생시 처리할 코드

});

 

*키다운

 

<script>

var xTriggered = 0;

$( "#target" ).keydown(function( event ) {  // event : window.event객체 여기서 key code를 얻을 수 있다.

  if ( event.which == 13 ) {  // key code를 얻을 때 사용하는 것 : event.which or keycode => 눌린 키의 키 값을 얻을 수 있다.

   event.preventDefault();

  }

  xTriggered++;

  var msg = "Handler for .keydown() called " + xTriggered + " time(s).";

  $.print( msg, "html" );

  $.print( event );

});

 

$( "#other" ).click(function() {

  $( "#target" ).keydown();

});

</script>

 

한정적인 공간에 많은 데이터를 ㅈ공할때 탭씀

 

*CSS 사용

- 속성 하나 줄 때

$(selector).css("속성명", "값");

- 미리 만들어 놓은 css등록

$(selector).addClass("css이름");  // 중복적용 안됨 지우고 해야함

- 적용된 css 삭제

$(selector).removeClass("css이름");

 

 

 

*Ajax(Asynchronus JavaScript & XML)

 

그전에 동기식웹 알고자가

동기식 웹

- 모든 화면을 다시 그린다.(서버로 요청을 보내고 응답 받아서 화면을 그리는 시간의 차이로 화면 깜빡임이 발생한다.)

- 일부분의 디자인이 변경되어도 모든 화면을 새로 그리기 때문에 네트워크의 비용이 발생하게 된다.

- 서버의 응답이 도착할 때까지 아무런 동작도 할 수 없다.

 

그럼 이제 다시 에이젝스로 넘어가서

- 비동기로 처리되는 javascript와 XML

- 화면의 일부분만 변경해야 할 때 많이 사용한다.

- 데이터만 전달받고(네트워크의 비용이 적게 발생한다.) 화면은 클라이언트에서 그려준다.(클라이언트의 브라우저 자원을 더 많이 사용한다. 이를 RIA라고 한다. Rich Internet Application)

javascript : 모든 브아우저에서 동작한다. 보안에 취약하다.(소스보기에서 다 보임) 유지보수의 편리성

flex : flash player(AVM)가 설치된 브라우저에서 동작한다. (사파리 지원 안됨. 지원안되는 브라우저도 있지만 주된 이유는 유지보수가 어렵기 때문에 비주류의 길로 빠짐 ㅠㅠ ) 보안에 안전하다. 유지보수 어려움

- 데이터 보내고 데이터 받고 클라이언트가 그린다. 원래는 요청하고 처리하고 응답

 

 

 

* JQuery에서 사용

$.ajax({

url:"호출한 jsp이름";;

type:"요청방식:';

async:"비동기여부";

cache:"캐시사용여부";

data:"Query String"

dataType:"서버에서 처리된 데이터 형식"

error:"function(xhr){에러발생시 제공할 코드},

success:function(매개변수:처리된 데이터가 들어온다.){성공시 제공할 코드},

}); callBack함수

 

 

* XML(eX tensible Markup Language)

- 확장 가능한 markup language 마크업언어는 시작태그와 마침태그로 이루어진 언어의 형태

확장 가능하다란 말은 즉 태그를 개발자 마음대로 사용할 수 있다. 태그의 확장성

- DTD(Document Type Definition)를 개발자가 정의하여 사용하는 태그의 순서, 반복여부등을 설정할 수 있다.

- 데이터를 저장하고 사용하기 위한 언어

html은 보여주기 위한 언어이며 XML은 데이터를 표현하기 위한 언어이다.

 

저장 : 이 기종의 언어에서 데이터를 전달하기 위하여

ex)

c	java
int	int
2byte보장(os에 따라 다름) 2~4	4byte
데이터 처리(속도 빠룸)	화면 구성
언어가 다르므로 서로 이해할 수 없음 따라서 XML을 이용하여 중개자 역할을 함 필요한만큼만 잘라쓴다.(parsing/ 도구 parser(sas, dom))

 

 

parser : xml에서 node사이에 있는 값을 잘라서 사용하는 도구

SAX(Simple Api XML)

- sun사 주축(표준)

DOM(Document Object Model)

- IBM 주축(비표준)

 

xml을 style sheet(xsl, xslt) 사용하여 html처럼 보여지도록 만들 수 있다.

- DTD보다 더 많은 제어를 할 수 있다. XML Schema도 제공된다.

 

 

* 작성 규칙

1. 가장 첫줄에 선언부 작성

<?xml version="1.0" encoding="UTF-8" standalone="yes|no"?>

standalone : DTD와 함께 사용되는지 여부

yes - DTD없이 혼자 동작하는 xml : well-formed문서 적격문서

no - DTD와 함께 동작하는 xml : valid 문서 유효문서

 

2. 최상위 부모노드는 하나

<root>

 

3. 자식노드는 안나와도 되고 반복되어도 된다.

 

4. 닫힘노드는 반드시 나와야 한다.

 

 

 

parser

 

success:function(data){  // 이때 data는 xml object이다.

// * 노드가 하나인 경우 : node명을 직접 기술하여 해당 노드에 바로 접근하여 데이터를 얻는다.

$(data).find("찾을 node명").text();  // 여러개일경우 전부 가져온다

// * 노드가 여려개인 경우 : 반복되는 노드중 상위 노드를 얻는다.

$(data).find("반복시킬 노드").each(functiion(){

* 값을 얻을 node를 정의하여 값 얻기

$(this).find("자식노드").text();

});

// 따로따로 잘라내고 싶으면 반복을 하는 함수 each를 사용해야 한다.

}

 

 

 

 

* json(JavaScript Object Notation)

- 이름 : 값의 형태로 데이터를 만들어 사용하는 것

- 이름으로 값을 얻어서 사용할 수 있다.

- json 배열, json Object 두 가지로 사용할 수 있다.

Javascipt에서는 eval()함수로 객체를 만들어 사용한다.

 

작성법

json object {"이름":"값","이름":"값"}

json array 

[

{"이름":"값", "이름":"값",....}

]

 

1. json 객체의 처리

success:function(json){

// json[이름]

json["name"]; // 진기

}

 

2. json 배열의 처리

success:function(json_arr){

// 여기서 $는 json 오브젝트

$.each(배열명, 배열방의 값을 처리하는 핸들러(핸들러는 펑션이다)(인덱스, 방의 값을 저장할 변수){

});

 

$.each(배열명, function(index, 변수){

 

});

 

}

 

 

 

*MVC pattern

model view controller로 분리하여 코딩하는 것

- model2방식의 개발

 

참고 model1방식의 개발 : jsp가 모든 일을 다 가지고 서비스하도록 만드는 개발방식

- 화면 디자인 + DB 처리 + 업무처리

단점 : 코드의 복잡도 증가(유지보수가 어렵다)

장점 : 파일관리의 편리성, 값처리의 편리성, 에러잡기가 편하다. ====> 생산성 증대

 

- 유리보수의 편의성 증대

- 파일 갯수의 증가

- 값전달, 에러처리가 어렵다

model : db처리 : 일반 클래스 (xxxDAO)

view : 화면 디자인 : jsp

controller : 업무처리 : 일반 클래스(서블릿의 기능 포함)

 

* Servlet : 모든 요청 받기, 키에 따른 Action의 선택, 이동방식 또는 페이지를 받아서 이동(jsp, html)

* xxxAction : parameter처리(유효성 검증). sqlinjaction, xss 등 취약점에 해당하는 문자의 처리. 업무처리 클래스 사용, 이동할 페이지의 설정, 이동 방식의 설정(forward, redirect), 처리 데이터를 저장(request.setAttribute, session.setAttribute 등)

* xxxService : 업무 처리, DAO의 클래스 사용

* xxxDAO : DB처리

* jsp : xxxAction에서 처리된 결과를 받아서 화면 디자인을 하여 응답한다.

 

노트 그림필기 정리!

 

흐름

- 업무없이 이동만 할 때

클라이언트 (요청)-> 서블릿 -> Action -> 서블릿 -> jsp (응답) -> 클라이언트

- 업무를 사용하여 이동

클라이언트 (요청)-> 서블릿 -> Action -> xxxService -> Action -> 서블릿 -> jsp (응답)-> 클라이언트

- DBMS 사용

클라이언트 (요청)-> 서블릿 -> Action -> xxxService -> DAO -> xxxService -> Action -> 서블릿 -> jsp (응답)-> 클라이언트

 

 

 

실습

http://www.encar.com/index.html -> index.do 로 고고하는거 볼 수 있음

 

<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>

 

도메인만 치고서도 해당 페이지로 갈 수 있는 이유. www.encar.com만 쳐도 http://www.encar.com/index.html 이리로 이동할 수 있는 이유

 

 

 

  <!-- 해당 에러 코드가 발생했을때 에러 코드가 아닌 에러 처리 페이지로 이동 -->

  <error-page>

  <error-code>403</error-code>

  <location></location>

  </error-page>

  <error-page>

  <error-code>404</error-code>

  <location></location>

  </error-page>

  <error-page>

  <error-code>500</error-code>

  <location></location>

 

  </error-page>

웹.xml