JQuery $.ajax()

1 개요

jQuery.ajax()

$.ajax()

• 비동기 HTTP 요청 수행
• jQuery를 통해 보내지는 모든 Ajax 요청의 기본임

2 설명

$.ajax(url [, settings])

• url : String 타입의 요청될 URL
• settings : PlainObject 타입이며 키/값 형태로 요청이 설정

3 $.ajax()

• 옵션 없이 $.ajax()를 실행하면 단순히 현재 페이지를 불러오며, 그 결과로 아무런 처리를 하지 않음

$.ajax();

4 jqXHR Object

• jqXHR은 jQuery XMLHttpRequest Object임
• $.ajax()에 의해 리턴된 Object임
• jqXHR은 각 브라우저의 XMLHttpRequest Object를 모두 포함함. (따라서 responseText, responseXML, getResponseHeader()을 기본적으로 모두 포함)

5 jqXHR Object 예시

• jqXHR은 $.ajax()로 부터 리턴을 받으며 jqXHR은 다양한 메쏘드와 프라퍼티를 함께 가짐. ( Promise interface 참조 )
• jqXHR의 다양한 메쏘드는 하나 이상의 콜백 함수를 인자로 가지며, $.ajax() 요청이 완료될 때 호출됨
• 아래 예제의 $.ajax에 의한 요청이 성공적으로 수행되어 jqXHR Object를 돌려 받은 후 done 메쏘드를 실행함. 이때 data는 jqXHR 에서 동일한 형태로 곧장 돌려 받음

$.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 ) );
    }
});

6 예시

• 예제: http://zetawiki.com/ex/jquery/jquery_ajax.html
• 예제에서 불러오는 웹페이지: http://example.zetawiki.com/txt/utf8test.txt

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.ajax({
	url: "http://example.zetawiki.com/txt/utf8test.txt",
}).done(function(data) {
	document.write(data);
});
</script>

7 같이 보기

• jQuery $.get()
• jQuery $.post()
• jQuery 웹페이지 읽기
• jQuery ajax 스피너 구현
• AJAX

8 참고 자료

• http://api.jquery.com/jquery.ajax/