[JavaScript] Ajax에 대해 (JQuery)

Ajax(Asynchronous Javascript And Xml)

Ajax를 이용하면 전체 페이지를 새로고침하지 않고도 페이지의 데이터를 서버와 클라이언트 간 통신할 수 있다.

이를 비동기 처리라고 하며 예를들면 우리가 사용하는 댓글 기능도 비동기 처리 방식이다.

Ajax는 JavaScript의 라이브러리이며 그중 JQuery는 Ajax에 관련된 여러 편리한 기능들을 제공해주는 프레임워크이다. 그래서 보통 Ajax는 JQuery와 함께 사용하게된다.

예시 - JQuery를 사용하지 않는 Ajax 구문 (순수 자바스크립트)

// This function gets invoked when server sends the response
function reqListener (e) {
    console.log(e.currentTarget.response);
}

var oReq = new XMLHttpRequest();
var serverAddress = "https://hacker-news.firebaseio.com/v0/topstories.json";

oReq.addEventListener("load", reqListener);
oReq.open("GET", serverAddress);
oReq.send();

Ajax는 XMLHttpRequest 객체를 이용한 url과의 통신하여 응답결과에 맞는 함수를 실행시키는 구조로 되어있다. 하지만 이렇게 사용될 경우 코드가 길어지기 때문에 JQuery를 사용한다.

예시 - JQuery를 사용한 Ajax 구문

var serverAddress = 'https://hacker-news.firebaseio.com/v0/topstories.json';

// jQuery의 .get 메소드 사용
$.ajax({
    url: ,
    type: 'GET',
    success: function onData (data) {
        console.log(data);
    },
    error: function onError (error) {
        console.error(error);
    }
});

Ajax의 구성 요소

위에서 작성한 순수 자바스크립트를 이용한 AJax 통신 소스를 보면, 기존에 사용되던 자바스크립트의 여러 기술들을 사용하여 웹 페이지의 일부분만 갱신할 수 있도록 하고있다.

• 웹페이지 표현을 위한 HTML, CSS
• 데이터 접근, 화면동작을 위한 DOM모델
• 데이터 교환을 위한 JSON 혹은 XML
• 웹 서버 비동기 통신을 위한 XMLHttpRequest객체

위의 기술들을 결합한 기술을 Ajax라고 할 수 있다.

 

Ajax의 동작 원리

우측은 요청과 응답으로만 이루어진 동기식 방식이고

좌측은 Ajax가 개입된 비동기식 방식이다.

Ajax의 실행 흐름도

1. 사용자 요청에 따른 이벤트 발생
2. 자바스크립트 호출(이벤트 핸들러에 의해 호출됨)
3. 호출된 자바스크립트는 XMLHttpRequest 객체로 서버에 요청을 보냄
4. 서버는 전달받은 XMLHttpRequest 객체로 Ajax요청을 처리
5. 처리한 결과를 생성
6. HTML, JSON, XML 등 형태로 전송
7. 전달받은 데이터로 페이지 일부분 갱신하는 자바스크립트 호출
8. 웹페이지 일부 로딩 성공

XMLHttpRequest

XMLHttpRequest는 자바스크립트에서 제공하는 HTTP통신을 위한 객체이며 비동기 방식을 사용할 수 있어서 Ajax의 통신에도 XMLHttpRequest를 사용한다.

(참고 : 익스플로러 7 이전의 구형버전에서는 ActiveXObject를 사용한다.)

 

---

JQuery를 이용한 AJax의 대표적인 형태

$.ajax([옵션])

 

 

JQuery를 이용한 AJax의 원형은 다음과 같다.

(코드가 이상하게 자꾸 짤려서 이미지로 첨부..)

 

데이터가 오가는 과정만 보면

data: { name : "홍길동" }, 이 위 url에 전송되고

전송된 결과가 성공하면 url에서 리턴된 .done 메소드의 (json)으로 전송된다.

 

done 메소드는 success메소드와 이름만 다를 뿐 거의 같은 역할을 하고

HTTP 요청시 코드 200이 반환(성공코드)되면 .done을 실행하고

400~코드가 반환되면 .fail이 실행된다.

 

이번 공부를 통해 감으로만 썻던 AJax는 물론 json도 이해할 수 있는 기회가 되었다.

 

출처 : https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery

http://www.tcpschool.com/ajax/ajax_intro_works

https://okky.kr/article/572075