jQuery.ajax() HTTP 비동기 데이터 교환

jQuery.ajax()

원문 링크 http://api.jquery.com/jQuery.ajax/

권고사항 : 아래 글을 보시기 전에 권고드립니다. 아래는 발번역과 오역 그리고 미처 다 한글화가 되어있지 않습니다. 의미도 모른채 번역된 부분이 많기 때문에 다 건너띠고 아래쪽 예제만 보시길 강력히 권고 드립니다. 나빠진 정신건강에 대해 책임(?)지지 않습니다. ^^;;;;

jQuery.ajax( url [, settings] )Returns : jqXHR

개요 : 비동기 HTTP (Ajax) 요청을 수행합니다.

jQuery.ajax( url [, settings] )
url 요청을 보낼 URL 문자열
settings key/value 쌍으로 구성된 Ajax 요청 설정값. 모든 값들은 생략이 가능한 옵션값 임. 기본적인 설정값을 $.ajaxSetup() 에 정의할 수 있음. 모든 세팅에 대한 내용이 궁금하시면 jQuery.ajax( settings ) 을 참고하세요.
jQuery.ajax( settings )
settings key/value 쌍으로 구성된 Ajax 요청 설정값. 모든 값들은 생략이 가능한 옵션값 임. 기본적인 설정값을 $.ajaxSetup() 에 정의할 수 있음.
acceptsMap

Default: 데이터 타입에 의존적 depends on DataType

content 타입을 헤더에 포함하여 서버에 보내면 응답 시 같은 타입으로 리턴이 됩니다. 만약 accepts 세팅값을 수정하려 한다면 $.ajaxSetup() 함수에서 해야 합니다.

asyncBoolean

Default: true

기본으로 사용하면, 모든 요청은 비동기방식으로 동작합니다. 만일 동기방식으로 사용하려면 이 값을 false로 세팅하세요. 크로스도메인(2개의 도메인 사이의 정보교환)과 dataType: "jsonp" 인 경우는 동기방식이 지원되지 않습니다. 동기방식은 요청이 처리될 때까지 브라우져가 일시적인 잠금상태가 됩니다.

beforeSend(jqXHR, settings)Function

요청 전 콜백함수이며, 이 함수에서 요청을 보내기 전 jqXHR 객체를 수정할 수 있습니다. 이 함수에서 false를 반환하면 Ajax 요청이 취소됩니다. jQuery 1.5부터 beforeSend 옵션은 요청의 type에 상관없이 호출할 수 있습니다.

cacheBoolean

Default: true, dataType 이 'script' 와 'jsonp' 일때는 false로 세팅

만일 이 값을 false로 하면, 브라우저의 캐쉬사용을 강제적으로 막습니다. 또한 false 세팅하면 URL 쿼리 스트링에 "_=[TIMESTAMP]" 값이 추가됩니다.

complete(jqXHR, textStatus)Function, Array

요청이 완료되었을 때 호출되는 함수입니다. 요청에 대한 응답이 success 나 error 가 반환된 후 실행됩니다. 이 함수는 2개의 인자를 갖습니다. jqXHR 객체와 요청에 대한 상태값("success", "notmodified", "error", "timeout", "abort", "parsererror")으로 구성되어 있습니다. 더 자세한 내용은 Ajax Event를 참고하십시오.

contents(added 1.5)Map

문자열과 정규표현식이 쌍으로 이루어진 맵 데이터 입니다. jQuery는 응답 데이터를 이 맵 데이터를 기준으로 파싱합니다.

contentTypeString

Default: 'application/x-www-form-urlencoded'

서버에 데이터를 보낼 때 사용되는 content-type 입니다. 기본값은 "application/x-www-form-urlencoded" 입니다. 명시적으로 바꾸려면 $.ajax() 함수안에서 content-type을 세팅해 줘야 합니다. 서버로 데이터를 보낼 때는 언제나 UTF-8 charset를 사용합니다. 따라서 서버 사이드 프로그램 시 그에 맞게 디코딩을 하여 사용해야 합니다.

contextObject

This object will be made the context of all Ajax-related callbacks. By default, the context is an object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax). For example, specifying a DOM element as the context will make that the context for the complete callback of a request, like so:
```
$.ajax({
	  url: "test.html",
	  context: document.body
	}).done(function() { 
	  $(this).addClass("done");
	});
```
converters(added 1.5)Map

Default: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}

데이터 타입을 변환합니다.

