제1회 구름코드챌린지(GCC) 기출 문제
    • 01
      텍스트 코딩 정복
    • 문자열 출력
      사칙연산
      절대값 출력하기
      배열에서의 최소값 구하기
      구구단 출력
      약수 구하기
      부분 문자열
      평균과 평균보다 큰 수
      등차 / 등비 수열
      약수의 합
      유일한 수
      피자 쿠폰
      접미사 배열
      멀티탭 사용
      숫자 찍기
    • 02
      알고리즘 정복
    • 완전수 구하기
      소수 판별
      괄호
      어느 고고학자 이야기
      팰린드롬
      채점하기
      구름컵 사이클 대회
      앞 뒤가 같은 수
      탈출
      섬나라 왕
    • 03
      웹 서비스 만들기
    • 자바스크립트 DOM 제어
      XHR이용하여 Ajax 구현
      PHP서버로 json 응답
    • 04
      GUI 앱 만들기
    • Swing으로 카운터 만들기
      AWT로 메모 입력기 만들기
    • 05
      블록 프로그래밍 정복
    • 탱크 이동하기
      탱크 방향전환
      탱크 여러번 방향전환1
      탱크 여러번 방향전환2
      최적의 길을 찾아가기
    • 06
      블록으로 알고리즘 정복
    • 대포발사
      방향전환
      이동한뒤 대포발사
      십자모양의 길
      복잡한 길 이동하기
    • 07
      로보코드 대전 (블럭)
    • 가만히 있는 적 격파하기
      움직이는 적 격파하기
      공격하는 적 격파하기
      대결1
      대결2
      제한시간 안에 적 격파하기
      2개 로봇 동시에 격파하기
      2개 로봇 동시에 격파하기2
      벽타는 로봇 격파하기
      3개 로봇 동시에 격파하기
    • 08
      로보코드 대전 (코드)
    • 몸풀기
      심화함수
      최대속도, 최대회전각도 바꾸기
      대결1
      대결2
    • 09
      보너스 알고리즘/웹서비스
    • 구름 레이싱
      생화학 무기
      부라노섬
      배열 나누기
      스마트폰 테스트
      Javascript로 jsonp 구현하기
      php로 간단한 RESTful API 만들기
    • 10
      보너스 로보코드 정복
    • 3라운드 다승제 1
      3라운드 다승제 2
      3라운드 다승제 3
      4라운드 점수제 1
      4라운드 점수제 2
      4라운드 점수제 3
    XHR이용하여 Ajax 구현
    learn
    undefined undefined
    XHR이용하여 Ajax 구현
    Practice
    AJAX? 생활코딩을 통해 알아봅시다!

    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)을 지키는 문자열이 온다고 가정한다.

    Q&A