[jQuery] 비동기통신 메소드 $.ajax(), $.get(), $.post() , load() 정리

Whait is AJAX?

Asynchronous JavaScript And XML의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법

 

Ajax 메소드의 종류

$.ajax()	비동기식 Ajax를 이용하여 HTTP 요청함
$.get()	HTTP GET 방식으로 요청 후 서버로부터 데이터를 받음
$.post()	HTTP POST 방식으로 요청 후 서버로부터 데이터를 받음
$.getScript()	HTTP GET 방식으로 요청 후 서버로부터 받은 JavaScript 파일을 로드하고 실행
$.getJSON()	HTTP GET 방식으로 요청 후 서버로부터 받은 JSON 파일을 로드하고 실행
.load()	URL로부터 HTML 데이트를 받고 jQuery 셀렉터로 선택된 위에 넣어 줌으로써 동적으로 페이지의 내용을 쉽게 교체함

 

$.ajax() 

jQuery.ajax( url [, settings] ) >> 1.5 이상버젼
jQuery.ajax( settings )  >> 1.0 이상버젼

$.ajax 기본 사용방법 및 주요 옵션

    $.ajax({
        url : requestURL,
        type : 'GET',
        async: true,
        data : JSON.stringify(requestParam),
        dataType : "json",
        timeout: 10000,    
        contentType:"application/json",        
        beforeSend:function(){
            $('.wrap-loading').removeClass('display-none');
        },
        complete:function(){
            $('.wrap-loading').addClass('display-none');
        },
        success : function(data){
            if(successFunction!=undefined){
                successFunction(data);
            }
        },
        error : function(request,status,error){
            alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
            var err=JSON.parse(request.responseText);
            
            alert(err.resData[0].errorMsg);
            if(errorFunction!=undefined){
                errorFunction();
            }
                
        $('.wrap-loading').addClass('display-none');
        },
        fail : function() {
            alert("인터넷 연결 상태를 확인해주세요.");
            $('.wrap-loading').addClass('display-none');
        }
    });
}

async (비동기 통신 여부)

 - true :  기본값, 비동기 (Asynchronous, 요청을 보낸 후 응답결과와는 상관없이 다음방식이 동작하는 방식)

 - false : false = 동기 (Synchronous, 요청을 보낸 후 응답결과를 받아야지만 다음 동작이 이루어지는 방식)

 

contentType ( 전송헤더의 타입)

 - 서버에 데이터를 보낼 때 사용 content-type 헤더의 값

 - application/json; charset-utf-8이 흔히 쓰인다. 디폴트는 application/x-www-form-urlencoded; charset=utf-8 임

 

dataType (서버에서 어떤 타입을 받을 것인지 정의)

 - text, html, xml, json, jsonp, and script 타입이 있음

 - {"success":true} 와 같은 구조의 값을 받으려면 dataType : "json"로 작성해야함

 - "success" 와 같은 문자열 값을 받으려면 dataType : "test"로 작성

 - <div>SUCCESS!!!</div> 와 같은 결과를 원한다면 dataType : "html"로 작성

 

timeout (요청제한시간)

 - 제한 시간 (밀리초)을 설정, $. ajaxSetup 에서 지정한 값을 통신에 따라 개별적으로 덮어쓸 수 있음

 - AJAX 요청의 제한 시간을 밀리 초 단위로 설정하며 제한 시간 안에 요청이 완료되지 않으면 요청을 취소하거나
error 콜백이 정의되어 있다면 호출됨

 

type ( HTTP 통신의 종류)

 - HTTP 통신의 종류를 설정, 기본값은 "GET"

 - GET, POST, PUT, DELETE 등등 존재

 - RESTful에 "PUT"또는 "DELETE"를 지정할 수 있지만 모든 브라우저가 지원하는 것은 아님

 

complete (function)

 - AJAX 통신 완료될 때 호출되는 함수. success이나 error가 호출된 후에 호출됨

 

beforeSend (function)

 - AJAX 요청전에 실행되는 함수, 반환값을 false로 설정하면 AJAX 전송을 취소함

 

error (function)

 - AJAX 통신에 실패했을 때 호출되는 콜백함수

 

success (function)

 - AJAX 통신에 실패했을 때 호출되는 콜백함수

 - 함수의 응답 본문은 이 함수의 첫 번째 매개변수로 전달되며 dataType 프로퍼티에 명시한 형태로 구성되고 - 두 번째 매개변수는 상태값을 나타내는 문자열이며 항상 success로 나타낸다

 

기타

JSON.stringify

 - JSON을 String 형태로 변환

JSON.parse

 - String을 JSON 형태로 변환

 

var temp = {
	name: "MK"
	,city : "SEOUL"
}

console.log(_stringify);
//결과
{"name":"MK","city":"SEOUL"} // 스트링 형태로 출력 

console.log(_parse);
//결과
{name: 'MK', city: 'SEOUL'} //jsonObject 형태로 출력

 

 