crossDomain(added 1.5)Boolean

Default: false : 같은 도메인 내의 요청일 경우, true : 크로스 도메인 간의 요청일 경우

만일 2개의 다른 도메인(CrossDomain)간의 데이터 교환이라면(JSONP와 같은), 이 세팅값을 true로 해야 합니다.

dataObject, String

서버로 보낼 데이터입니다. GET 요청 형태의 query 스트링으로 변환되어 보내집니다. GET 요청 파라미터에 자동으로 추가됩니다. 이런 자동 추가를 방지하기 원하면 processData 옵션을 보시기 바랍니다. 이 객체는 key/value의 쌍으로 이루어져 있습니다. 만일 value가 배열이라면, jQuery는 같은 key로 여러 value를 직렬화 구성을 하게 됩니다. 아래쪽에 추가적인 설명이 있습니다.

dataFilter(data, type)Function

이 함수는 응답 원시 데이터를 핸들링 할 수 있습니다. 정제된 데이터를 반활해야 할 필요가 있을 때 사용합니다. 두개의 인자가 있는데 data 와 그 데이터의 type입니다.

dataTypeString

Default: Intelligent Guess (xml, json, script, or html)

서버에서 응답 받을 때는 데이터의 타입을 jQuery가 추정하여 처리합니다. 만일 인자를 아무것도 적지 않으면 응답 메시지의 MIME type을 기초로하여 처리하게 되는 것입니다. MIME type이 XML 이며 yield XML을 생성하고, 1.4 JSON은 JavaScript 객체를 생성, 1.4 script라면 script를 실행하고, 그 외 다른 것들은 문자열을 리턴합니다.
- "xml": jQuery가 XML 문서를 반환합니다.
- "html": 평문 HTML 을 반환합니다.
- "script": JavaScript를 실행하고 평문 텍스트를 리턴합니다. 쿼리 스트링에 "_=[TIMESTAMP]" 를 추가하면 캐싱을 방지할 수 있습니다. 이런 방식은 cache 옵션을 true로 바꾸는 역할을 합니다.
- "json": JSON을 JavaScript 객체형태로 반환합니다. jQuery 1.4에서 JSON 데이터는 엄격한 방식으로 파싱되었습니다. 형식에 맞지않는 JSON 데이터는 요청이 거부되고 error을 발생시켰습니다. JSON 포맷에 대해 궁금하시면 json.org 을 방문해 보세요.
- "jsonp": JSONP 를 사용하여 JSON 블럭을 로드합니다. 쿼리 스트링에 "_=[TIMESTAMP]" 를 추가하면 캐싱을 방지할 수 있습니다. 이런 방식은 cache 옵션을 true로 바꾸는 역할을 합니다.
- "text": 평문 텍스트 문자열을 반환합니다.
- multiple, 공백 구분 값(space-separated values): jQuery 1.5에서, dataType을 변환할 수 있게 되었습니다. 예를들어 응답받은 text 를 XML 로 변화하고 싶으면, "text xml"이라고 사용하면 됩니다.
error(jqXHR, textStatus, errorThrown)Function

요청(request)이 실패하면 호출됩니다. 이 함수는 3개의 인자를 통해 데이터를 받을 수 있습니다. jqXHR 객체는 발생한 에러 타입과 추가적인 예외 사항을 담고 있습니다. 두번째 인자에는 "timeout", "error", "abort", "parsererror" 와 같은 상황을 담고 있습니다. 세번째 인자에는 HTTP 에러가 담겨 있는데, "Not Found" 나 "Internal Server Error." 같은 것 들입니다. Note: cross-domain 스크립트나 JSONP 요청에 대해서는 이 함수를 사용할 수 없습니다.

globalBoolean

Default: true

전역 Ajax 이벤트 핸들러를 제어합니다. 기본값은 true 입니다. 이 값을 false로 하면 ajaxStart 나 ajaxStop 같은 전역 핸들러의 실행을 막을 수 있습니다.

headers(added 1.5)Map

Default: {}

요청 시 추가로 보낼 헤더 정보입니다. key/value 쌍으로 구성됩니다. 이 세팅값은 beforeSend 함수가 호출되기 전에 처리되야 합니다. beforeSend 함수 내에서 value 값을 재조정 할 수 있습니다.

ifModifiedBoolean

Default: false

