출처 : 코딩의 시작, TCP School ( http://tcpschool.com/ajax/ajax_jquery_ajax )
$.ajax() 메소드
제이쿼리와 Ajax
Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 합니다.
그중에서도 현재 가장 널리 사용되고 있는 Ajax 프레임워크는 바로 제이쿼리(jQuery)입니다.
$.ajax() 메소드
제이쿼리는 Ajax와 관련된 다양하고도 편리한 메소드를 많이 제공하고 있습니다.
그중에서도 $.ajax() 메소드는 모든 제이쿼리 Ajax 메소드의 핵심이 되는 메소드입니다.
$.ajax() 메소드는 HTTP 요청을 만드는 강력하고도 직관적인 방법을 제공합니다.
$.ajax() 메소드의 원형은 다음과 같습니다.
원형
$.ajax([옵션])
URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소입니다.
옵션은 HTTP 요청을 구성하는 키와 값의 쌍으로 구성되는 헤더의 집합입니다.
예제
$.ajax({
url: "/examples/media/request_ajax.php", // 클라이언트가 요청을 보낼 서버의 URL 주소
data: { name: "홍길동" }, // HTTP 요청과 함께 서버로 보낼 데이터
type: "GET", // HTTP 요청 방식(GET, POST)
dataType: "json" // 서버에서 보내줄 데이터의 타입
})
// HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.
.done(function(json) {
$("<h1>").text(json.title).appendTo("body");
$("<div class=\"content\">").html(json.html).appendTo("body");
})
// HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달됨.
.fail(function(xhr, status, errorThrown) {
$("#text").html("오류가 발생했습니다.<br>")
.append("오류명: " + errorThrown + "<br>")
.append("상태: " + status);
})
// HTTP 요청이 성공하거나 실패하는 것에 상관없이 언제나 always() 메소드가 실행됨.
.always(function(xhr, status) {
$("#text").html("요청이 완료되었습니다!");
});
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>jQuery Ajax Method</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(function() { $("#requestBtn").on("click", function() { $.ajax("/examples/media/request_ajax.php") .done(function() { alert("요청 성공"); }) .fail(function() { alert("요청 실패"); }) .always(function() { alert("요청 완료"); }); }); }); </script> </head> <body> <h1>$.ajax() 메소드</h1> <button id="requestBtn">$.ajax() 메소드 실행</button> <p id="text"></p> </body> </html> |
request_ajax.php에 HTTP 요청을 구성하는 헤더 집합 소스 ?
'JavaScript' 카테고리의 다른 글
| jQuery 달력 위젯 (0) | 2019.08.14 |
|---|---|
| 정규 표현식 만들기 (0) | 2019.07.05 |
| FormData (0) | 2019.07.01 |
| MDN web docs (0) | 2019.06.26 |
| [HTML] div 태그와 span 태그 (0) | 2019.06.18 |