..

Search

15) 기타 메소드

기타 메소드


$.get() 메소드

제이쿼리에서는 Ajax를 이용하여 GET 방식의 HTTP 요청을 구현한 $.get() 메소드를 제공합니다.

이 메소드를 사용하면 서버에 GET 방식의 HTTP 요청을 보낼 수 있습니다.

 

$.get() 메소드의 원형은 다음과 같습니다.

원형

$.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); // 전송받은 데이터와 전송 성공 여부를 보여줌.

        });

    });

});

코딩연습 ▶


$.post() 메소드

제이쿼리에서는 Ajax를 이용하여 POST 방식의 HTTP 요청을 구현한 $.post() 메소드를 제공합니다.

이 메소드를 사용하면 서버에 POST 방식의 HTTP 요청을 보낼 수 있습니다.

 

$.post() 메소드의 원형은 다음과 같습니다.

원형

$.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); // 전송받은 데이터와 전송 성공 여부를 보여줌.

            }

        );

    });

});

코딩연습 ▶


load() 메소드

load() 메소드는 선택한 요소에서 호출하는 유일한 제이쿼리 Ajax 메소드입니다.

 

load() 메소드는 서버에서 데이터를 읽어 들인 후에 해당 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 주소와 선택자는 띄어쓰기로 구분할 수 있습니다.

 

다음 예제는 test.txt 파일 내에서 아이디가 para인 요소만을 읽어 들여, 아이디가 box인 요소 안에 배치하는 예제입니다.

예제

$("#box").load("test.txt #para");


Ajax 메소드

제이쿼리는 $.ajax() 메소드뿐만 아니라 Ajax와 관련된 다양한 메소드를 제공하고 있습니다.

메소드 설명
$.ajax() 비동기식 Ajax를 이용하여 HTTP 요청을 전송함.
$.get 전달받은 주소로 GET 방식의 HTTP 요청을 전송함.
$.post 전달받은 주소로 POST 방식의 HTTP 요청을 전송함.
$.getScript 웹 페이지에 스크립트를 추가함.
$.getJSON 전달받은 주소로 GET 방식의 HTTP 요청을 전송하여, 응답으로 JSON 파일을 전송받음.
load() 서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 배치함.

연습문제