[웹프로그래밍] Ajax

3 분 소요

<blockquote>
 보통 우리가 생각하는 웹프로그래밍은 클릭과 같은 이벤트를 통해 웹 서버에 요청하고 요청에 대한 응답을 클라이언트에게 보내주어 갱신되는 것이 일반적이다.

하지만, 구글 지도와 같은 몇 웹페이지에서는 신기하게도 전체 페이지를 다시 새로고침하지 않고도 지도 정보만 갱신되는 것을 볼 수 있다.
</blockquote>

<h1 id="ajax">Ajax</h1>
(Asynchronous JavaScript and XML, 에이잭스) 
비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법
<ul>
 <li>표현 정보를 위한 HTML (또는 XHTML) 과 CSS</li>
 <li>동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트</li>
 <li>웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest</li>
</ul>

JavaScript의 라이브러리 중 하나이며, JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술이다.

즉, <code class="language-plaintext highlighter-rouge">자바스크립트</code>를 통해 다양한 형태의 데이터(JSON, XML, CSV)를 <code class="language-plaintext highlighter-rouge">서버</code>와 주고받을 수 있다.

<h2 id="비동기-방식">비동기 방식</h2>
웹페이지를 새로고침하지 않고 데이터를 불러오는 방식.

보통 자주가는 카페를 예로 들어보자면, 
동기 방식의 경우는 손님이 들어올 때마다 주문을 받고 손님은 커피를 받기 전까지 카운터에서 <code class="language-plaintext highlighter-rouge">기다리는</code> 상황이고 
비동기 방식은 <code class="language-plaintext highlighter-rouge">진동벨</code>을 구비해서 손님의 주문을 받음과 동시에 진동벨을 배분하고 일을 하다가 중간에 다른 손님이 오더라도 주문을 받을 수 있는 상황과 유사하다고 할 수 있다.

위 예시에서 손님이 갑자기 몰려온다고 생각해보자. 
동기 방식에서는 손님이 주문하고 커피를 준비하고 넘겨주어야 다음 손님을 맞을 수 있으므로 시간 낭비가 심하다. 
하지만, 비동기 방식에서는 손님을 기다리게 하고 다른 업무를 할 수 있으니 시간적으로 효율이 좋다.

즉, 비동기 방식의 장점은 
기존의 변경할 필요가 없는 이미지, 스크립트 등은 남겨두고 필요한 <code class="language-plaintext highlighter-rouge">부분만</code> 갱신해 사용할 수 있다는 점이다.

<h2 id="데이터-전송-방식">데이터 전송 방식</h2>
<ul>
 <li>GET 
지정한 URL의 데이터를 열람하기 위한 메소드 
사용이 간편하고 전송량이 적으나 사용자정보를 URL에 노출함으로 보안상 취약할 수 있음</li>
 <li>POST 
지정한 URL에 데이터를 생성하기 위한 메소드(수정 및 삭제 작업도 수행 가능)</li>
 <li>PUT 
지정한 URL의 데이터를 갱신하기 위한 메소드</li>
 <li>DELETE 
지정한 URL의 데이터를 삭제하기 위한 메소드</li>
 <li>HEAD 
지정한 URL의 헤더 정보를 요청하는 메소드</li>
</ul>

<h2 id="ajax의-장점">AJAX의 장점</h2>
<ul>
 <li>웹페이지 속도 향상</li>
 <li>서버 처리를 기다리지 않고, 비동기 요청 가능</li>
 <li>수신하는 데이터의 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.</li>
 <li>플러그인 없이도 인터렉티브한 웹페이지 구현이 가능</li>
</ul>

<h2 id="ajax의-단점">AJAX의 단점</h2>
<ul>
 <li>Ajax를 쓸 수 없는 브라우저에 대한 문제가 있음</li>
 <li>HTTP 클라이언트 기능이 한정되어 있음</li>
 <li>페이지 이동없는 통신으로 인한 보안상의 문제 발생 가능성</li>
 <li>히스토리 관리가 되지 않음</li>
 <li>지원하는 Charset이 한정</li>
 <li>스크립트로 작성되므로 디버깅이 용이하지 않음</li>
 <li>요청을 남발하면 역으로 서버 부하가 늘 수 있음</li>
 <li>동일-출처 정책으로 인하여 다른 도메인과는 통신이 불가능(Cross-Domain문제)</li>
</ul>

<h2 id="ajax-프레임워크">AJAX 프레임워크</h2>
Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경

<ul>
 <li>JQuery</li>
 <li>Prototype</li>
 <li>script.acul.us</li>
 <li>dojo</li>
 <li>Google Web Toolkit</li>
 <li>ASP.NET AJAX</li>
 <li>YUI</li>
</ul>

