[jQuery]AJAX

AJAX는 전체 페이지를 다시로드하지 않고 서버와 데이터를 교환하고,

 

웹 페이지의 일부를 업데이트하는 기술입니다.

 

 

 

대표적인 메서드를 알아보겠습니다.

 

load() - 서버에서 데이터를 로드하고 반환 된 데이터를 선택한 요소에 저장합니다.

 

$(selector).load(URL,data,callback);

 

URL매개변수는 로드하려는 URL을 지정합니다. 필수 요소입니다.

 

data 매개 변수는 요청과 함께 보낼 쿼리 문자열 키/값 쌍의 집합을 지정합니다.

 

콜백 매개 변수는 load() 메서드가 완료된 후 실행할 함수의 이름입니다.

 

 

 

다음 예제에서는 "demo_test.txt"파일의 내용을 특정 <div> 요소에 로드합니다.

 

$("#div1").load("demo_test.txt");

직접해보기

 

 

 

 

 

 

 

다음 예제에선 "demo_test.txt"파일의 id = "p1"인 요소의 내용을 특정 <div>요소로 로드합니다.

 

$("#div1").load("demo_test.txt #p1");

 

 

 

 

 

 

 

 

 

클라이언트와 서버간의 요청 - 응답에 일반적으로 사용되는 두 가지 방법은 GET과 POST입니다.

 

GET - 기본적으로 서버에서 일부 데이터를 가져 오는 데 사용됩니다.

 

POST - 주로 데이터를 보내는 데 사용됩니다.

 

 

 

$.get() - HTTP GET 요청으로 서버에 데이터를 요청합니다.

 

$.get(URL,callback);

 

$("button").click(function(){
    $.get("demo_test.asp", function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

 

직접해보기

 

 

 

 

 

 

 

 

$.post() - HTTP POST 요청을 사용하여 서버의 데이터를 요청합니다.

 

$.post(URL,data,callback);

 

 

$("button").click(function(){
    $.post("demo_test_post.asp",
    {
        name: "Donald Duck",
        city: "Duckburg"
    },
    function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

직접해보기

 

 

 

 

출처:https://www.w3schools.com/jquery/