JQuery 제이쿼리, Ajax 개념 정리

 

 

 

 

* 제이쿼리 (JQuery) : 자바스크립트 라이브러리 언어 (함수 집합)

 

 

1. 제이쿼리 사용 방법

 

 

제이쿼리는 라이브러리 형태로 제공되어 직접 jquery.js 파일을 다운받아 경로에 추가하여 쓰거나

 

온라인에 제공하는 제이쿼리 라이브러리 파일을 네트워크 통신 통해 호출하여 사용

 

 

 

2. 선택자

 

HTML 요소 선택하여 불러와서 적용

 

 

- 직접 선택자

 

 

전체 선택자 : $("*")

 

아이디 선택자 : $("#id명")

 

클래스 선택자 : $(".class명")

 

요소 선택자 : $("요소명")

 

종속 선택자 : $("p.test") -> p 태그 요소의 class 값이 'test' 선택

 

$("p#student_1") -> p 태그 요소의 id 값이 'student_1' 선택

 

 

 

3. 이벤트 : 홈페이지에서 어떤 기능이 나타나는 동작

 

 

핸들러 : 이벤트 발생 시 호출되는 함수 

 

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

스크립트 코드

});

 

 

- button : 이벤트 대상

 

- click : 이벤트 종류

 

- function() : 이벤트 핸들러 함수

 

 

 

 

* Ajax (Asychronnouse Javascript and Xml) : 비동기 방식으로 데이터 전송, 요청

 

 

- 화면 전환없이 한번 호출하여 처리하고자 할때 사용하는 메서드 방법

 

- 비동기 방식이란 요청을 받았을 때 응답 상태와 상관없이 다음 동작 수행

 

(<-> 동기 방식은 요청 후 응답을 받아야 다음 동작 수행)

 

 

- 형태 

 

$.ajax({



url : "전송 페이지" (action url),

type : "전송 방식" (get or post),

data :  "전송 데이터",

dataType : "요청 데이터 타입" ("html", "xml","json","text" 등),

success: function(data){

전송 성공하면 실행 코드;

},,

error: function(){

전송 실패하면 실행 코드;

}



});

 

 

- Ajax 관련 메소드

 

load() : 외부 컨텐츠 호출

 

$.post() : 데이터를 서버에 HTTP POST 방식으로 전송 / 응답

 

$.get() : 데이터를 서버에 HTTP GET 방식으로 전송 / 응답

 

$.getJSON() : 데이터를 서버에 HTTP GET 방식으로 전송 / JSON 형태 응답

 

 

 

 

* Json (JavaScript Object Notation) : 자바스크립트 객체 표기법으로 데이터를 전달하는 표준 형식

 

 

- 속성 (key) , 값 (Value) 쌍으로 표기

 

- 형태 : {"key1": 값, "key2" : 값 ..... }