[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()
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