jQuery Ajax 사용하기

load(url, parameters, callback)

- URL과 선택적인 요청 매개변수로 Ajax 요청을 전송한다. 콜백 함수는 요청이 완료되면 호출되며,

DOM이 수정된다.

- 응답으로 반환된 엘리먼트를 필터링할 때도 있다. 그럴 때는 요청 URL에 셀렉터를 추가한다.

요청 URL은 접미사로 공백과 셀렉터를 붙여서 확장 엘리먼트에 삽입되는 응답 엘리먼트를 제한할 수 있다.

- $(.injectMe').load('/someResource div'); // 응답 엘리먼트에서 <div>엘리먼트만 삽입한다.

serialize()

- form 엘리먼크나 폼 안의 form 엘리먼트에서 구성되고 인코딩된 쿼리 문자열을 생성한다.

serializeArray()

- form 컨트롤의 값을 컨트롤의 이름과 값을 포함하는 배열로 수집하여 반환한다.

$.get(url, parameters, callback, type)

- 매개변수로 명시된 URL을 사용하여 서버에 대한 GET 요청을 전송한다.

- type: 응답 본문의 해석방법 명시. html, text, xml, json, script, jsonp

xml을 전달하고 서버에서 XML을 반환할 때 콜백 함수로 전달된 데이터는 XML DOM으로 파싱된다.

$.getJSON(url, parameters, callback)

- 매개변수로 명시된 URL을 사용하여 서버에 대한 GET 요청을 전송한다.

$.post(url, parameters, callback, type)

- 매개변수로 명시된 URL을 사용하여 서버에 대한 POST 요청을 전송한다.

$.ajax(options)

- 요청의 생성 방법과 통보 받은 콜백을 제어하고자 전달된 options을 사용하여 Ajax 요청을 전송한다.

- context: 요청과 관련한 모든 콜백 함수의 컨텍스트로 설정될 엘리먼트 명시

- contentType: 요청에 명시되는 콘텐츠 타입 (application/x-www-form-urlencoded)

(* Ajax로 파일 전송도 가능 -?- )

- success: 응답이 성공 상태 코드를 반환하면 호출되는 함수

- error: 응답이 에러 코드를 반환하면 호출되는 함수

- complete: 요청이 완료되면 호출되는 함수

- beforeSend: 요청이 전송되기에 앞서 먼저 호출되는 함수

- async: false이면 요청이 동기 호출로 전송

- dataFilter: 응답을 필터링하려고 호출되는 콜백 함수

$.ajaxSetup(options)

- 전달된 프로퍼티 집합을 이어지는 $.ajax() 호출의 기본 옵션 값으로 할당한다.

Ajax 이벤트

jQuery에서 Ajax 요청이 실행되는 동안 일련의 커스텀 이벤트 발생하는데, 요청의 진행에 따른 알림을

받거나 다양한 시점에 원하는 처리를 할 목적으로 이벤트 핸들러를 할당할 수 있다.

- 지역 이벤트: beforSend, success, error, complete

- 전역 이벤트: ajaxStart, ajaxSuccess, ajaxError, ajaxStop, ajaxComplete

지역 이벤트는 $.ajax()나 다른 관련 함수에 전달된 콜백함수를 의미한다.

전역 이벤트는 발생하거나 핸들러를 할당하여 처리할 수 있는 커스텀 이벤트이다.

ajaxComplete(callback)

ajaxError(callback)

ajaxSend(callback)

ajaxStart(callback)

ajaxStop(callback)

ajaxSuccess(callback)

- 전달된 콜백 함수를 메소드명이 의미하는 jQuery Ajax 이벤트 핸들러로 할당한다.

예)

$('body').bind(

'ajaxStart ajaxStop ajaxSend ajaxSuccess ajaxError ajaxComplete',

function(event){ alert(event.type); }

);

ajax 확장

- Prefilters: 사용자 정의 옵션을 처리하거나 조재하는 옵션을 변경하는 일반화된 beforeSend 콜백 함수

각 요청이 보내기지 전에 그리고 $.ajax()함수가 옵션을 처리하기 전에 호출되는 콜백 함수

$.ajaxPrefilter() 함수를 사용하여 등록할 수 있다.

$.ajaxPrefilter(dataTypes, handler)

각 요청이 보내지기 전과 $.ajax() 함수가 처리하기 전에 사용자 정의 Ajax 옵션을 처리하거나 

존재하는 옵션을 수정한다.

예)

$.ajaxPrefilter( function(options){

if(options.crossDomain){

options.url = "http://mydomain.net/proxy/" + encodeURIComponent(options.url);

options.crossDomain = false;

}

});

- Converters: 예상한 dataType과는 다른 특정 dataType에 대한 응답을 처리하려고 호출되는 일반화된

dataFilter 콜백함수

예)

$.ajaxSetup({

converts: {

"type mydatatype" : function(textvalue){

if(valid(textvalue)){

return mydatatypevalue;

} 

else{

// 에러 처리

}

}

}

});

- Trandports: $.ajax() 함수가 요청을 보낼 때 내부적으로 사용되는 객체

예)

사용자 정의  dataType인 image일 때를 처리하는 Transport를 생성하여 반환하는 함수

$.ajaxTransport("image", function(s){

if(s.type == "GET" && s.async){

var image;

return {

send: function( _ , callback){

image = new Image();

function done(statue){

if(image){

var statusText = (status == 200) ? "success" : "error",

tmp = image;

image = image.onreadystatechange = image.onerror = image.onload = null;

callback(status, statusText, {image:tmp});

}

}

image.onreadystatechange = image.onload = function(){

done(200);

}

image.error = function(){

done(404);

}

image.src = s.url;

},

abort: function(){

if(image){

image = image.onreadystatechange = image.onerror = image.onload = null;

}

}

},

}

});