메소드 체이닝(method chaining)

메서드가 객체를 반환하게 되면, 메서드의 반환 값인 객체를 통해 또 다른 함수를 호출할 수 있다. 

 

done

 - HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달된다.

fail

 - HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달된다.

always

 - HTTP 요청이 성공하거나 실패하는 것에 상관없이 언제나 always() 메소드가 실행된다.

아래는 위의 기존 Ajax를 메소드체이닝으로 바꿔봤다.

$.ajax({
    url : requestURL,
    type : 'GET',
    async: true,
    data : JSON.stringify(requestParam),
    dataType : "json",
    timeout: 10000,    
    contentType:"application/json",        

})
// HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.  = success 콜백함수와 같음
.done(function(json) { 
    $("<h1>").text(json.title).appendTo("body");
    $("<div class=\"content\">").html(json.html).appendTo("body"); 
}) 
// HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달됨.  = error 콜백함수와 같음
.fail(function(xhr, status, errorThrown) {
    $("#text").html("오류가 발생했다.<br>") 
    .append("오류명: " + errorThrown + "<br>") 
    .append("상태: " + status); 
}) // 언제나 실행  = complete함수와 같음
.always(function(xhr, status) { 
    $("#text").html("요청이 완료되었습니다!"); 
});

 

 

$.ajaxSetup() 

공통적인 기본 ajax 요청을 미리 설정하는데 사용

$.ajaxSetup({ 
    url: "/apit/"	//미리정의
    , global: false
    , type: "POST" //미리정의
}); 

$.ajax({ data: sendData });

url,과 type를 미리정의해서 사용할 수 있다.

 

$.get() 

HTTP GET 방식으로 요청 후 서버로부터 데이터를 받음

- 데이터를 URL에 담에서 보낸다 

//example 1
// GET 방식으로 서버에 HTTP Request를 보냄. 

$.get("/get/example?name=ajax&age=10"
    , function(data, status){ 
        $("#text").html(data + "<br>" + status); 
    }
);


//example 2
$.get("/get/example?name=ajax&age=10"
    ,function(data) {
        alert("success" );
    }
    ,'json' /* xml, text, script, html */
)
.done(function(data) {
    alert("second success" );
})
.fail(function(data) {
    alert("error" );
})
.always(function(data) {
    alert("finished" );
});

 

$.post() 

HTTP POST 방식으로 요청 후 서버로부터 데이터를 받음

- 데이터를 Body에 담아서 보낸다.

//example 1
// POST 방식으로 서버에 HTTP Request를 보냄. 
$.post("/post/example"
    ,{name: "devmk", age: 3,}
    , function(data, status){ 
        $("#text").html(data + "<br>" + status); 
    }
);


//example 2
$.post("/post/example"
    ,{name: "devmk", age: 3,}
    ,function(data) {
        alert("success" );
    }
    ,'json' /* xml, text, script, html */
)
.done(function(data) {
    alert("second success" );
})
.fail(function(data) {
    alert("error" );
})
.always(function(data) {
    alert("finished" );
});

 

$.getJSON()

HTTP GET 방식으로 요청 후 응답을 JSON 형식으로 받을때 사용

$.getJSON("example?foo=1"
    , { tags: "mount rainier", tagmode: "any", format: "json" }
    , function(data) { 
        $.each(data.items, function(i,item) { 
            $("<img/>").attr("src", item.media.m).appendTo("#images"); 
            if(i == 3){
                return false; 
            }
        }); 
     }
 );

 

.load()

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

load() 메소드는 읽어 들인 HTML 코드를 선택한 요소에 표시한다.
또한, 선택자를 URL 주소와 함께 전송하면, 읽어 들인 HTML 코드 중에서 선택자와 일치하는 요소만을 배치함

 

//  Html Content 로딩  
$('#result').load('ajax/test.html');  
  
//  Html Content 로딩 후 메시지  
$('#result').load('ajax/test.html', function() {  
  alert('Load was performed.');  
});  
  
//  Html Content #container Target 로딩  
$('#result').load('ajax/test.html #container');  
  
//  array parameter 전달 후 Html Content 로딩  test.jsp로 choices[] 파라미터를 보냄
$("#objectID").load("test.jsp", { 'choices[]': ["Jon", "Susan"] } );  

$(function() {
    $("#btnRequest").on("click", function() {
        // URL 주소에 존재하는 HTML 코드에서 <li>요소를 읽은 후에 id가 "list"인 요소에 배치한다.
        $("#list").load("/examples.html li");
    });
    $("#btnRequest").on("click", function() {
        // URL 주소에 존재하는 HTML 코드에서 아이디가 id="temp"인 요소를 배치한다.
        $("#list").load("/examples.html #temp");
    });
});

 

본문의 참조

https://webinformation.tistory.com/22

https://araikuma.tistory.com/640?category=820803