jQuery.map( array, function )
입력된 배열을 가공하여 새로운 배열로 다시 반환시키는 메서드.
jQuery.merge(arr1,arr2)
두 개의 배열을 병합(merge)하는 메서드.
jQuery.trim(str)
입력값으로 받은 STR문자열의 앞과 뒤의 공백을 제거.
jQuery.parseJSON( json ) (중요)
지정한 json문자열을 JavaScript 객체인 JSON객체로 변환한다. 만약 JSON형식에 위배되는 문자열인 경우에는 예외가 발생된다.
서버에서 json 형태로 응답시 문자로 변환돼서 전달된다. 이럴때 해당 데이터를 사용하기 위해 JSON으로 변환해야하는데 이런 상황에 사용된다.
< 아래는 자바스크립트에서 제동하는 json 변환 메소드이다. >
- jquery 메서드와 같은 동작을 하니 아무거나 사용해도 된다.
- JSON.parse(json문자열);
- JSON.stringify(JSON객체); : json을 문자열로 반환
each(function)
get([index])
- 선택된 요소에서 지정된 index값에 해당되는 DOM요소를 반환한다. 만약 index값이 생략되면 모든 DOM 요소를 반환하고 index값에 음수값을 지정하면 요소 맨 뒤에서 시작된다.
- .eq([index])와 기능은 동일하나 반환되는 값이 다르다. eq()는 jquery객체를 반환하고, get()은 DOM요소를 반환한다.
따라서 get()을 통한 일반적인 jquery 메서드체인이 불가능하다.
jQuery Event
사용자 및 시스템에서 발생하는 이벤드들을 jQuery 메서드를 사용하여 처리할 수 있다.
jQuery 기본 Event
ready(function)
- HTML 문서의 모든 DOM요소들이 완벽하게 사용할 준비가 되면 호출되어 FUNCTION 함수가 실행된다.
- 따라서 다른 이벤트 핸들러를 추가하거나 jQuery 코드가 위치하기에 최적의 장소가 된다.
on(events[,selector][,data],function)
이벤트 등록
- 미래에 동적으로 추가될 요소에도 사용이 가능하다는 특징이 있다.
- jQuery객체는 기본적으로 여러 요소에 한번에 메소드 적용이 가능함.
one(events[,selector][,data],function)
이벤트 등록
- 일회용임
- 한번 쓰고 제거
trigger(eventType[,extraParameters])
이벤트 강제 발생시키기
off(events[,selector][,function])
이벤트 제거
jQuery 폼 Event
jQuery 마우스 Event
mouseEnter
mouseOver
- 차이점 : enter는 자식에 들어갈때도 추가로 발생
mouseLeave : 자식을 떠날 때에도 추가로 발생
jQuery Effects
웹 페이니에서 에니메이션과 같은 시각적 효과를 보여주기 위하여 제공되는 메서드들이다.
jQuery에서 제공하는 기본적인 에니메이션 효과뿐만 아니라 사용자에 ㅡ이해서 만든 커스텀 에니메이션도 구현이 가능하다.
jQuery Effects
jQuery Ajax
JavaScript의 Ajax기술을 jQuery 프레임워크에서 사용하는 방법에 관하여 학습한다.
jQuery 프레임워크도 내부적으로는 JavaScript 기술을 사용한다.
1. Ajax 개요
- Asynchronous Javascript and XML 의 약자로서 비동시 방식으로 처리하는 새로운 웹 통신 방식을 의미한다.
2. 기존 방식의 웹 처리
기존 방식의 웹 어플리케이션 특징
HTML 태그의 submit을 사용하여 서버에 값을 전달하게 된다.
이때 사용되는 페이지는 다음 그림과 같이 서버와 통신하고,
response값이 넘어오기 전까지는 무한 대기상태로 존재한다.
3. Ajax 처리 방식
Ajax를 이용하면 자바스크립트를 통해서 서버와 통신할 수 있으며, 중요한 것은 서버와 통신하는 중에도 다른 작업을 수행할 수 있다는 것이다.
따라서 Ajax를 사용하면 페이지 하나로 페이지 이동 없이 값을 보내고 받아올 수 있으며 서버와 통신하는 중에도 다른 일을 수행할 수 있다. 이것을 비동기 처리라고 한다.
Ajax를 이용하여 할 수 있는 것 정리 (비동기 처리)
- 자바스크립트를 이용하여 서버와 통신
- 서버와 통신 중에 다른 작업 수행 가능
- 페이지 이동 없이 값을 보내고 받을 수 있음.
ajax 이용시 xmp, text, json 등을 받아올 수 있다.
XMLHttpRequest라는 비동기 처리를 가능하게 해주는 자바스크립트 객체가 있다.
jQuery를 이용하면 더 간편하게 사용이 가능하다.
다음은 XMLHttpRequest 객체의 주요 프로퍼티(멤버변수)와 메소드이다.
jQuery.ajax( url [,settings]) 가장 많이 쓰는 구문
status 상태번호 저장 404:페이지없음 500:서버오류 200:정상처리
403 -> 브라우저에서 post요청했는데 servlet에서 doPost메서드가 없다면 해당 오류코드가 발생할 수 있음.
.jQuery.ajax( url[,settings] )
주의사항 닫는 괄호들 주석으로 가독성있게 표시하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery HTML Template</title>
</head>
<body>
<button id="a">ajax요청</button>
<div id="result"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#a").on("click",getData);
});
function getData(){
$.ajax(
{
type: "get",
url:"sample01_text.jsp",
dataType: "text", //응답받을 값 타입
success: function(data, status, xhr){
//data:
//status
//xhr :
console.log("success : ", data);
console.log("xhr", xhr.status);
$("#result").text(data);
},
error: function(xhr, status, e){
console.log("error", e);
console.log("xhr", xhr.status);
$("#result").text("데이터를 가져올 수 없습니다.");
}
}
)
}
</script>
</body>
</html>