Ajax에 대한 설명은 저번 장에서 설명을 하였기에 넘어가겠다.
지금까지 jQuery에 대해 알아보았지만 단순하고 반복적인 코드를 간략하게 사용하게 해준다.
특히 이번에 볼 Ajax에서는 그것이 더욱 뚜렷하게 보일 것이다.
우선 우리가 사용하였던 Ajax 코드를 살펴보자.
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}else{
throw new Error();
}
xhr. onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 300){
document.getElementById('someContainer').innerHTML = xhr.responseText;
}
}
}
xhr.open('GET', 'test.jsp');
xhr.send('');
위의 코드는 크로스 브라우저를 위한 XHR 객체 생성과 응답처리가 정상적으로 처리되었을 때 'someContainer'에 처리 결과를 붙이게 된다. 이렇듯 매번 Ajax를 사용하기 위해서는 위의 반복적인 처리를 해줘야 한다. 아래의 코드는 jQuery를 이용한 예이다.한 눈에 보아도 많은 코드 양의 차이가 보인다. 이렇듯 간단히 활용할 수 있는 부분에 대해 상세히 알아보자. 간단한 jQuery 구문은 load()를 사용하여 쉽게 서버 측 자원에서 콘텐츠를 가져온다. load() 커맨드는 jQuery가 제공하는 가장 기본적인 Ajax 커맨드이면서 매우 유용하다.
$('#someContainer').load('test.jsp');
- load(url, parameters, callback) - URL과 선택적인 매개변수로 Ajax 요청을 전송한다. 콜백 함수는 요청이 완료되면 호출된다.
- 매개변수 - url: (String)요청이 전송되는 서버 측 자원의 URL
parameters: (Object)이 매개변수를 명시하면 요청은 POST 메소드를 사용하고, 생략하면 GET 메소드를 사용한다.
callback: (Function)응답 결과 데이터가 일치하는 엘리먼트로 로드된 이후에 호출되는 콜백함수 - 반환값 - 확장 집합
load() 커맨드로 데이터를 가져온 후 HTML 엘리먼트 콘텐츠로 설정하지 않고, 서버에서 가져온 데이터를 직접 다루기로
결정했다면 $.get()함수를 사용한다.
- $.get(url, parameters, callback) - 매개변수로 명시된 URL을 사용하여 서버에 대한 GET 요청을 전송한다.
- 매개변수 - url: (String)GET 메소드로 연결하는 서버 측 URL
parameters: (Object)이름과 값의 쌍으로 프로퍼티를 지닌 객체, 미리 구성 및 인코딩된 쿼리 문자열
callback: (Function)요청이 완료되면 호출되는 함수 - 반환값 - 확장 집합
$.get()함수의 간단한 예제를 살펴보자.(예제보기)GET 메서드를 요구하는 경우를 알아보았는데 POST메소드를 요구하는 경우의 문법은 아래와 같다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>$.get() Example</title>
<script type="text/javascript" src="script/jquery-1.2.1.js"></script>
<script type="text/javascript">
$(function(){
$('#testButton').click(function(){
$.get(
'reflectData.jsp',
{a:1, b:2, c:3},
function(data) { alert(data); }
);
});
});
</script>
</head>
<body>
<button type="button" id="testButton">Click me!</button>
</body>
</html>
- $.post(url, parameters, callback) - 매개변수로 명시된 URL을 사용하여 서버에 대한 POST 요청을 전송한다.
- 매개변수 - url: (String)POST 메소드로 연결하는 서버 측 URL
parameters: (Object)이름과 값의 쌍으로 프로퍼티를 지닌 객체, 미리 구성 및 인코딩된 쿼리 문자열
callback: (Function)요청이 완료되면 호출되는 함수 - 반환값 - 확장 집합
이처럼 jQuery가 제공하는 load() 커맨드와 GET이나 POST 메소드를 사용하는 다양한 Ajax 함수를 사용하여, 요청을 전송하는 방법과 요청 완료를 통보 받는 방법을 제어할 수 있다. 그러나 Ajax 요청을 전반적으로 제어해야 할 필요가 있을 때 jQuery는 다른 방법을 제시한다.Ajax 요청 직접 제어하기
jQuery는 $.ajax()라는 일반적인 함수를 이용해 Ajax 요청을 기본적인 부분부터 직접 설정하고 제어한다. 사실 깊숙이 들여다보면 Ajax 요청의 생성과 관련된 jQuery의 모든 함수와 커맨드는 결국 이 함수를 사용하여 요청을 전송한다.
- $.ajax(options) - 요청의 생성방법과 통보 받을 콜백을 제어하고자 전달된 options을 사용하여 Ajax 요청을 전송한다.
- 매개변수 - options: (Object)요청에 대한 매개변수를 정의하는 프로퍼티를 소유한 객체 인스턴스. 세부 사항은 아래 표를 참조하자.
- 반환값 - XHR 인스턴스
| 이름 | 타입 | 설명 |
| url | String | 요청 URL |
| type | String | 사용할 HTTP 메서드, 일반적으로 POST나 GET을 사용한다. |
| data | Object | 요청에 전달되는 프로퍼티를 가진 객체 |
| dataType | String | 응답의 결과로 반환되는 데이터의 종류를 식별하는 키워드. 필요하다면 이 값을 통해 데이터를 콜백 함수로 전달하기 전에 어떤 종류의 후처리가 발생할지 결정한다.
|
| timeout | Number | Ajax 요청의 제한 시간을 밀리초 단위로 설정한다. 제한 시간 안에 요청이 완료되지 않으면 요청을 취소하거나, error 콜백이 정의되어 있다면 호출된다. |
| global | Boolean | true나 false에 따라 전역 함수를 활성화하거나 비활성화한다. 전역 함수는 엘리먼트에 덧붙일 수 있으며 Ajax 호출 동안 다양한 위치나 조건에서 실행된다. |
| contentType | String | 요청에 명시되는 콘덴츠 타입. 생략하면 'application/x-www-form-urlencoded'가 기본으로 설정된다. |
| success | Function | 응답이 성공 상태 코드를 반환하면 호출되는 함수. 응답 본문은 이 함수의 첫 번째 매개변수로 전달되며, dataType 프로퍼티에 명시한 형태로 구성된다. 두번째 매개변수는 상태 값을 나타내는 문자열이며 이번 경우에는 항상 'success'다 |
| error | Function | 응답이 에러 상태 코드를 반환하면 호출되는 함수. 매개변수가 세 개 전달되는데, 각각 XHR 인스턴스, 상태 값이 항상 'error'인 메시지 문자열, 선택사항으로 XHR 인스턴스가 반환한 예외 객체이다. |
| complete | Function | 요청이 완료되면 호출되는 함수. 매개변수 두 개가 전달되는데, 각각 XHR 인스턴스와 'success'혹은 'error'를 나타내는 상태 메시지 문자열이다. success나 error 콜백을 명시했다면, 이 함수는 해당 콜백이 호출된 후에 실행된다. |
| beforeSend | Function | 요청이 전송되기에 앞서 먼저 호출되는 함수. 이 함수는 XHR 인스턴스를 전달 받으며, 사용자 정의 헤더를 설정하거나 요청 전에 필요한 연산을 수행하는 데 사용할 수 있다. |
| async | Boolean | false이면 요청이 동기 호출로 전송된다. 기본은 비동기 요청이다. |
| processData | Boolean | false로 설정되면, URL 인코딩된 형태로 처리되어 전달된 데이터를 금지한다. 기본 값은 데이터가 'application/x-www-form-urlencoded'타입의 요청에 사용하는 형태의 URL로 인코딩된다. |
| ifModified | Boolean | true일 때 Last-Modified 헤더를 확인하여 마지막 요청 이후에 응답 콘텐츠가 변경되지 않았다면 요청이 성공한다. 만일 생략하면 헤더를 확인하지 않는다. |
$.ajax({
type: "POST",
url: "test.jsp",
data: "name=Park&location=S2C",
success: function(msg){
alert( "Data : " + msg );
}
});