마지막 request 이후 response가 변경되었을 경우에만 request가 성공하도록 허용하는 값입니다. 이것은 마지막 수정 정보를 헤더에서 체크하는 것입니다. 기본값은 false 이며 이 옵션이 무시됩니다. 즉, 언제나 request에 대한 응답을 체크하는 것입니다. jQuery 1.4 부터는 수정되지 않은 데이터를 알아내기 위한 'etag' 를 체크할 수 있습니다.

isLocal(added 1.5.1)Boolean

Default: 현재 프로토콜을 유지 depends on current location protocol

jQuery에서 인식하지 못하더라도 현재 환경이 "local(예, filesystem)" 로 인식할 수 있도록 허용합니다.(이건 무슨 의미인지 모르겠네요.) 다음 file, *-extension, widget 프로토콜 들은 현재 local로 인식합니다. 만일 isLocal 세팅을 변경을 원하시면 $.ajaxSetup() 함수에서 하실 것을 권장드립니다.

jsonpString

jsonp 요청에 사용한 콜백 함수명을 오버라이드 합니다. 이 값은 url에 포함된 쿼리 스트링의 부분인 'callback=?' 문자열 중 'callback' 을 대신하여 사용됩니다. 예를 들면 {jsonp:'onJSONPLoad'} 라고 세팅하면 서버에 'onJSONPLoad=?' 처럼 전달되게 되는 것입니다. jQuery 1.5 부터는 jsonp 옵션을 false 로 세팅하여 URL에 "?callback" 이 추가되는 것을 방지하거나 "=?" 을 변조되는 시도를 방지할 수 있습니다. 이러한 경우 명시적으로 jsonpCallback 세팅값을 이용하여야 합니다. 예를 들어, { jsonp: false, jsonpCallback: "callbackName" } 와 같이 사용합니다.

jsonpCallbackString, Function

JSONP 요청 시 콜백 함수명을 지정합니다. 지정하지 않으면 jQuery에서 임의적으로 부여하게 됩니다. 요청(request)에 대해 쉽게 핸들링 할 수 있도록 유니크한 이름이 부여됩니다. 콜백 이름을 당신이 지정할 수도 있습니다. jQuery 1.5부터 함수명을 세팅할 수 있게 되어습니다.

mimeType(added 1.5.1)String

XHR의 마임 타입을 설정합니다.

passwordString

HTTP 엑세스 시 패스워드를 설정합니다.

processDataBoolean

Default: true

By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

scriptCharsetString

Only for requests with "jsonp" or "script" dataType and "GET" type. Forces the request to be interpreted as a certain charset. Only needed for charset differences between the remote and local content.

statusCode(added 1.5)Map

Default: {}

요청에 대한 응답 시 전달된 HTTP 상태 코드와 실행될 함수로 이루어진 집합입니다. 예를 들어, 404 상태에 대해 알림창을 보여주는 경우는 아래 예와 같습니다.
```
$.ajax({
	  statusCode: {
		404: function() {
		  alert("page not found");
		}
	  }
	});
```
만일 요청이 성공했다면, 상태코드는 성공 콜백함수로 같은 파라미터를 전달합니다. 반대로 error 가 발생해도 같은 파라미터를 error 콜백 함수로 전달하게 됩니다.

success(data, textStatus, jqXHR)Function, Array

요청이 성공했을 때 호출됩니다. 이 함수는 3개의 인자를 전달합니다. data 인자는 서버에서 전달된 데이터를, 두번째는 데이터의 타입을, 마지막으로 jqXHR(jquery 가 변형한 XMLHttpRequest 객체)를 전달하게 됩니다. jQuery 1.5 부터, success 시 함수 배열을 전달 받을 수 있습니다.

timeoutNumber

요청 대기 시간을 세팅합니다.

traditionalBoolean

이 세팅값을 true로 하면 전통적인 스타일의 파라미터 직렬화를 사용할 수 있습니다.(이건 뭔가요 ㅡㅡ;;)

typeString

Default: 'GET'

요청 시 POST 와 GET 방식을 결정합니다. 기본값은 GET 방식입니다.

urlString

Default: 현재 페이지 The current page

요청을 보낼 URL 주소입니다.

usernameString

HTTP 요청 시 필요한 username 값 입니다.

xhrFunction

Default: IE 에서는 ActiveXObject 이고 다른 브라우저는 XMLHttpRequest

XMLHttpRequest 객체입니다.

xhrFields(added 1.5.1)Map

