jQuery 이벤트( on API 사용법 / late binding / 다중 바인딩 / 이벤트 제거 ) / 네트워크 통신( Ajax / JSON / jQuery Ajax )에 대해서 정리한다.
jQuery 이벤트
- javascript를 이용해서 직접 이벤트 프로그래밍을 하는 것과 jQuery를 이용했을 때
똑같은 기능을 하더라도 소스 코드의 양이 차이가 난다.
( jQuery를 이용하면 크로스 브라우징 이슈를 자동으로 해결 해주는 장점도 있다 )
on API 사용법
- .on( events [, selector ], [data], hadler(eventObject) ) 형식으로 사용한다.
( []가 되있는 인자는 생략 가능한 인자이다 )
* events: 등록하고자 하는 이벤트 타입을 지정( 예: "click" )
selector: 이벤트가 설치된 엘리먼트의 하위 엘리먼트를 이벤트 대상으로 필터링
data: 이벤트가 실행될 때 핸들러로 전달될 데이터를 설정
handler: 이벤트 핸들러 함수
( CSS를 클릭 했을때 on API를 이용해서 해당 태그의 이름을 console에 log를 남기게된다..
그리고 on API를 이용하면 밑에 나와있는 late binding 기능이 있어서
<script>가 해당 엘리먼트보다 위쪽에 위치하는데 정상적으로 실행이 되는걸 볼 수 있다... )
late binding
- late binding이라는 기능을 제공해서 아직 존재하지 않는 엘리먼트에도 이벤트 등록이 가능하다.
( 해당 객체 하위 엘리먼트에 대한 이벤트를 설정하면 아직 존재하지 않는 하위 엘리먼트라도 late binding 기능에
의해 사용이 가능해진다 )
다중 바인딩
- 다중 바인딩을 이용해서 여러개의 이벤트 타입을 동시에 등록 할 수 있다.
이벤트 제거
- .off() API를 이용해서 이벤트를 제거 할 수 있다.
- .off() 인자에 해당 이벤트의 이름만을 주게 되면 해당 이름으로 된 이벤트들은 모두 제거가 된다.
- 특정 핸들러에 대한 이벤트를 제거하려면 두번째 인자로 해당 핸들러를 적어주면 된다.
네트워크 통신
Ajax( Asynchronous JavaScript and XML )
- 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식
( 통신을 할때는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 된다 )
XMLHttpRequest
- XMLHttpRequest 객체를 이용해서 Ajax를 이용할 수 있다.
- 해당 서버와 통신을 하기위해서는 먼저 XMLHttpRequest.open('통신방식', '서버 리소스')를 이용한다.
( 통신방식에는 GET, POST 방식이 존재한다 )
* POST방식으로 Ajax를 사용해서 네트워크 통신을 할때는 send()에 인자로 해당 되는 데이터를 보내줘야 한다.
( setRequestHeader( "Content-Type" ,"application/x-www-form-urlencoded" )를 이용해서 데이터가 폼에서
전송이 되는것처럼 서버에서 인식하도록 해준다 )
- send()를 이용하면 open()에 지정한 통신방식과 서버 리소스의 위치로 통신을 하기 시작한다.
JSON( JavaScript Object Notation )
- JavaScript에서 객체를 만들 때 사용하는 표현식을 의미
- 서버와 웹브라우저가 서로 통신을 할 때 장점이 드러난다.
( php에서 javascript로 배열을 그대로 전달하거나 javascript에서 php로 배열을 그대로 전달 할 수 있다 )
- 각 언어마다 JSON화 시키는 API가 존재한다.
( php의 경우 json_encode(), json_decode()를 이용해서 데이터를 json화 시키거나 복호화 시킬수 있다 )
* 예를 들어서 JSON을 사용하지 않을때는 php에서 javascript로 배열을 전달하려면 하나의 문자열로 바꿔서 보내
그 부분을 javascript에서 split()을 이용해서 다시 배열로 나눠주는 방법 같은걸 이용해야 한다.
* JSON에 대한 더 자세한 내용은 http://www.json.org/json-ko.html
JSON API( javascript )
* JSON.parse() - 인자로 전달된 문자열을 자바스크립트의 객체로 변환한다.
* JSON.stringify() - 인자로 전달된 문자열을 JSON 형식의 문자열로 변환한다.
jQuery Ajax
- 크로스브라우징 문제를 jQuery가 알아서 해결해준다.
- jQuery.ajax( [settings ] )를 이용한 방식이 기본적인 통신 방법이다.
* settings 주요 옵션
data - 서버로 데이터를 전송할 때 사용하는 옵션
dataType - 서버측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정한다.
값으로 올 수 있는 것은 xml, json, script, html이다.
형식을 지정하지 않으면 jQuery가 알아서 판단한다.
success - 성공했을 때 호출할 콜백을 지정한다.
( Fuction( PlainObject data, String textStatus, jqXHR jqXHR ) )
type - 데이터를 전송하는 방법을 지정한다. ( get, post 사용 가능 )
* data 옵션을 이용해서 데이터를 보낼때 .serialize()를 이용해서
해당 엘리먼트 안에 설정 되있는 값을 문자열로 만들어줘 data를 쉽게 보낼 수 있다.
댓글