<h2 id="ajax-예제">AJAX 예제</h2>
<h3 id="javascript에서-ajax">JavaScript에서 Ajax</h3>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var xmlhttp;
if (window.XMLHttpRequest) {
 xmlhttp = new XMLHttpRequest();
} 
else {
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
 
xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 //통신 성공시 구현부분

//readState : Ajax 통신의 진행중인 상태 표시
 // 0 : 초기화되지 않은 상태(open 메소드가 호출되지 않은 상태)
 // 1 : open 메소드가 호출된 상태(send메소드는 호출되지 않은 상태)
 // 2 : 송신완료, 요청을 시작한 상태(요청은 하지 않았지만 데이터가 아직 오지 않은 상태)
 // 3 : 수신 중인 상태(데이터를 받고 있는 상태)
 // 4 : 수신 완료(데이터를 모두 받은 상태)

//status : 데이터 수신의 성공 여부를 판단해주는 속성값
 // 0 : 로컬로 접근 성공을 의미
 // 200 : 해당 URL로 접근 성공한 상태
 // 403 : 접근이 거부됨.
 // 404 : 해당 URL이 없음
 // 500 : 서버오류

}
}
xmlhttp.open("GET", "exam.xml", true);
xmlhttp.send()
</code></pre></div></div>

JavaScript에서 Ajax는 텍스트/XML 타입으로만 데이터를 가져올 수 있기 때문에 JSON/CSV 형식으로 데이터를 받기 위해서는 따로 <code class="language-plaintext highlighter-rouge">파싱</code>(Parsing)하는 코드 작업이 필요.

<h3 id="jquery에서-ajax">JQuery에서 Ajax</h3>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><script src="http://code.jquery.com/jquery-latest.min.js"></script>

$.ajax({
 url:'', //request 보낼 서버의 경로
 type:'post', // 메소드(get, post, put 등)
 data:{ name: 'yoo'}, //보낼 데이터
 datatype: "json"
 success: function(data) {
 //서버로부터 정상적으로 응답이 왔을 때 실행
 },
 error: function(err) {
 //서버로부터 응답이 정상적으로 처리되지 못햇을 때 실행
 }
});

또는

$.ajax({
 url:'', //request 보낼 서버의 경로
 type:'post', // 메소드(get, post, put 등)
 data:{ name: 'yoo'}, //보낼 데이터
 datatype: "json"})
 .done(function(json){
 // HTTP 요청이 성공하면 요청한 데이터가 done 메소드로 전달
 })
 .fail(function(xhr, status, errorThrown){
 // HTTP 요청이 실패하면 오류와 상태에 대한 정보가 fail 메소드로 전달
 })
 .always(function(xhr, status){
 // HTTP 요청이 성공, 실패에 상관없이 언제나 alway 메서드 실행
 });
});
</code></pre></div></div>

보통 우리가 생각하는 웹프로그래밍은 클릭과 같은 이벤트를 통해 웹 서버에 요청하고 요청에 대한 응답을 클라이언트에게 보내주어 갱신되는 것이 일반적이다.

하지만, 구글 지도와 같은 몇 웹페이지에서는 신기하게도 전체 페이지를 다시 새로고침하지 않고도 지도 정보만 갱신되는 것을 볼 수 있다.

Ajax

(Asynchronous JavaScript and XML, 에이잭스)
비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법

표현 정보를 위한 HTML (또는 XHTML) 과 CSS
동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest

JavaScript의 라이브러리 중 하나이며, JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술이다.

즉, 자바스크립트를 통해 다양한 형태의 데이터(JSON, XML, CSV)를 서버와 주고받을 수 있다.

비동기 방식

웹페이지를 새로고침하지 않고 데이터를 불러오는 방식.

보통 자주가는 카페를 예로 들어보자면,
동기 방식의 경우는 손님이 들어올 때마다 주문을 받고 손님은 커피를 받기 전까지 카운터에서 기다리는 상황이고
비동기 방식은 진동벨을 구비해서 손님의 주문을 받음과 동시에 진동벨을 배분하고 일을 하다가 중간에 다른 손님이 오더라도 주문을 받을 수 있는 상황과 유사하다고 할 수 있다.

위 예시에서 손님이 갑자기 몰려온다고 생각해보자.
동기 방식에서는 손님이 주문하고 커피를 준비하고 넘겨주어야 다음 손님을 맞을 수 있으므로 시간 낭비가 심하다.
하지만, 비동기 방식에서는 손님을 기다리게 하고 다른 업무를 할 수 있으니 시간적으로 효율이 좋다.

즉, 비동기 방식의 장점은
기존의 변경할 필요가 없는 이미지, 스크립트 등은 남겨두고 필요한 부분만 갱신해 사용할 수 있다는 점이다.

데이터 전송 방식

