제이쿼리란? 에이젝스란? 제이큐그리드란? JQuery / Ajax / Jqgrid

제이쿼리(jQuery)

제이쿼리는 오픈 소스 기반의 자바스크립트 라이브러리이다.

우리가 웹에서 여러가지 효과를 나타낼때 자바스크립트를 활용해 아주 어렵고 복잡하게 기능 구현 하는것을 제이쿼리는 아주 간단하게 구현하게 도와준다.

대표적으로 HTML문서탐색과 조작, 이벤트 처리, 에니메이션, Ajax등 자바스크립트에서 빈번하게 쓰이는 동작과 작업들을 바로 가져다 쓸 수 있게 해주고, 훨씬 간단하게 만들어준다.

즉, 필요한 기능을 쉽게 가져다 쓸 수 있도록 해주는 자바스크립트로 구성된 프로그램 집합으로 볼 수 있다.

폼의 유효성 검사, 드롭다운 메뉴 등 바로 응용하여 사용가능한 수천개의 다양한 플러그인을 지원한다. 

 

수많은 자바스크립트 라이브러리 중 제이쿼리가 특히 많이 사용되는 이유? 

1. 제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원된다

2. HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있다

3. 애니메이션 효과나 대화형 처리를 간단하게 적용

4. 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현가능 

5. 다양한 플러그인과 참고할 수 있는 문서가 많이 존재

6. 오픈 라이선스를 적용하여 누구나 자유롭게 사용할 수 있음 

주요기능 

1. HTML 문서 탐색 

Java script 를 더 쉽게 사용하기 위해

DOM형식의 Java script 코드는 길고 복잡하지만 Jquery는 간략하고 편하다.

e.g) ID호출시, JS : document.getElementById('ID);

      JQ: $('#ID);

JQuery를 이용하면 DOM의 내용을 쉽게 탐색하여 검색할 값에 접근이 쉽다. 

즉, jQuery의 위력은 DOM을 쿼리하고 (그래서 이름이 제이쿼리임)

잘 문서화된 API를 사용해 조작할 수 있다는데 있다.  

2. HTML문서 조작

실제 DOM조작시 수많은 기능을 가지고 있다. 

3. 이벤트 처리

$(function() { 내용 });

e.g) 

$('#zero').click(function() {});

$('#zero').mouseenter(function() {}); ...

// 파라미터 전달

$('#zero').on('click', { name: 'Zero' }, function(event) { alert(event.data.name); // Zero });

4. 애니메이션 

e.g) 

$('#zero').fadeOut();

$('#zero').fadeIn('normal'); $('#zero').fadeToggle(800, function() { alert('사사삭'); }); $('#zero').fadeTo(500, 0.5); // opacity를 0.5로 서서히 바꿉니다.

5. Ajax (asynchronous Javascript and XML) 

*Ajax가 제이쿼리 고유기능은 아니지만 제이쿼리에서 간단한 문법으로 에이젝스 사용가능.

비동기식으로 서버에 요청을 하여 페이지 전환 (새로고침) 없이도 새로운 데이터를 가지고 온다.

e.g.)

$.ajax({ url: '주소', type: 'get 또는 post', data: {

// 보낼 데이터 }, dataType: 'json, xml, script, text 또는 html', done: function(response) { // 성공 시 동작 }, fail: function(error) { // 실패 시 동작 }, always: function(response) { // 성공하든 실패하든 항상 할 동작 } });

에이젝스 AJAX 

Asynchronous JavaScript And XML 비동기식 자바스크립트와 확장 마크업 언어. 

Ajax는 새로고침 없이 다른페이지로 이동하거나 화면을 전환하고 데이터를 업데이트 하는 기술을 말한다. 웹에서 데이터 변경이 있어도 웹 페이지를 새로 읽지 않고도 새 컨텐츠와 데이터를 가져와 즉시 보여준다.

즉, 웹페이지의 즉각성을 확보하기 위해 자바스크립트, 웹브라우저, 웹서버와의 통신 기술 등을 혼합해서 사용하는 것을 말한다. 

예를 들면 폼 전송후 결과 바로 표시하기, 로그인 후 페이지 유지, 별점 평가, 페이지 새로 고침 없는 검색결과 페이지 로딩 등의 경우가 있다.

제이큐 그리드(jqGrid)

jqGrid는 jQuery라이브러리를 이용한 Grid Plugin.

jqGrid는 웹에서 테이블 형식의 데이터를 표시하고 조작을 위한 Ajax기반 자바스크립트 컨트롤러.

jqGrid는 기본적으로 jQuery-UI를 이용하기 때문에 원하는 테마를 만들어서 사용가능.

e.g)

jqGrid 내부에서 규정하고있는 형식을 맞추어 사용하면 그리드가 제공하는 페이징, 정렬과 같은기능을 직접 구현하는 대신 가져다 쓸 수 있다. 

* Option

우선 그리드를 그리기 위해서는 그리드를 그려줄 table이 필요하다. 선언한 테이블에 ID 값을 주고 스크립트에서는 그 ID 값에 그리드를 설정해준다. 그리드를 그리기 위한 설정 시 기본 옵션들의 규칙은 “name : value”의 형태이. 여기서 value 값은 단순한 값일 수도 있지만, 함수일 수도 있다. 그리드의 옵션 개수는 상당히 많지만 중요한 옵션 몇 가지를 소개한다.

• url : 데이터를 가지고 올 수 있는 주소를 입력 
• mtype : 요청방식을 설정. GET/POST
• datatype : 가지고 오는 데이터의 타입을 설정. 보통 xml, json, local 이렇게 세 가지를 자주 사용.
• colNames : 그리드 각각의 컬럼에 출력되는 이름. 
• colModel : 각 컬럼에 대한 상세 정보. 서버로부터 받아온 데이터를 매핑해서 출력.
• jsonReader/xmlReader : 데이터 타입이 json/xml일 경우 reader를 통해서 데이터를 어떻게 읽어드릴지 설정가능
• rowNum : 초기에 출력할 데이터의 개수를 설정
• pager : 그리드의 대표기능인 페이저를 설정. 그리드 테이블 밑에 div를 넣어주고 그 div의 id값을 준다
• multiselect : row마다 selectbox가 생김
• postData : 서버에 파라미터로 넘길 데이터를 설정. 배열의 형태로 설정 가능