안녕하세요. 명월입니다.
이 글은 Jquery의 ajax 사용 방법에 관한 설명입니다.
사실 이 글은 제가 거의 10년전에 작성한 글인데 현재의 사양과 다른 부분이 있어서 다시 작성했습니다.
ajax는 웹 프로그램에서 단GET, POST의 웹 요청과 응답 기능이 아닌 자바스크립트로 웹 서버와 비동기 통신을 위한 웹 개발 기법입니다. 단순하게 웹 화면의 재 요청없이 자바스크립트 만을 이용해 서버와 데이터를 주고 받는 방식입니다.
바닐라 버전에서의 ajax를 구현하려고 하면 XMLHttpRequest 클래스를 이용해서 사용해야 하고 꽤나 복잡한 구조를 만들어야 합니다만 Jquery 라이브러리에서는 기본적인 설정은 다 구현이 되어 있고 json타입의 필요한 파라미터만 넘기는 방법으로 ajax를 사용할 수 있게 만들었습니다.
링크 - https://api.jquery.com/jquery.ajax/
위 메뉴얼을 보면 꽤나 많은 파라미터가 있습니다만, 사실 전부 다 작성할 필요는 없고 가장 중요한 url과 메소드 타입 그리고 done함수가 기본 형식입니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<label class="console-area"></label>
<!-- Jquery의 cdn을 연결한다. -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function(){
// ajax 선언
var ajax = $.ajax({
type: "GET", // 요청 메소드 타입
url: "data.txt" // 접속 url
});
// 결과
ajax.done(function(data){
// 위 라벨 태그에 결과를 입력한다.
$(".console-area").html(data);
}) ;
});
</script>
</body>
</html>
그리고 제가 data.txt 파일에는 hello world라는 글만 작성했습니다.
결과가 hello world가 나옵니다.
사실 여기까지가 가장 기본적인 형식이고 자주 사용하는 파라미터도 함께 소개하겠습니다.
ajax를 파일 통으로 읽는 방법보다는 아마 json형식의 데이터를 많이 사용할 꺼라 생각합니다. 위 로직에서 단순히 string 형식의 데이터를 받고 JSON.parse를 통해서 string형식의 데이터를 json형식의 구조체로 변경이 가능합니다만 ajax 함수에는 이것까지 처리해 주는 파라미터가 있습니다.
제가 data.txt 파일을 위와 같이 json 타입으로 작성헀습니다.
파라미터에는 dataType을 추가했습니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<label class="console-area"></label>
<!-- Jquery의 cdn을 연결한다. -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function(){
// ajax 선언
var ajax = $.ajax({
type: "GET", // 요청 메소드 타입
url: "data.txt", // 접속 url
dataType: 'json' // 응답 메시지의 타입
});
// 결과
ajax.done(function(data){
var str = "";
$(data).each(function(){
str += this.index + " " + this.data + "<br />";
});
$(".console-area").html(str);
});
});
</script>
</body>
</html>
위의 결과가 나오는 것입니다.
그리고 웹 요청시에 data의 파라미터로 웹 요청 파리미터도 넘길 수 있습니다. 그리고 done의 경우는 웹 응답 코드가 200, 즉 정상일 때 호출되는 함수입니다만 에러가 발생했을 경우 그리고 응답 코드와 관계없이 호출되는 함수는 각각 fail과 always함수가 있습니다.
그리고 위 결과는 비동기 형식으로 움직이는 것이 기본입니다만(비동기란 웹 요청의 응답을 기다리지 않고 다음 로직으로 넘어가는 방식입니다.), 응답을 기다리는 방법도 있습니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<label class="console-area"></label>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function(){
var ajax = $.ajax({
type: "GET",
url: "nothing.txt", // 실제로는 존재하지 않는 파일이다.
dataType: 'json',
async: false, // 동기식
data: {"id" : "test"} // 파라미터
});
var str = "";
ajax.done(function(data){
str += "done" + "<br />";
});
ajax.fail(function(){
str += "fail" + "<br />";
});
ajax.always(function(){
str += "always" + "<br />";
});
// 비동기 식이라면 위 done이나 fail 그리고 always가 출력이 되지 않는다.
// 왜냐하면 str을 아래 라벨 태그에 넣고 난 후에 str에 데이터가 들어가 버리기 때문이다.
str += "wait or continue??" + "<br />";
$(".console-area").html(str);
});
</script>
</body>
</html>
위 결과를 보면 GET방식의 파라미터가 들어간 것을 볼 수 있습니다. 만약 type이 POST방식이라면 data의 파라미터는 form 파라미터로 넘어가게 됩니다. 그리고 비동기 형식은 동기로 맞추었기 때문에 done이나 fail, always가 실행된 후에 wait or continue라는 로직이 실행됐습니다. 물론 라벨 태그의 데이터가 들어간 것까지입니다. 만약 비동기식이라면 응답을 기다리기 전에 라벨에 str값이 들어가 버리기 때문에 done, fail always값이 나오지 않습니다.
그리고 nothing.txt라는 파일은 서버에 존재하지 않기 때문에 당연히 404에러로 응답이 왔습니다. 그럼 done이 아닌 fail함수가 실행되고 always는 200(정상)이던 200(정상)이 아니던 관계없이 실행되는 함수이므로 fail, always가 실행됩니다.
그 밖에 ajax의 파라미터는 엄청 많습니다. 가장 자주 사용되는 파라미터는 여기에 소개가 되었고 좀 더 자세한 제어를 원하면 도큐멘트를 참조하여 작성하면 됩니다.
링크 - https://api.jquery.com/jquery.ajax/
여기까지 Jquery의 ajax 사용 방법에 대한 설명이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Development note > Javascript, JQuery, CSS' 카테고리의 다른 글
| [Jquery] Sortable(마우스 드래그 앤 드롭으로 리스트 정렬) (0) | 2019.10.24 |
|---|---|
| [Jquery] 다이얼로그 Dialog (0) | 2019.10.23 |
| [Jquery] 달력 라이브러리 Datepicker (0) | 2019.10.21 |
| [Jquery] CSS로 작성 된 loader 마크 (0) | 2019.10.16 |
| [Javascript] window.history (0) | 2019.09.02 |
| [Javascript] Clipboard를 사용하는 방법(Ctrl + c 할때 출처 붙이기) (0) | 2019.08.20 |
| [Jquery] ajax에서 동기화 작업하는 방법 (0) | 2019.07.15 |
| [Jquery] ajax를 이용해 파일 업로드하는 방법 (2) | 2019.06.16 |