GET
지정한 URL의 데이터를 열람하기 위한 메소드
사용이 간편하고 전송량이 적으나 사용자정보를 URL에 노출함으로 보안상 취약할 수 있음
POST
지정한 URL에 데이터를 생성하기 위한 메소드(수정 및 삭제 작업도 수행 가능)
PUT
지정한 URL의 데이터를 갱신하기 위한 메소드
DELETE
지정한 URL의 데이터를 삭제하기 위한 메소드
HEAD
지정한 URL의 헤더 정보를 요청하는 메소드

AJAX의 장점

웹페이지 속도 향상
서버 처리를 기다리지 않고, 비동기 요청 가능
수신하는 데이터의 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.
플러그인 없이도 인터렉티브한 웹페이지 구현이 가능

AJAX의 단점

Ajax를 쓸 수 없는 브라우저에 대한 문제가 있음
HTTP 클라이언트 기능이 한정되어 있음
페이지 이동없는 통신으로 인한 보안상의 문제 발생 가능성
히스토리 관리가 되지 않음
지원하는 Charset이 한정
스크립트로 작성되므로 디버깅이 용이하지 않음
요청을 남발하면 역으로 서버 부하가 늘 수 있음
동일-출처 정책으로 인하여 다른 도메인과는 통신이 불가능(Cross-Domain문제)

AJAX 프레임워크

Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경

JQuery
Prototype
script.acul.us
dojo
Google Web Toolkit
ASP.NET AJAX
YUI

AJAX 예제

JavaScript에서 Ajax

var xmlhttp;
if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
} 
else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
 
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
         //통신 성공시 구현부분

         //readState : Ajax 통신의 진행중인 상태 표시
         // 0 : 초기화되지 않은 상태(open 메소드가 호출되지 않은 상태)
         // 1 : open 메소드가 호출된 상태(send메소드는 호출되지 않은 상태)
         // 2 : 송신완료, 요청을 시작한 상태(요청은 하지 않았지만 데이터가 아직 오지 않은 상태)
         // 3 : 수신 중인 상태(데이터를 받고 있는 상태)
         // 4 : 수신 완료(데이터를 모두 받은 상태)

         //status : 데이터 수신의 성공 여부를 판단해주는 속성값
         // 0 : 로컬로 접근 성공을 의미
         // 200 : 해당 URL로 접근 성공한 상태
         // 403 : 접근이 거부됨.
         // 404 : 해당 URL이 없음
         // 500 : 서버오류

    }
}
xmlhttp.open("GET", "exam.xml", true);
xmlhttp.send()

JavaScript에서 Ajax는 텍스트/XML 타입으로만 데이터를 가져올 수 있기 때문에 JSON/CSV 형식으로 데이터를 받기 위해서는 따로 파싱(Parsing)하는 코드 작업이 필요.

JQuery에서 Ajax

<script  src="http://code.jquery.com/jquery-latest.min.js"></script>

$.ajax({
    url:'', //request 보낼 서버의 경로
    type:'post', // 메소드(get, post, put 등)
    data:{ name: 'yoo'}, //보낼 데이터
    datatype: "json"
    success: function(data) {
        //서버로부터 정상적으로 응답이 왔을 때 실행
    },
    error: function(err) {
        //서버로부터 응답이 정상적으로 처리되지 못햇을 때 실행
    }
});

또는

$.ajax({
    url:'', //request 보낼 서버의 경로
    type:'post', // 메소드(get, post, put 등)
    data:{ name: 'yoo'}, //보낼 데이터
    datatype: "json"})
    .done(function(json){
      // HTTP 요청이 성공하면 요청한 데이터가 done 메소드로 전달
    })
    .fail(function(xhr, status, errorThrown){
      // HTTP 요청이 실패하면 오류와 상태에 대한 정보가 fail 메소드로 전달
    })
    .always(function(xhr, status){
      // HTTP 요청이 성공, 실패에 상관없이 언제나 alway 메서드 실행
    });
});

Twitter Facebook LinkedIn

SG Yoo.

[웹프로그래밍] Ajax

Ajax

비동기 방식

데이터 전송 방식

AJAX의 장점

AJAX의 단점

AJAX 프레임워크

AJAX 예제

JavaScript에서 Ajax

JQuery에서 Ajax

공유하기

댓글남기기

참고

[에픽게임즈/Epic Games] 시작되는 2021 에픽스토어 메가세일과 무료 배포 게임(6/11)

[에픽게임즈/Epic Games] 시작되는 2021 에픽스토어 메가세일과 무료 배포 게임(6/4)

[에픽게임즈/Epic Games] 시작되는 2021 에픽스토어 메가세일과 무료 배포 게임(5/28)

[정보보안기사/네트워크] 스푸핑(Spoofing) / 원격접속 공격