jQuery AJAX 함수 Reference

 

이번장에서는 jQuery AJAX Reference에 대해서 알아보겠습니다.

AJAX는 전체페이지를 로딩하지 않고 서버와 데이타 및 웹페이지의 업데이트 부분을 불러들일수 있는 예술적인 기능을 합니다.

AJAX 기능에 대해서 조금더 자세히 알고싶은 분들은 저의 블로그 jQuery AJAX 를 방문하시면 됩니다.

다음 내용은 모든 jQuery의 AJAX 방법을 나타냅니다.

$.ajax()
AJAX의 요청을 수행합니다.

$.ajaxPrefilter()
AJAX 요청을 보내기 전이나 $.ajax() 함수에 의해 호출되기 전에 AJAX 옵션들을 수정하거나 조작합니다.

말이 좀 어렵습니다. ^^; 저도 코딩하면서 거의 본적이 없는 함수이기에 ....

내용인즉슨 미리 정의 되어있는 AJAX의 요청을 취소 또는 수정할 수 있다 뭐 이런 의미입니다.

$.ajaxSetup()
Ajax 요청 시 옵션 값들을 정의합니다.

예를 들어서

$.ajaxSetup({
url: 'ping.php'
});

// 이런식으로 미리 url을 정의해 놓고

$.ajax({
// 여기에서 url 값으로 ping.php 을 다시 쓸 필요가 없습니다.
data: {'name': 'Dan'}
});

// url값을 따로 불러오지 않고 사용가능합니다.

$.get()
HTTP GET 방식 요청을 통해 서버로부터 데이터를 받습니다.

$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
가장 간단한 사용방법인데 success 콜백 함수는 응답받은 MIME 타입별로 XML, text 문자열, JSON 객체 등과 같은 데이터가 넘어옵니다. 또한 응답상태값도 문자열로 넘어옵니다.
$.get("test.php", { name: "Park;s", tel: "010-1234-5678" } );
// 처럼 test.php 페이지에 변수 name, tel값을 넘길수 있습니다.

$.getJSON()

HTTP GET 방식 요청을 통해 서버로부터 받은 JSON 데이터를 로드합니다.
$.ajax({
url: url,
dataType: 'json',
data: data,
success: callback
});
서버로 보낼 Data는 URL 쿼리 스트링에 추가됩니다. 만일 data 파라미터가 object라면, 문자열과 url 인코딩을 통해 변환된 후 URL에 추가되어 전송됩니다.

$.getScript()
HTTP GET 방식 요청을 통해 서버로부터 받은 JavaScript 파일을 로드하고 실행합니다.

$.ajax({
url: url,
dataType: "script",
success: success
});

$.param()
URL 쿼리 스트링 또는 Ajax 요청에 사용할 수 있도록 배열이나 객체를 직렬화 합니다.

$.param({ a: [2,3,4] }) // "a=2&a=3&a=4"

$.param({ a: [2,3,4] }) // "a[]=2&a[]=3&a[]=4"
// 처럼 직렬화하여 배열을 사용할 수 있습니다.

$.post()
HTTP POST 방식 요청을 통해 서버로부터 데이터를 받습니다.

$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
Success 콜백 함수는 응답받은 MIME 타입별로 XML, text 문자열, JSON 객체 등과 같은 데이터가 넘어옵니다. 또한 응답상태값도 문자열로 넘어옵니다.

ajaxComplete()
AJAX 요청이 완료되면 호출될 핸들러를 등록하는 이벤트 입니다.
$("#msg").ajaxComplete(function(event,request, settings){
$(this).append("<li>Request Complete.</li>");
});
AJAX가 완료되면 실행을 하는데 AJAX가 성공/실패 관계없이 수행됩니다.

ajaxError()
Ajax 요청에 대해 에러가 발생되면 호출될 핸들러를 등록하는 이벤트 입니다.
$("#msg").ajaxError(function(event, request, settings){
$(this).append("<li>Error requesting page " + settings.url + "</li>");
});
AJAX 요청이 실패할 경우 메시지를 보여줍니다.

ajaxSend()
AJAX 요청을 보내기 전에 실행시킬 함수를 정의하는 이벤트 입니다.

$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("<li>Starting request at " + settings.url + "</li>");
});
AJAX 요청을 보내기 전에 메시지를 보여줍니다.

ajaxStart()

첫번째 AJAX 요청이 시작될 때 호출할 핸들러를 등록하는 이벤트 입니다.

$("#loading").ajaxStart(function(){
$(this).show();
});
AJAX 요청이 시작될 때 loading 메시지를 보여줍니다.

ajaxStop()
모든 AJAX 요청이 완료되면 호출할 핸들러를 등록하는 이벤트 입니다.

$("#loading").ajaxStop(function(){
$(this).hide();
});
모든 요청이 완료되면 loading 메시지를 안보이게 처리합니다.

ajaxSuccess()

Ajax 요청이 성공적으로 완료 때마다 실행될 함수를 작성하는 이벤트 입니다.

$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("<li>Successful Request!</li>");
});

AJAX 요청이 성공하면 메시지를 보여줍니다.

load()
서버로부터 데이터를 받아서 일치하는 요소 안에 HTML을 추가합니다

$('#result').load('ajax/test.html');

성공했다는 요청이 오면(textStatus 에 "success" 나 "notmodified" 같은 데이터가 있으면), load() 함수는 반환된 데이터를 일치되는 요소에 HTML 형식으로 넣어 줍니다.

데이터를 object 형태로 보내는 경우 POST 메서드가 사용되고, 그렇지 않으면 GET이 사용됩니다.

AJAX를 하면서 가장 많이 사용되는 함수가 아닐까 합니다. 특정 요소를 선택하고 그 부분만 업데이트 하고자 할 경우 이 함수를 사용하는데 실시간 전송(우편번호선택, 아이디 유무 체크등)에 아주 유용하게 사용되는 함수입니다.

이 함수만 알아도 AJAX의 50% 이상을 알았다해도 과언이 아닐까 합니다. 꼭 알아두시기 바랍니다.

serialize()

데이터를 보내기 위해 폼 요소 집합을 문자열로 인코딩 합니다.

이 함수는 표준 URL인코딩 표기법으로 텍스트 문자열을 만듭니다. 폼 요소 집합(input, textarea, select 등)과 같은 개별 요소들이 이 함수를 사용합니다.

serializeArray()

폼 요소를 names와 values 배열로 인코딩합니다.
이 함수는 JSON 문자열 형태로 JavaScript 배열 객체를 만듭니다. 이 함수는 폼 요소 집합을 표현하는 jQuery 객체를 이용합니다

위의 Reference와 관련된 내용은 모두 http://api.jquery.com 에 있습니다. 기본적인 예제와 내용을 확인할 수 있을텐데요. 모두 영문으로 되어있습니다. 하나하나 꼼꼼하게 해석하고 제가 코딩했던것을 바탕으로 하고 싶었으나 영문에 강하지 못하네요.

어쨋든 Reference 관련 설명부분이니 더 꼼꼼하게 공부하시고 싶은 분들은 위 사이트를 방문하시면 되겠습니다.