[Jquery]강의 4일차(삼성 SDS)

JSP 기반의 간단한 JSON REST Service 작성법.docx

Jquery Plug-in 사용 방법

http://medienfreunde.com/lab/innerfade/

맨 아래 zip을 다운 받는다.

압축을 푼면 js, css, image들이 있다.

js 소스를 web-inf 안에 넣어서 사용한다.

이 소스가 매우 간단하므로 분석을 하면 된다.

참고로 아래의 부분은 에니메이션에서 해당 위치에서 크기가 커지는 부분을 소스로 짠 부분이다.

유용할 수 있을 것 같다. (쓸일이 있을지 모르겠지만..)

$("img.han").animate({

left : "+=100"

},3000).animate({

top : "+=200"

},3000).animate({

width : $("img.han").width()*2,

height : $("img.han").height()*2,

top : "-=" + ($("img.han").height()/2),

left : "-=" + ($("img.han").width()/2),

},3000);

자 ! 이제 본격적인 4일차 교육이다.!!!

AJAX!!!!!

- 각 데이터 형식의 이점/단점

-web에서는 json을 주로 쓴다. xml은 비지니스 로직에서 사용 가능하다.

	CSV (comma Separated value)	XML	Json
SIze	↓	↑	-
가독성	↓	↑	↑
Schema	x	o	x
객체지향적특징	x	o	x
web 사용성	-	↓ Dom API를 사용해야함	↑

 - Json Lib 종류

Jackson Json(이게 가장 좋다)

Gson

Xstream

 - 첨부된 문서를 보면 설치 하면 좋은것들도 많다.

    크롬을 통한 개발 도구 test 를 만드는데 그 부분은 활용하면 좋을것 같다.

-XmlHttpRequst 객체는 AJAX의 동작 기본 이다.

---

1. $.ajax(options)

  - options : JS 객체

$.ajax({

   url : "list.jsp",

   type : "GET",

   data : { name : "오바마", tel : "..." } ,        //"name=obama&tel=aaaa" <--이렇게 문자를 직접 넣어도 됨

   success : function(data, status, xhr) {},

   error : function(xhr, status, error) {},

   complete : function(xhr, status) {},

   timeout : 5000

});

2. shorthand method 제공

 $.get(url, data, function(data) {  });

 $.get(url, function(data) {  });

 $.post(url, data, function(data) {  });

 $.post(url, function(data) {  });

 //크로스 도메인 문제 해결시에 사용(JSONP)

 $.getJSON(url, data, function(data) {  });

3. 보조 메서드

 가. $("form태그").serialize() 

    : form태그내의 모든 입력필드들의 name 속성을 이용해서

      파라미터 형식의 문자열을 생성함.

 나. $("form태그").serializeArray() 

    : form태그내의 모든 입력필드들의 name 속성을 이용해서

      파라미터 정보를 포함한 JS 배열 객체를 생성

 다. $.param(obj)

    : JS객체를 파라미터 형식의 문자열로 변환

  * 파라미터 형식의 문자열?   name=john&tel=010-222-3333

---

유지 보수가 쉽고 append 한꺼번에 한다고 하는데..

JQuery Templare Plugin 유용하다고 하는데 아직 안써봐서 모르겟다.