제이쿼리 선택자와 AJAX

1. 제이쿼리(JQuery)

제이쿼리란 화면의 동적 기능을 자바스크립트보다 좀 더 쉽고 편리하게 개발할 수 있게 해주는 자바스크립트 기반 라이브러리이다.

제이쿼리는 여러가지 효과나 이벤트를 간단한 함수 호출만으로 빠르게 개발할 수 있어 유용하다.

 

주요 특징

- CSS 선택자를 사용해 각 HTML 태그에 접근해서 작업하므로 명료하면서도 읽기 쉬운형태로 표현가능

- 메서드 체인 방식으로 수행하므로 여러 개의 동작(기능)이 한 줄로 나타내어 코드의 불필요한 반복을 피할 수 있다.

- 풍부한 플러그인 제공 (이미 개발된 많은 플러그인)

- 크로스 브라우징을 제공하므로 브라우저 종류에 상관 없이 동일하게 기능을 수행한다.

 

제이쿼리를 사용하는 방법은 라이브러리를 다운받거나 CDN코드를 추가해줘서 사용할 수 있다.

ex)

<script   src="https://code.jquery.com/jquery-2.2.4.js"   integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="   crossorigin="anonymous"></script>

 

 

 

2. 선택자(Selector)

제이쿼리는 HTML 객체를 탐색하는 방법으로 CSS 선택자를 이용한다.

선택자 종류	선택자 표현 방법	설명
All selector	$("*")	모든 객체(DOM)을 선택한다.
ID selector	$("#id")	해당되는 id를 가지는 객체를 선택한다.
Element selector	$("elementName")	해당 이름(name)을 가지는 객체를 선택
Class selector	$(".className")	css중 해당되는 클래스를 가진 객체 선택
Multiple selector	$("selector1,  selector2, ....selectorN")	해당되는 선택자를 가지는 모든 객체 선택

https://tigre911.tistory.com/107#comment6838063

JQuery Method(제이쿼리의 메서드 종류)

 

 

3. 제이쿼리 AJAX

 

클라이언트측에서의 작업과는 상관 없이 비동기적으로 서버와 작업을 수행할 때 ajax 기능을 사용한다.

페이지 이동없이 데이터 처리가 가능하며, 서버의 처리를 기다리지 않고 비동기 요청이 가능한 특징이 있다.

 

제이쿼리에서 Ajax를 이용하려면 $.ajax라고 명명한 후 속성에 대한 값을 설정해야 한다.

속성	설명
type	통신 타입을 설정한다(post , get 방식)
url	요청할 url을 설정한다.
async	비동기식으로 처리할지의 여부를 설정 (false인 경우 동기식으로 처리)
data	서버에 요청할 때 보낼 매개변수를 설정한다.
dataType	응답 받을 데이터 타입을 설정한다(XML, TEXT, HTML, JSON 등)
success	요청 및 응답에 성공했을 때 처리 구문을 설정한다.
error	요청 및 응답에 실패했을 때 처리 구문을 설정한다.
complete	모든 작업을 마친 후 처리 구문을 설정한다.

 

$.ajax({
	type : "post 또는 get",
    anync : "true 일때 비동기 or false",
    url : "요청할 url",
    data : {서버로 전송할 데이터},
    success : {
    	// 정상 요청, 응답 처리
    },
    error : function(){
    	// 오류 발생시 처리
    },
    complete : function(data, textStatus){
    	// 작업 완료 후 처리
    }
 });

 

data 속성은 Ajax 요청 시 서버로 전송할 데이터를 설정합니다. 일반적으로 객체(Object)나 문자열(String) 형태로 전달됩니다. 

dataType 속성은 Ajax 요청으로 받을 응답 데이터 타입을 설정합니다. 일반적으로 text, json, xml 등의 값을 가집니다.
서버에서 반환되는 데이터의 타입을 명시하는 것으로, jQuery에서는 이를 기반으로 데이터를 자동으로 파싱합니다.

 

가장 일반적으로 사용되는 dataType 값은 다음과 같습니다.

- text : 일반적인 텍스트를 응답으로 받을 경우 사용합니다.
- json : JSON 형식의 데이터를 응답으로 받을 경우 사용합니다.
- xml : XML 형식의 데이터를 응답으로 받을 경우 사용합니다.
- html : HTML 형식의 데이터를 응답으로 받을 경우 사용합니다.

dataType 속성을 지정하지 않을 경우, jQuery는 서버로부터 반환된 MIME 타입을 추론하여 적절한 데이터 형식으로 자동으로 파싱합니다. 
그러나 명시적으로 dataType 값을 지정하면, 서버에서 반환된 데이터의 형식을 정확하게 알고 해당 데이터 형식으로 파싱됩니다.

다음은 jQuery를 사용한 간단한 Ajax 예시입니다.

 

$.ajax({
  url: 'example.com',
  method: 'POST',
  data: {name: 'John', age: 30},
  dataType: 'json',
  success: function(response) {
    console.log(response);
  },
  error: function(xhr, status, error) {
    console.log(error);
  }
});

위 예시에서는 '$.ajax()' 함수를 사용하여 Ajax 요청을 보내고 있습니다. url 속성으로 요청을 보낼 URL을 지정하고, method 속성으로 요청 방식(HTTP 메서드)을 지정하고 있습니다. 또한 data 속성으로 요청 데이터를 객체 형태로 전송하고 있습니다.

dataType 속성으로 응답 데이터의 형식을 JSON으로 지정하고 있으며, success 콜백 함수에서는 서버에서 반환된 응답 데이터를 인자로 받아 출력하고 있습니다.

만약 요청에 실패하면 error 콜백 함수에서 에러 상태와 에러 메시지를 출력하도록 처리되어 있습니다.

 

* 콜백 함수

다른 함수의 인자로 전달되어 실행되는 함수를 의미한다.

즉, 어떤 함수를 호출할 때 해당함수의 인자로 다른 함수를 전달하면, 전달된 함수가 특정 조건이 되었을때 호출되는것.

보통 비동기적인 작업을 수행할 때 콜백함수를 사용한다.

Ajax 요청을 보내서 응답이 오면 처리해야할 코드를 콜백함수로 전달할 수 있다.

 

<ex>

function greeting(name, callback) {
  console.log('Hello, ' + name);
  callback();
}

function sayBye() {
  console.log('Goodbye!');
}

greeting('Alice', sayBye);

위의 예시에서 greeting() 함수는 name인자로 전달된 이름에 'Hello, '를 붙여 출력하고, 두번째 인자로 전달된 'callback' 함수를 호출한다.

 

sayBye() 함수는 단순한 출력함수이다.

 

greeting() 함수를 호출할 때 'sayBye' 함수를 두 번째 인자로 전달하면 greeting() 함수 내부에서 sayBye()함수가 호출된다. 따라서 출력결과는 다음과 같다.

Hello, Alice
Goodbye!