기본 XHR 객체의 키-값의 맵 데이터 입니다. 예를 들어, 크로스 도메인에서 withCredentials 값을 true로 하고 싶다면 아래와 같이 세팅합니다.
```
$.ajax({
	   url: a_cross_domain_url,
	   xhrFields: {
		  withCredentials: true
	   }
	});
```
jQuery 1.5 부터 withCredentials 속성은 네이티브 XHR 에서 전달하지 못합니다.

$.ajax() 함수는 jQuery에서 사용되는 모든 Ajax 의 근간입니다. 종종 이 함수를 직접 호출하지 않아도 쉽게 사용할 수 있는 함수들이 있습니다. $.get() 이나 .load() 같은 함수들이 그것들입니다. 만일 세팅값을 변경할 필요가 있을 경우에도 $.ajax() 함수에서 유연하게 변경할 수 있습니다.

$.ajax();

Note: 기본 세팅값을 전역적으로 관리하려면 $.ajaxSetup() 함수를 이용해야 합니다.

위의 옵션값을 아무것도 없이 사용하면 현재 페이지에서 응답 결과를 제어하지 못합니다. 이게 가능하려면 콜백 함수를 지정해야 합니다.

The jqXHR Object

jQuery XMLHttpRequest (jqXHR) 객체는 $.ajax() 함수에서 반환됩니다. jQuery 1.5 부터 브라우저의 네이티브 XMLHttpRequest 객체의 상위집합 입니다. 예를 들어, 이 객체는 responseText 과 responseXML 속성을 포함하고 있을 뿐만 아니라 getResponseHeader() 함수도 포함하고 있습니다. 전송 메카니즘이 XMLHttpRequest 가 아닌 다른 것일 경우( JSONP 요청에 대한 script 태그 같은) jqXHR 객체는 네이티브 XHR 기능을 이용하게 됩니다.

jQuery 1.5.1부터, jqXHR 객체는 overrideMimeType() 함수를 사용하게 됩니다. (이것은 jQuery 1.4.x 에서는 사용되었지만, jQuery 1.5 에서 일시적으로 삭제되었음). .overrideMimeType() 함수는 method may be used in the beforeSend() 콜백 함수에서 사용될 수 있습니다. 예를 들어, 응답의 content-type header 를 수정하기 위해서 아래와 같이 사용할 수 있습니다.:

$.ajax({
  url: "http://fiddle.jshell.net/favicon.png",
  beforeSend: function ( xhr ) {
    xhr.overrideMimeType("text/plain; charset=x-user-defined");
  }
}).done(function ( data ) {
  if( console && console.log ) {
    console.log("Sample of data:", data.slice(0, 100));
  }
});

$.ajax() 에서 반환된 jqXHR 객체는 jQuery 1.5 의 약속된 인터페이스를 구현하여 모든 속성, 메소드, 동작들을 제공하고 있습니다.(더 많은 정보를 원하시면 Deferred object 를 참고). 편의성과 일관성을 위해 $.ajax() 함수에서 사용될 콜백 함수들로 jqXHR 객체는 .error(), .success(), .complete() 와 같은 함수들을 사용할 수 있습니다. 이들 함수들은 $.ajax() 요청이 종료되었을 때 호출되고 모두 같은 인자를 전달받게 됩니다. 이것은 단일 요청에서 여러 콜백 함수를 지정할 수도 있고 요청이 완료된 후에도 콜백 함수를 지정할 수 있습니다.

Notice: jqXHR.success(), jqXHR.error(), jqXHR.complete() 콜백 사용은 1.8 버전부터 사용이 중지됩니다. 이런 사용을 제거하거나 jqXHR.done(), jqXHR.fail(), jqXHR.always() 함수들로 대체하십시오.

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.ajax( "example.php" )
    .done(function() { alert("success"); })
    .fail(function() { alert("error"); })
    .always(function() { alert("complete"); });

// perform other work here ...

// Set another completion function for the request above
jqxhr.always(function() { alert("second complete"); });

For backward compatibility with XMLHttpRequest 이전 버젼과의 호환성을 위해, jqXHR 객체는 아래와 같은 속성과 메소드들을 제공합니다.

readyState
status
statusText
responseXML or responseText
setRequestHeader(name, value)
getAllResponseHeaders()
getResponseHeader()
abort()

하지만 onreadystatechange 매커니즘은 제공되지 않기 때문에 success, error, complete, statusCode 이 상황들을 모두 커버 해야할 필요성이 있습니다.

