[jQuery] ajax 사용하는 방법

[jQuery] ajax 사용하는 방법

 

웹브라우저에서 비동기식 데이터 통신을 할때 가장 많이 사용하는 것이 jQuery의 ajax 이다.

사용방법은 $.ajax 이다.

기본 문법은 아래와 같다.

[기본형]

jQuery.ajax( [setting] )

[예 1]

$.ajax({  

      url: url,  

      data: data,  

      success: success,  

      dataType: dataType  

});  

setting 은 jQuery ajax 통신을 위한 옵션을 담고 있는 객체가 들어 간다.

url : 요청 Url

data : 요청과 함께 서버로 데이터를 전송 할 string 또는 map

dataType : 서버측에서 전송받은 데이터의 형식 (default : xml, json, script, text, html)

seccess (PlainObject data, String textStatus, jqXHR jqXHR) : 요청이 성공 했을 때 호출할 콜백 함수

type : 데이터를 전송하는 방법 (get, post)

$.post()

• 서버에서 데이터를 http post 방식으로 전송한 후 서버 측 응답을 받을 때 사용한다.

$.ajax({

      type: 'POST',

      url: url,

      data: data,

      success: success,

      dataType: dataType

});

실제 사용방법은 아래와 같다.

[예 1]

// 요청 Url 만 , 리턴 결과값 무시  

$.post("http://domain/test/");

// 요청 Url + 추가적으로 보내는 Json Data, 리턴 결과값 무시

$.post("http://domain/test/", { fruit1: "apple", fruit2: "banana" } );

// 요청 Url + 추가적으로 보내는 Array Data, 리턴 결과값 무시

$.post("http://domain/test/", { 'fruits[]': ["apple", "banana"] });

// 요청 Url + 폼데이터, 리턴 결과값 무시

$.post("http://domain/test/", $("#form1").serialize());

// 요청 Url, xml(또는 html)리턴 결과값

$.post("http://domain/test/", function(data) {    alert("Data Loaded: " + data);  });

// 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값, 결과값 형식

$.post("http://domain/test/", { fruit1: "apple", fruit2: "banana" }, function(data) {    process(data);  },   "xml" );

// 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값(json 다루는 형식), 결과값 형식

$.post("http://domain/test/", { "func": "getFruits" },

      function(data){

                     console.log(data.fruit1); // apple

                     console.log(data.fruit2); // banana

      }, "json");

$.get()

• 서버에서 데이터를 http get 방식으로 전송한 후 서버 측 응답을 받을 때 사용한다.

$.ajax({

      type: 'GET',

      url: url,

      data: data,

      success: success,

      dataType: dataType

});

실제 사용방법은 아래와 같다.

[예 1]

// 요청 Url 만 , 리턴 결과값 무시  

$.get("http://domain/test/");

// 요청 Url + 추가적으로 보내는 Json Data, 리턴 결과값 무시

$.get("http://domain/test/", { fruit1: "apple", fruit2: "banana" } );

// 요청 Url + 추가적으로 보내는 Array Data, 리턴 결과값 무시

$.get("http://domain/test/", { 'fruits[]': ["apple", "banana"] });

// 요청 Url, xml(또는 html)리턴 결과값

$.get("http://domain/test/", function(data) {    alert("Data Loaded: " + data);  });

// 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값, 결과값 형식

$.get("http://domain/test/", { fruit1: "apple", fruit2: "banana" }, function(data) {    process(data);  },   "xml" );

// 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값(json 다루는 형식), 결과값 형식

$.get("http://domain/test/", { "func": "getFruits" },

      function(data){

                     console.log(data.fruit1); // apple

                     console.log(data.fruit2); // banana

      }, "json");

$.getJSON()

• 서버에서 데이터를 http get 방식으로 전송한 후 서버 측 응답을 JSON 형식으로 받을 때 사용한다.

$.ajax({

      type: 'GET',

      url: url,

      data: data,

      success: success,

      dataType: 'json'

});

실제 사용방법은 아래와 같다.

[예 1]

// 요청 Url + 추가적으로 보내는 Json Data, 리턴결과값(json 다루는 형식), 결과값 형식

$.getJSON("http://domain/test/", { "func": "getFruits" },

      function(data){

                     console.log(data.fruit1); // apple

                     console.log(data.fruit2); // banana

      });

$.ajax()

• 서버에서 데이터를 http get, post, json 의 모든 방식으로 전송한 후 서버 측 응답을 받을 때 사용한다.

$.ajax({

      type: 'GET',

      url: url,

      data: data,

      success: success,

      dataType: dataType

});

실제 사용방법은 아래와 같다.

[예 1]

// 요청 Url + 추가적 데이터, 완료된 후 리턴 메시지를 받음

$.ajax({

      type: "POST",

      url: "http://domain/test/",

      data: { fruit1: "apple", fruit2: "banana" }

}).done(function( msg ) {

      alert( "Data Saved: " + msg );

});

// 최종 버전 리턴 Html 가져오기

$.ajax({

      url: "http://domain/test/",

      cache: false

}).done(function( html ) {

      $("#fruits").append(html);

});

// 서버에 데이터를 보낸 후 저장처리, 그리고 사용자에게 리턴 완료 메시지 반환

var fruitsId = $("ul.fruits").first().attr("id");

var request = $.ajax({

    url: "http://domain/test/",

    type: "POST",

    data: {id : fruitsId},

    dataType: "html"

});

request.done(function(msg) {

    $("#log").html( msg );

});

request.fail(function(jqXHR, textStatus) {

    alert( "Request failed: " + textStatus );

});

// 자바 스크립트 로딩 및 실행

$.ajax({

    type: "GET",

    url: "fruits.js",

    dataType: "script"

});

$.ajaxSetup()

• ajax 통신을 위한 옵션을 미리 설정한다.

실제 사용방법은 아래와 같다.

[예 1]

// 미리 ajaxSetup에 옵션들을 설정 한 후 ajax 로 호출

$.ajaxSetup({

      type: "POST",

      url: "http://domain/test/",

      global: false,

});

$.ajax({ data: { fruit1: "apple" } });

$.ajax({ data: { fruit2: "banana" } });

$.load()

• 외부 데이터를 받을 때 사용한다.

실제 사용방법은 아래와 같다.

[예 1]

//  Html Content 로딩

$('#fruits').load('ajax/test.html');

//  Html Content 로딩 후 메시지

$('#fruits').load('ajax/test.html', function() {

  alert('완료.');

});

//  Html Content #container Target 로딩

$('#fruits').load('ajax/test.html #fruits');

//  array parameter 전달 후 Html Content 로딩

$("#fruitsID").load("ajax/test.html", { 'fruits[]': ["apple", "banana"] } );