[jQuery] AJAX (Asynchronous Javascript And XML)

load method

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

    load method의 syntax는 위와 같다. 첫번째 매개변수인 'URL'은 필수 인자이며, 나머지 두 매개변수는 선택 인자이기 때문에 추가해도 되고 안해도 된다. 그리고 콜백 함수의 매개변수는 다음과 같다.

responseTxt - load에 성공하면 결과값을 가지고 있다.

statusTxt - load의 결과 상태를 가지고 있다.

xhr - XMLHttpRequest 객체를 가지고 있다.

    콜백을 사용한 함수의 예제는 아래와 같다.

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("External content loaded successfully!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

get method

$.get(URL, callback);

    get method의 syntax는 위와 같다. 첫번째 매개변수인 'URL'은 필수 인자이며, 나머지 매개변수인 callback은 선택 인자이기 때문에 추가해도 되고 안해도 된다. 그리고 콜백 함수의 매개 변수는 다음과 같다.

data - get method가 성공하면 결과값을 가지고 있다.

status - get method가 결과 상태를 가지고 있다.

    콜백을 사용한 함수의 예제는 아래와 같다.

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

post method

$.post(URL, data, callback);

    post method의 syntax는 위와 같다. 첫번째 매개변수인 'URL'은 필수 인자이며, 나머지 두 매개변수는 선택 인자이기 때문에 추가해도되고 안해도 된다. 그리고 콜백 함수의 매개변수는 다음과 같다.

data - post method 성공하면 결과값을 가지고 있다.

status - post method 결과 상태를 가지고 있다.

    콜백을 사용한 함수의 예제는 아래와 같다.

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

ajax method

$.ajax({name:value, name:value, name:value, ... });

    ajax method의 syntax는 위와 같다. ajax method는 앞의 다른 method보다 더욱 상세한 설정을 할 수 있다. 각 매개변수의 name:value 쌍으로 설정이 가능하다. 각 설정은 아래와 같다 자세한 내용을 jQuery 사이트에서 확인가능하다.

ajax(), get(), post(), load()의 차이

    $.ajax() - HTTP를 매우 효과적으로 조작할 수 있는 가장 적절한 것이다. method를 통해 XMLHttpReuqest 객체에 직접 접근이 가능하다. 그리고 에러 핸들링도 제공한다. 가끔 복잡하고 불필요하게 느껴질 수도 있지만 매우 유용하다. 대신, 사용할 때에 return data와 calback을 다루어야만 한다.

    $.get() - ajax()의 축약형으로 세부 설정 사항을 제거했다. 감춰진 설정 값은 기본 값으로 설정되어 있다. data를 callback한다. GET 방식에 대해서만 사용 가능하다.

    $.post() - ajax()의 축약형으로 세부 설정 사항을 제거했다. 감춰진 설정 값은 기본 값으로 설정되어 있다. data를 callback한다. POST 방식에 대해서만 사용 가능하다.

    $.load() - '$.get()'과 비슷하다. 하지만 return data에서 Document에 삽입할 부분을 정의할 수 있다.

출처 : http://www.w3schools.com