Callback Function Queues

beforeSend, error, dataFilter, success, complete 옵션들 모두는 적절한 시간에 호출할 수 있는 콜백 함수를 가질 수 있습니다.

jQuery 1.5부터, error (fail), success (done), complete (always) 콜백 함수들은 큐에서 선입선출(first-in, first-out) 방식으로 제어할 수 있습니다. 이 의미는 콜백 함수마다 처리 로직을 수행할 수 있다는 뜻입니다. Deferred object methods 를 참고하여 $.ajax() 함수에서 콜백 시의 내부처리에 대해 알아볼 수 있습니다.

모든 콜백 함수의 this 키워드는 $.ajax 에서 전달된 context 의 객체들을 가르킵니다. 만일 context 가 지정되지 않았다면 this는 Ajax 세팅 자체를 지칭하게 됩니다.

JSONP 나 cross-domain 의 GET 요청 같은 XHR을 사용하지 않는 Ajax 방식을 사용할 경우에 XMLHttpRequest 나 textStatus 파리미터들은 undefined 값을 가지게 됩니다.

아래는 $.ajax()에서 콜백 시 발생하는 훅(hook - I/O 시 정의된 상수값들 정도로 생각하면 됨) 값들 입니다.

beforeSend jqXHR 객체와 파라미터 settings 맵을 받습니다.
error 요청이 실패했을 경우 순서대로 등록됩니다. error 타입 문자열과 exception 객체로 구성된 jqXHR 들을 받습니다. 몇몇 Some 내장 error들은 exception 객체에 "abort", "timeout", "No Transport"와 같은 문자열이 넘어옵니다.
dataFilter 성공적으로 응답이 되었을 경우 즉시 호출됩니다. 반환된 데이터와 dataType 을 받을 수 있고 success 쪽으로 변경된 데이터를 전달해야 합니다.
success 요청이 성공하면 요청된 순서에 따라 호출됩니다. 반환된 데이터와 성공 코드를 포함한 문자열 그리고 jqXHR 객체를 받을 수 있습니다.
complete 요청이 실패하거나 성공에 관계없이 요청이 종료되면 순서에 따라 발생합니다. 성공 또는 실패에 대한 코드를 담은 jqXHR 객체를 받습니다.

예를 들어, HTML 이 반환되고 이것을 사용하고 싶다면 success 핸들러를 사용해야 합니다.

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

Data Types

$.ajax() 함수는 검색한 데이터에 대한 정보를 제공하는 서버에 의존합니다. 만일 서버에서 XML 데이터가 제공되었다면, 일반적인 XML 메소드나 jQuery의ㅣ 선택자(selector)들을 사용하여 제어할 수 있습니다. 만일 위의 예제와 같이 HTML 같은 것이라면 데이터를 text 처럼 취급할 수도 있습니다.

별개의 다른 데이터를 dataType 옵션을 이용하여 다룰 수 있습니다. dataType 으로는 xml html, json, jsonp, script, text.

text 나 xml 타입은 jqXHR 객체의 속성인 responseText 나 responseXML 을 통해 success 핸들러에서 간단하게 받을 수 있습니다.

Note: 웹 서버에서 사용한 MIME 타입과 데이터 요청 시의 dataType 값이 같은지 확인해야 합니다. 특히 XML 은 서버에서 text/xml 또는 application/xml 로 반환했는지 확인하고 그에 맞춰 사용해야 합니다.

만일 html 을 지정하는 경우, HTML 이 반환 되기 전에 내부의 JavaScript 는 실행이 된 후 반환이 됩니다. 비슷하게 script 를 정의했다면, 서버에서 반환될 때 인라인 JavaScript 는 실행이 되고 반환되게 됩니다.

json 타입은 The json JavaScript 객체로 가져온 데이터 파일을 분석하고 결과 데이터로 만들어진 객체를 반환합니다. 이렇게 하기 위해서는, 브라우저가 지원한다면 jQuery.parseJSON() 을 사용하거나, 지원하지 않는다면 Function constructor 을 사용해야 합니다. 형식에 맞지 않는(Malformed) JSON 데이터는 에러가 발생하게 되는데 더 많은 정보는 json.org에서 보실 수 있습니다. JSON 데이터는 구조화된 데이터의 이동에 편리합니다. JavaScript 로 처리하기에 간결하고 쉽습니다. 만일 외부 서버에서 가져와야 하는 데이터라면, jsonp 타입을 대신 사용할 수 있습니다.

