JS | 제이쿼리 차이점, AJAX 알아보기

정라잇 | 최근 수정일 : 22년 09월 02일

개요

제이쿼리는 자바스크립트의 오픈소스 라이브러리입니다. 순정 자바스크립트에 비해 코드를 쉽게 작성할 수 있도록 도와주는 역할을 하고 있습니다.

제이쿼리가 인기있는 이유

// 순정 자바스크립트
document.getElementById('ID');

// 제이쿼리
$('#ID');

위의 두 코드는 같은 기능을 수행합니다. 순정 자바스크립트는 DOM 형식을 가지고 있기 때문에 전체적인 단어를 추가해야 하지만, 제이쿼리는 짧게 설명이 가능합니다.

제이쿼리의 한계

이처럼 필요한 기능을 쉽게 사용할 수 있도록 만들어져 있지만 순정 자바스크립트만큼 자유롭게 사용하는 것은 제한이 있습니다.

제이쿼리는 라이브러리를 불러와야 하는 구조적 한계를 가지고 있습니다. 이는 순정 자바스크립트에 비해 처리해야 할 양이 늘어나기 때문에 속도가 느려질 수 있습니다.

일반적으로 순정 자바스크립트를 먼저 배우고 나서 제이쿼리를 사용하는 것을 추천하고 있습니다. 제이쿼리는 결국 도구일 뿐입니다. 자바스크립트를 먼저 배우고 나서 제이쿼리를 배우면 금방 배울 수 있지만, 제이쿼리부터 배운 경우는 순정 자바스크립트에 대한 어려움을 느낄 수 있게 됩니다.

이벤트 처리방법

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

btn 아이디 값을 가진 태그를 클릭하는 이벤트입니다.

애니메이션 효과

$('#block').fadeOut();
$('#block').fadeIn('normal');

AJAX

$.ajax({
  type: 'get | post',
  url: '주소 | ex)/test/home ',
  data: {
    // 보낼 데이터
  },
  dataType: 'json | html | xml | script | text',
  done: function(response) {
    // 성공시 호출
  },
  fail: function(error) {
    // 실패시 호출
  },
  always: function(response) {
    // 무조건 호출
  }
});

response 는 호출을 마치면 나오는 값입니다. error 는 에러가 났을 때 출력할 값입니다.

function test(){
    var param = {
            test : "안녕하세요"
    }
    $.ajax({
        type : "POST",
        url : "/test/home",
        dataType : 'json',
        contentType : 'application/json',
        data : param,
        success : successCall,
        error   : errorCall
    });
}

라이브러리 : jqGrid

다운로드 : [링크]

제이큐그리드(jqGrid) 는 데이터를 표시하는데 특화된 라이브러리입니다.