Ajax에 대해 알아보자.
Ajax (Asynchronous Javascript and XML)
Ajax란 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나입니다.
Javsscript의 라이브러리 중 하나로 XMLHttpRequest 객체*를 이용해 웹 페이지 전체를 다시 로딩하지 않고, 웹 페이지의 일부분만을 갱신할 수 있습니다.
백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다.
즉, JS를 통해서 서버에 데이터를 요청하는 것입니다.
주고 받을 수 있는 데이터 형태는 JSON, XML, HTML, 텍스트 파일 등 다양하며, 주로 GET 방식, POST 방식 통신에 사용된다.
Vanilla JS (순수 자바스크립트)
관련 메서드
Open() 메서드
Ajax 요청을 초기화하고 요청 방식과 주소 및 동기화 여부를 지정하는 메서드입니다.
사용법 :
open(method, url [,async]);인자 의미 method http 요청 전달 방식 지정 (GET, POST) url 요청할 페이지의 URL 주소 async 비동기 통신 여부 (default : true) Send() 메서드
작성된 Ajax 요청을 서버로 전달하는 메서드입니다.
사용법 :
send(body);- body 인자에는 요청과 함께 서버로 보낼 데이터를 지정합니다.
- POST 방식일 때만 인수를 갖습니다.
실행 순서
XMLHttpRequest API를 이용하여 객체를 생성합니다.
1
var xhr = new XMLHttpRequest();
서버의 응답을 받았을 때 동작할 callback 함수를 만듭니다.
요청의 상태값 (readyState 값) 검사 필요
![readyState]()
참고 글 : MDN 사이트)
HTTP 응답 상태 코드 검사 필요
특정 HTTP 요청의 결과를 알려줍니다. (200 : OK, 404 : Not Found 등)
참고 글 : HTTP 상태 코드)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
//callback xhr.onreadystatechange = function () { // 서버의 응답에 따른 로직을 여기에 작성합니다. if (xhr.readyState === XMLHttpRequest.DONE) { // 요청의 상태값 이상 없음, 응답 받았음 if (xhr.status === 200) { // HTTP 응답 코드 이상 없음! // 처리 작성 ! } else { // 요구를 처리하는 과정에서 문제가 발생되었음 // 예를 들어 응답 상태 코드는 404 (Not Found) 이거나 // 혹은 500 (Internal Server Error) 이 될 수 있음 } } else { // 아직 준비되지 않음 } };
URL, Http Method 방식(GET, POST), 비동기 여부, Content-Type을 설정합니다.
1 2 3
xhr.setRequestHeader(‘Content-Type’, ‘application/json’); // POST 방식에서는 요청의 MIME type 설정 필요 xhr.open('GET', 'url', true);
서버에 요청을 보냅니다.
1
xhr.send();
응답 데이터 접근
xhr.responseText서버의 응답을 텍스트 문자열로 반환합니다.
xhr.responseXML서버의 응답을 XMLDocument 객체로 반환합니다.
반환된 객체는 DOM 함수들로 다룰 수 있다.
간단 예제
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<button id="reqBtn" type="button">Ajax request</button>
<script>
var xhr;
document.getElementById("reqBtn").addEventListener('click', ajaxRequest);
const ajaxRequest = () => {
xhr = new XMLHttpRequest();
if(!xhr) {
alert('객체를 생성할 수 없습니다.');
return false;
}
xhr.onreadystatechange = alertContents;
xhr.open('GET', url, true);
xhr.send();
}
const alertContents = () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
alert(xhr.responseText);
} else {
alert('HTTP 요청에 문제 발생 - 상태 코드를 확인하세요.');
}
}
}
사용자는 브라우저 상의 Ajax request 라는 버튼을 클릭합니다.
버튼의 클릭 이벤트 핸들러는
ajaxRequest()함수를 호출합니다.브라우저는 서버로 요구를 보내고 onreadystatechange 에 설정된
alertContents()함수가 수행됩니다.alertContents()함수는 서버로부터 응답을 받았는지와 정상적으로 처리된 응답인지를 검사하여 정상적인 경우 텍스트로 반환된 내용을alert()함수로 호출합니다.
JQuery (제이쿼리)
JQuery를 이용하면 Ajax를 간단하고 직관적으로 구현 할 수 있습니다.
XMLHttpReaquest를 직접 사용할 때 보다 코드가 짧아지며, 호환성 문제 (크로스 브라우징)도 JQuery가 잡아주기 때문에 편리합니다.
간단하게 제일 핵심이 되는 메서드인 $.ajax만 알아보겠습니다.
Ajax 메서드
$.ajax
jQuery Ajax 메서드의 핵심이 되는 통합 메서드입니다.
형식
jquery.ajax(url [, setting])Property
![JQuery-Ajax-Property]()
사용 예제
1 2 3 4 5 6 7 8 9 10 11 12 13 14
$.ajax({ url : 요청 url, method : "get" or "post", data : data, error : function(error) { alert("Error!"); }, success : function(data) { alert("success!"); }, complete : function() { alert("complete!"); } });
메서드 체이닝 (method chaining)
![JQuery-Ajax-chaining]()
callback 함수를 메서드 체이닝으로도 구현 할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
$.ajax({ url: 요청 url, // 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소 data: { `key`: value }, // HTTP 요청과 함께 서버로 보낼 데이터 method: "GET" or "POST", // HTTP 요청 메서드(GET, POST 등) dataType: "json" // 서버에서 보내줄 데이터의 타입 }) // HTTP 요청이 성공하면 요청한 데이터가 done() 메서드로 전달됨. .done(function(json) { alert("성공"); }) // HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메서드로 전달됨. .fail(function(xhr, status, errorThrown) { alert("실패"); }) // .always(function(xhr, status) { alert("완료"); });