이 jsonp 타입은 URL 쿼리스트링에 callback=? 이라는 문자열이 추가됩니다. 서버는 유효한 형태의 JSONP 반환 데이터를 콜백(callback) 이름을 사용하여 반환하게 됩니다. $.ajax() 의 옵션인 callback 이외에 다른 파라미터를 지정하여 사용할 수 있습니다.

Note: JSONP 는 확장된 JSON 포맷입니다.

script 나 jsonp 데이터 타입이 사용 가능한 원격 서버에서 데이터를 가져왔을 때, error 콜백과 글로벌 이벤트는 발생하지 않습니다.

Sending Data to the Server

기본적으로, Ajax는 GET HTTP 방식입니다. POST 방식이 필요할 경우, type 옵션값을 이용하면 됩니다. POST 데이터가 서버로 전송될 경우 W3C XMLHTTPRequest 표준인 UTF-8 캐릭터셋을 이용하게 됩니다.

data 옵션값은 key1=value1&key2=value2 형태의 쿼리 스트링을 사용할 수 있습니다. 또한 {key1: 'value1', key2: 'value2'} 형태도 사용이 가능합니다. 만일 후자의 형태를 사용할 경우, 데이터를 보내기 전에 jQuery.param()을 사용하여 데이터를 가공해야 합니다. 이 과정은 processData 을 false로 세팅하면 해결할 수 있습니다. 이 과정을 수행하면 서버로 XML 데이터를 보낼 때 contentType 타입이 application/x-www-form-urlencoded 로 변경되는 것을 방지할 수 있습니다. (음, 이 부부은 사실 명확치 않네요. 좀더 공부가 필요합니다. ㅜㅜ)

Advanced Options

global 옵션으로 .ajaxSend(), .ajaxError() 그리고 이 함수로 인해 호출되는 함수들의 실행을 제어할 수 있습니다. cross-domain 스크립트와 JSONP 가 사용될 경우에는 자동으로 false 로 세팅됩니다. 더 자세한 내용은 함수들의 사용법을 살펴 보십시오.

만일 서버가 HTTP 인증을 요구한다면 username 과 password 옵션을 사용할 수 있습니다.

Ajax 사용 시 시간제한을 두어 사용자에게 그 내용을 제공하는 것이 좋습니다. 요청시간은 $.ajaxSetup() 에서 timeout 옵션값을 조절하는 것이 좋습니다.

기본적으로 지속적인 요청에 대해 브라우저는 캐시에 있는 결과를 사용하려 합니다. 이런 부분을 해결하기 위해 cache 옵션을 false로 세팅하시기 바랍니다. 또한 결과가 마지막 요청 후에 변경되지 않았다면 ifModified을 true로 세팅하면 false를 반환받을 수 있습니다.

scriptCharset 옵션은 <script> 태그의 캐릭터셋을 명시적으로 설정할 수 있습니다. 만약 서버와 스크립트의 캐릭터 셋이 다를 경우 아주 유용한 옵션입니다.

Ajax 의 기본은 "비동기(asynchronous)" 입니다. async 옵션은 기본적으로 $.ajax() 에서 true 로 세팅되어 있습니다. 이 옵션을 false 로 바꾸면 동기식으로 전환됩니다.

$.ajax() 함수는 XMLHttpRequest 객체를 반환합니다. 일반적으로 jQuery는 내부적으로 이 객체를 처리합니다. 사용자 정의 함수에서는 xhr 의 옵션을 이용해서 가공을 할 수 있습니다. 반환된 객체는 대체로 삭제되지만 저수준 인터페이스에서는 요청에 대한 조작을 위해 사용할 수도 있습니다. 특히, .abort() 를 호출하면 객체가 완성되기 전에 요청을 중단할 수 있습니다.

jQuery.ajaxSettings.xhr 를 오버라이드해서 사용하는 예제입니다.

var _super = jQuery.ajaxSettings.xhr;
jQuery.ajaxSettings.xhr = function () {
    var xhr = _super(),
        getAllResponseHeaders = xhr.getAllResponseHeaders;

    xhr.getAllResponseHeaders = function () {
        if ( getAllResponseHeaders() ) {
            return getAllResponseHeaders();
        }
        var allHeaders = "";
        $( ["Cache-Control", "Content-Language", "Content-Type",
                "Expires", "Last-Modified", "Pragma"] ).each(function (i, header_name) {

            if ( xhr.getResponseHeader( header_name ) ) {
                allHeaders += header_name + ": " + xhr.getResponseHeader( header_name ) + "\n";
            }
            return allHeaders;
        });
    };
    return xhr;
};

