[FE] Ajax와 jQuery

1. Ajax와 jQuery

(1) $.ajax() 메소드

• $.ajax(URL [,옵션]) , $.ajax([옵션])
• URL 주소 : 클라이언트가 HTTP 요청을 보낼 서버의 주소
• 옵션 : HTTP 요청을 구성하는 키와 값의 쌍으로 구성되는 헤더의 집합
  • url : 요청 url
  • data: 요청과 함께 서버에 보내는 string, json
  • success(data, textStatus, jqXHR) : 요청이 성공일 때 실행되는 callback 함수
  • dataType : 서버에서 내려온 data 형식

예제- 1 - 대표적인 옵션

   $.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("요청이 완료되었습니다!");
   });

- 예제2 - 메소드의 동작

    $(function() {
        $("#requestBtn").on("click", function() {
            $.ajax("/examples/media/request_ajax.php")
            .done(function() {
                alert("요청 성공");
            })
    
            .fail(function() {
                alert("요청 실패");
            })
    
            .always(function() {
                alert("요청 완료");
            });
        });
    });

(2) $.get() 메소드

• 서버에서 GET 방식의 HTTP 요청 가능
• $.get(URL주소[,콜백함수]);
  • URL : 클라이언트가 HTTP 요청을 보낼 서버의 주소
  • 콜백함수 : HTTP 요청이 성공했을 때 실행할 함수

$(function() {
    $("#requestBtn").on("click", function() {

        // GET 방식으로 서버에 HTTP 요청을 보냄.
        $.get("/examples/media/jquery_ajax_data.txt",

        function(data, status) {
            $("#text").html(data + status); // 전송받은 데이터와 전송 성공 여부를 보여줌.
        });
    });
});

(3) $.post() 메소드

• 서버에 POST 방식의 HTTP 방식 요청을 보낼 수 있음
• $.post(URL주소[,데이터][,콜백함수]);
  • URL : 클라이언트가 HTTP 요청을 보낼 서버의 주소
  • 데이터 : HTTP 요청과 함께 서버로 보낼 데이터를 전달
  • 콜백 함수 : HTTP 요청이 성공했을 때 실행할 함수

$(function() {

    $("#requestBtn").on("click", function() {

        // POST 방식으로 서버에 HTTP 요청을 보냄.
        $.post("/examples/media/request_ajax.php",
            { name: "이순신", grade: "A+" },             // 서버가 필요한 정보를 같이 보냄.

            function(data, status) {
                $("#text").html(data + "<br>" + status); // 전송받은 데이터와 전송 성공 여부를 보여줌.
            }

        );
    });
});

(4) load() 메소드

• 선택한 요소에서 호출하는 유일한 제이쿼리 AJAX 메소드
• 서버에서 데이터를 읽어들인 후에 해당 HTML 코드를 선택한 요소에 배치
• 선택자를 URL 주소와 함께 전송하면 읽어들인 HTML 코드 중에서 선택자와 일치하는 요소만을 배치

  $(function() {
      $("#requestBtn").on("click", function() {
  
          // URL 주소에 존재하는 HTML 코드에서 <li>요소를 읽은 후에 id가 "list"인 요소에 배치함.
          $("#list").load("/examples/tryit/htmlexample/jq_elementTraversing_etc_01.html li");
      });
  });

  • load 메소드의 인수로 url 주소와 함께 선택자를 전달할 때 위의 예제와 같이 하나의 문자열로 전송해야함
    • url 주소와 선택자는 띄어쓰기로 구분 가능

 

 

---

http://www.tcpschool.com/ajax/intro

코딩교육 티씨피스쿨