AJAX? 생활코딩을 통해 알아봅시다!

• 생활코딩 AJAX 강의 - https://opentutorials.org/course/1375/6843

AJAX (Asynchronous Javascript And XML)이란 웹 브라우저에서 자바스크립트를 이용하여 비동기로 서버와 통신하는 것을 의미합니다.

다른 관점에서 말하자면, 페이지의 이동 없이도 서버로부터 데이터를 받아 올 수 있는 기술을 의미합니다.

이러한 AJAX는 웹 브라우저에 있는 XHR (XMLHttpRequest) 객체와 자바스크립트의 조합입니다.

자바스크립트에 있는 XMLHttpRequest 객체를 통해 서버와 통신을 하고, 그 값들을 자바스크립트를 통해서 다룹니다.

이러한 XHR 객체만을 가지고도, 서버와 비동기 통신을 할 수 있으나, XHR 객체를 곧바로 사용하기에는 여러가지 고려해야 할 부분들이 있습니다.

그래서 널리 쓰이는 자바스크립트 라이브러리인 jQuery에는 XHR 객체를 이용하여 Ajax 함수를 쓰기 쉽도록 구현되어 있습니다.

이 문제에서는, XHR 객체를 이용하여 jQuery에 있는 Ajax 함수인 $.get함수와 $.post 함수와 유사한 함수를 구현하는 것이 목표입니다.

오른쪽 상단의 실행 버튼을 누르면 오른쪽 하단에 URL이 나타납니다.

템플릿 코드에 있는 "GET 요청" 버튼과, "POST 요청" 버튼을 누르면 각각 지정된 서버 url로 요청을 보내고, 응답 값을 회색 메시지 바에 나타나게 되어 있습니다.

버튼을 누르면 정상적으로 서버와 통신을 할 수 있도록 index.html 에 하단의 $객체 안에 있는 get함수와 post함수를 구현해보세요.

정답 코드에서 좌측의 "GET 요청" 버튼을 눌렀을때 화면입니다.

정답 코드에서 우측의 "POST 요청" 버튼을 눌렀을때 화면입니다.

함수 구현에는 다음과 같은 요구사항이 있습니다.

1. jQuery 라이브러리를 사용하지 말 것. 사용 시 오답처리 한다.

2. 해당 ajax 함수는 채점 시 정상적인 서버로 통신하는 경우만 고려한다. 즉 HTTP 응답이 200일 경우만 고려하여 작성하면 된다.

3. GET방식 요청과 POST 방식의 요청 둘 다 매개변수를 넘기는 경우를 고려한다. $.get 함수와 $.post 함수에서는 두번째 인자에 자바스크립트 객체 형태로 매개변수를 넘긴다고 가정한다. 단 매개변수는 URI 인코딩을 하지 않아도 되는 값(기본 영어 알파뱃 및 숫자)만 보낸다고 가정한다. 

4. 서버의 응답 값은 콜백함수를 통하여 전달한다. 또한 응답 값은 항상 자바스크립트 객체 형식(JSON)을 지키는 문자열이 온다고 가정한다.