Extending Ajax

jQuery 1.5부터, jQuery의 Ajax 는 더 유연하게 사용할 수 있도록 확장된 사전필터(prefilters), 컨버터(converters), 변환(transports)이 포함되어 있습니다. 이런 이점에 대해 더 많은 정보를 얻으시려면 Extending Ajax 페이지를 살펴 보십시오.

Additional Notes:

보안 문제로 인해 대부분의 "Ajax" 요청은 제한이 있습니다. 도메인, 서브 도메인, 프로토콜이 다른 상황에서의 조회는 사용하지 못합니다. Script 와 JSONP 요청은 이런 제약에서 자유롭습니다.

예 제
서버에 데이터를 보내고 완료되면 사용자에게 알립니다.

$.ajax({
  type: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});

예 제
HTML 페이지의 최신 버전을 요청합니다.

$.ajax({
  url: "test.html",
  cache: false
}).done(function( html ) {
  $("#results").append(html);
});

예 제
XML 데이터를 서버에 보냅니다. processData 옵션값을 false로 하여 자동으로 데이터가 string으로 변환되는 것을 방지합니다.

var xmlDocument = [create xml document];
var xmlRequest = $.ajax({
  url: "page.php",
  processData: false,
  data: xmlDocument
});

xmlRequest.done(handleResponse);

예 제
서버로 데이터를 보내고, 서버는 저장 후 특정 메시지를 보내 줍니다. 완료되면 로그 메시지를 갱신하고 실패하면 알림창을 나타냅니다.

var menuId = $("ul.nav").first().attr("id");
var request = $.ajax({
  url: "script.php",
  type: "POST",
  data: {id : menuId},
  dataType: "html"
});

request.done(function(msg) {
  $("#log").html( msg );
});

request.fail(function(jqXHR, textStatus) {
  alert( "Request failed: " + textStatus );
});

예 제
JavaScript 파일을 로드하고 실행합니다.

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

조금 쉬어가면서 작성했지만, 역시 역부족이네요. 사실 너무 길어서 필요한 것만 할까 생각했지만 그래도 처음부터 발번역을 했습니다. 나중에 개정판(?)이 될지는 모르겠지만 아마 고쳐야 할 부분이 너무 많습니다. 맨위에서 권고 드렸듯이 예제만 보는 것이 정신건강에 좋을 듯합니다. ^^;;;;;

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.

'프로그래밍 > jQuery' 카테고리의 다른 글

ajaxSend() Ajax 요청을 보내기 전에 호출되는 이벤트 (0)	2012.06.19
jQuery.ajaxPrefilter() $.ajax() 함수 호출 전 Ajax 옵션 수정 (0)	2012.06.19
ajaxError() Ajax 에러가 발생되면 호출 (0)	2012.06.19
ajaxComplete() Ajax가 완료되면 호출 (4)	2012.06.15
toggle(), 요소 표시 또는 숨기기, 토글하기 (0)	2012.05.08
jQuery .stop(), 애니메이션 효과 멈춤 (0)	2012.05.08
slideUp(), 슬라이드 효과로 숨기기 (0)	2012.04.25
slideToggle(), 슬라이드 토글하기 (1)	2012.04.25

jQuery.ajax() HTTP 비동기 데이터 교환

acceptsMap

asyncBoolean

beforeSend(jqXHR, settings)Function

cacheBoolean

complete(jqXHR, textStatus)Function, Array

contents(added 1.5)Map

contentTypeString

contextObject

converters(added 1.5)Map

crossDomain(added 1.5)Boolean

dataObject, String

dataFilter(data, type)Function

dataTypeString

error(jqXHR, textStatus, errorThrown)Function

globalBoolean

headers(added 1.5)Map

ifModifiedBoolean

isLocal(added 1.5.1)Boolean

jsonpString

jsonpCallbackString, Function

mimeType(added 1.5.1)String

passwordString

processDataBoolean

scriptCharsetString

statusCode(added 1.5)Map

success(data, textStatus, jqXHR)Function, Array

timeoutNumber

traditionalBoolean

typeString

urlString

usernameString

xhrFunction

xhrFields(added 1.5.1)Map