프로그래밍 일기 — AJAX
아쉽지만 축구팀 아약스(Ajax)는 아니다
오늘은 프론트엔드 작업을 하는 날이었는데, 우리가 모두 백엔드 엔지니어를 희망해서인지 프론트엔드의 언어인 JavaScript에 매우 약했다. 아무리 백엔드를 강조한 서버라고해도, 프론트엔드 상에서의 구현은 필수다. 유저가 서비스와 상호 작용할 수 있는 인터페이스가 없다면 서비스는 가치가 매우 떨어질 것이다.
그런데 막상 프론트엔드를 구현하려고보니 생각보다 너무 어려웠다. 우리가 원하는 데이터를 유저에게서 받고, 이를 다시 서버에 전달해 처리해 유저에게 전달해주는 것이 생각보다 쉬운일이 아니라는 생각이들었다. 데이터 처리에 관심이 많았던 나에게 프론트엔드는 외계어처럼 느껴졌다. 어디서 부터 시작해야할지 모르겠다는 생각이들었다.
그러던 중, 지난 번 과정에서 JavaScript상에서 ajax 라는 규약을 활용해 http 요청을 처리한 것을 떠올렸다. 그래서 이 것이 무엇인지 알아야 할 것 같다는 느낌이 들었다. 왠지 프론트엔드의 문제를 해결할 열쇠가 여기에 있는 느낌이다. 그래서 오늘 글에서는 이 개념에 대해 짚어보려한다.
AJAX(Asynchronous JavaScript and XML)
서버와 비동기화(asynchronous) 커뮤니케이션을 하기 위한 개념을 말한다. 프론트엔드에서 서버에 요청을 보내기위한 웹 프로그래밍의 데이터 전송 방식이라 할 수 있다. Ajax는 서버에서 데이터를 읽어오고 웹 페이지를 업데이트하며, 현재 클라이언트의 페이지 상태와 상관없이 데이터를 서버에 보낼 수 있다. 이 규약에는 XMLHttpRequest 라는 Object타입의 데이터, 혹은 jQuery 및 fetch() API가 활용되며, 이를 통해 서버와 데이터를 교환한다.
방식 1 — XMLHttpRequest 활용
XMLHttpRequest() 메서드는 XMLHttpRequest 객체를 생성하고, 이를 서버에 데이터 요청을 위해 활용할 수 있다. 주로 다음과 같은 문법을 갖는다.
let xhttp = new XMLHttpRequest();
위 문법은 XMLHttpRequest 객체를 만들기 위함이다. 이 객체는 서버에 대이터 송신 및 수ㅣ, 혹은 서버의 응답에 관여할 수 있는 여러 메서드를 제공한다. 응답에서는 서버에서 출력한 문자열(string)값을 받아온다.
아래 예제에서는 XMLHttpRequest 객체를 통해 Ajax 요청을 하는 코드를 보여준다. 먼저 객체를 생성하고, 연결한 url에 .open() 메서드로 HTTP요청의 타입을 정의한다. 이후, 요청이 성공하면 응답 문자열을 출력하는 함수를 호출한다. 마지막으로 요청을 백엔드로 전송하는 것이다.
function run() {
// 1. XMLHttpRequest 객체 생성
let xhr = new XMLHttpRequest();
// 2. url로 연결하기
let url = 'https://jsonplaceholder.typicode.com/todos/1';
xhr.open("GET", url, true);
// 3. 요청 성공 시 응답 문자열 출력하는 함수 호출
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
}
// 4. 요청 전송
xhr.send();
}
run();
// 결과값
"{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}"방법 2 — jQuery 사용
jQuery 에서는 ajax() 메서드를 지원하여 ajax 호출을 한다. 만약 ajax 호출을 하는데 있어 그 어떤 방법도 통하지 않는다면 확실한 대안으로써 활용가능하다. 기본적인 문법은 아래와 같다.
$.ajax({arg1: value, arg2: value, ... });매개변수(parameter)는 응답혹은 에러를 수신할 때 호출하는 함수(function) 및 URL과 type을 설정하는 설정 파일(configuration file)을 받는다.
아래 예제는 기본적인 HTML 페이지 내에서 JavaScript를 활용해 요청할 URL, type 및 요청 성공과 실패시 수행할 것들을 정의하는 코드이다.
<!DOCTYPE HTML>
<html>
<head>
<!-- jQuery 소스 선언 -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<script>
function ajaxCall() {
$.ajax({
// 1. 요청을 생성할 url 정의
url:
'https://jsonplaceholder.typicode.com/todos/1',
// 2. HTTP 요청 타입 정의
type: "GET",
// 3. 성공시 호출할 함수 정의
success: function (data) {
let x = JSON.stringify(data);
console.log(x);
},
// 4. 에러시 호출할 함수 정의
error: function (error) {
console.log(`Error ${error}`);
}
});
}
ajaxCall();
</script>
</body>
</html>
// 결과값 예제
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}방법 3 — Fetch() API를 활용
서버에 XMLHttpRequest 를 만들어 보내기 위해 fetch() API를 활용할 수 있다. 장점은 유연한 구조를 가지고 있어, 사용이 용이하다는 것이다. 이 API는 서버에 요청을 하고 결과값을 promise 라는 형태로 받는데, 문자열(string)값으로 변환할 수 있다. 기본적인 문법은 다음과 같다.
fetch(url, {config}).then().catch();매개변수(parameter)는 URL을 받아 매개변수를 통해 요청에 대한 설정을 한다. 데이터를 보내기전에 필요한 설정을 완료하고 서버에 보낼 수 있다. 요청이 promise 라는 형태로 반환되기 때문에, then() 및 catch() 메서드를 활용해 결과값을 원하는 형태로 출력할 수 있다. 주로 문자열의 형태로 값을 처리해 출력하는 경우가 많다.
// 1. 요청에 대한 URLUrl for the request
let url = 'https://jsonplaceholder.typicode.com/todos/1';
// 2. 요청 정의하기
fetch(url, { method: 'GET' })
.then(Result => Result.json())
.then(string => {
// 3. 요청을 문자열로 출력
console.log(string);
// 4. 응답에 대한 필드 값 출력
console.log(`Title of our response : ${string.title}`);
})
.catch(errorMsg => { console.log(errorMsg); });
// 출력값
{ userId:1 ,id:1 ,title : "delectus aut autem" ,completed : false
__proto__:Object }
Title of our response : delectus aut autem참조:
(1) https://pixabay.com/photos/crane-houses-architecture-cologne-7518536/
