JQuery 문법과 Ajax 옵션

March 1st, 2021





JQuery 기본 문법 및 Ajax



사실 제이쿼리를 공부하고 싶었던 마음은 없었다. 문제는 내가 현재 공부하고 있는 책인 코드로 배우는 스프링 부트 웹 프로젝트는 프론트엔드로 제이쿼리를 채택하고 있기 때문에 기본적인 문법을 모르면 화면 구성에 대해 공부할 때 이해하기가 힘들다. 그래서 앞으로 이 책을 공부하면서 JQuery에 간단한 문법들을 기록하는 식으로 이 카테고리의 게시물을 써갈 예정이다.


먼저 가장 기본 적인 문법인

$(선택자).동작함수();

달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자이다. 선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다.

$() 함수

$() 함수는 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할을 한다.

$() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있다.

이러한 $() 함수를 통해 생성된 요소를 제이쿼리 객체(jQuery object)라고 한다.

제이쿼리는 이렇게 생성된 제이쿼리 객체의 메소드를 사용하여 여러 동작을 설정할 수 있다.


JQury 엘레멘트 선택자와 속성 선택자 참고 사이트


Ajax 문법(JQuery 기준)

ajax 옵션

  • type: GET 또는 POST 등을 지정
  • url: 대상 URL 지정
  • async: 동기, 비동기 지정(boolean)
  • data: 요청 매개변수 지정(object, string) 서버로 데이터를 전송할 때 사용한다.
  • success(data, status, xhr): ajax 성공 이벤트 리스터 지정(function, array)
  • error(xhr, status, error): ajax: 실패 시 이벤트 리스너 지정(function)
  • complete(xhr, status): ajax 완료 시 이벤트 리스너 지정(function)
  • cache: 요청 페이지의 캐시 여부, false 또는 true
  • datatype: 서버에서 받아올 데이터를 어떤 형태로 해석할 것인지. xml, json, html, script를 선택할 수 있다.



contenttype과 datatype 옵션에 대해 자세히 알려주는 답변이 하나 있다.

stack overflow

“contentType is the type of data you’re sending, so application/json; charset=utf-8 is a common one, as is application/x-www-form-urlencoded; charset=UTF-8, which is the default.”


contentType은 내가 보내는 데이터 타입이다. 보통 aplication/json; charset=utf-8로 쓰고 application/x-www-form-urlencoded; charset=UTF-8는 디폴트로 설정이 되어 있다. 파일 업로드를 위해서는 contentType 속성을 반드시 false로 지정하는데 파일 업로드는 ‘multipart/form-data’타입을 사용하기 위함이다.


“dataType is what you’re expecting back from the server: json, html, text, etc. jQuery will use this to figure out how to populate the success function’s parameter.”


dataType은 서버가 응답(response)할 때 보내주는 데이터의 타입이다. 이는 success funtion에 전달될 argument의 형태를 지정하는데 사용된다.

processData 관련하여, 일반적으로 서버에 전달되는 데이터는 query string 이라는 형태로 전달된다. (아래 빨간 부분)

ex) http://example.com/over/there?title=Main_page&action=raw

data 파라미터로 전달된 데이터를 jQuery 내부적으로 query string 으로 만드는데, 파일 전송의 경우 이를 하지 않아야 하고 이를 설정하는 것이 processData: false 이다.

ajax에 대해 좀 이야기 해보자.


ajax의 a는 asynchronous, 즉 비동기를 의미한다. 즉 ajax는 비동기 처리를 한다. success와 complete에 대해 좀 살펴보자면 Client에서 Server 단으로 요청하는 형식의 ajax에서는 언제 결과가 Client로 올지 확실할 수 없다.(비동기니까)

Client는 백날 Server의 응답을 기다릴 수 없기 때문에 Callbak 형식으로 Server로부터의 응답을 기다리게 된다. 즉 Server가 응답을 해주는 것이다.

이제 Client에서는 처리를 해주게 된다. 그때가 바로 success 함수이다. 바로 요청이 성공인 거이다.

실패일 경우 error Callback 함수가 호출되고

complete은 C/C++ 언어로 따지면 finally라고 이해하면 된다.

YoungKyonYou

Integration of Knowledge