AJAX Asynchronous Javascript and XML 에이잭스

Asynchronous JavaScript and XML 

비동기적으로 서버와 브라우저가 데이터를 주고받는 방식이다.

비동기적? 그럼 동기적은 뭘까?

동기적 Synchronous 

어떤 작업을 요청했을 때 그 작업이 종료될 때까지 기다린 후 다른 작업을 수행하는 방식.

일의 순서가 순차적으로 진행된다. 

비동기적 Asynchronous

작업을 요청 했을 때 그 작업이 종료 될 때 까지 기다리지 않고 다른 작업을 하고 있다가 요청했던 작업이 종료되면 그에 대한 추가작업을 수행하는 방식.

작업을 병렬적으로 처리한다.

예를들어 HTML의 폼을 작성하여 다음 페이지로 넘겨주거나 할 경우 한가지 밖에 수행을 하지 못한다.

회원가입창에서 회원가입 완료창으로 넘어가는 하나의 과정을 동기로 처리할 수 있다.

비동기는 회원가입 페이지에서 ID의 중복검사 등의 서버에서 동작해야 하는 내용들을 페이지를 이동하지 않더라도 수행하게 할 수 있다.

이 덕분에 다른 데이터를 처리하는 동안 또다른 동작을 수행할 수 있고 불필요한 로딩을 줄여 자유롭게 페이지 구성과 실시간 데이터 처리를 가능케 한다.

Ajax는 서버와 통신하기 위해 Javascript에서 XMLHttpRequest 객체를 사용한다. 

장점

1. 웹페이지를 이동하지 않고도 일부를 갱신할 수 있다.

2. 웹페이지 그 자리 그대로 데이터 요청과 수신이 가능하다.

3. 백엔드에서 서버로 데이터를 보낼 수 있다.

단점

1. 클라이언트가 서버로 데이터를 요청하고 답변하는 방식(Pulling)을 사용하기 때문에 서버에서 클라이언트로 (Push)는 불가하다

2. Ajax 서버가 아닌 다른서버로 Ajax를 보낼 수없다.

3. Binary data는 교환 불가능하다.

Ajax를 사용하기 위한 XMLHttpRequest 객체를 직접 사용하는 방법과 JQuery를 사용하는 방법을 소개한다.

XMLHttpRequest 객체를 직접 사용하는 방법

var url = "http://localhost:3000/test";
var data = {'email': "coding@ha.ryeom" };
data = JSON.stringify(data);    //json형태로 만들어진 문자열 데이터

var xhr = new XMLHttpRequest();    //객체 생성 ajax

xhr.open('POST', url);     //3번째 인자 async:true, sync:false
xhr.setRequestHeader('Content-Type', "application/json");
xhr.send(data);
xhr.addEventListener('load', function () {  //load이벤트 서버로부터 response 온 경우
    var result = xhr.JSON.parse(xhr.responseText);
    console.log(result);
});

이렇게 XMLHttpRequest 객체를 직접 생성하고 send해서 보내고 난 응답을 load옵션의 EventListener를 통해서 받을 수 있다.

xhr.responseText는 서버로부터 받은 데이터이다.

보통 String형태로 받는다. 본인의 경우에 따라 Json으로 파싱하면 될것 같다.

xhr.addEventListener('load', function () {  //load이벤트 서버로부터 response 온 경우
    var result = xhr.JSON.parse(xhr.responseText);
    console.log(result);
    
    switch (xhr.status) {
            case 200 :
            //성공
         case 404 :
            //예외처리
    }
});

xhr.status는 서버로부터 전송받은 status code이다. 상황에 맞추어서 처리를 해주면 된다.

xhr.open(Httpmethod, url, async );

xhr.open의 사용법은 다음과 같다.

Http method : get, post, put 등

url : 요청을 보낼 url

async : 비동기 조작여부 옵션으로 default는 true

xhr.send(data);

send를 통해 준비된 요청을 서버에 전달한다.

get과 post에 따라 그 전송 방식에 차이가 있다.

get은 url의 일부인 query String으로 데이터를 서버에 전송한다.

post는 데이터를 request Body에 담아 전송한다.

JQuery를 사용하는 방법

$.ajax({
    type: 'post', // 타입
    url: '/test', // URL
    async: false, // 비동기화 여부
    headers: { // Http header
        "Content-Type": "application/json",
        "X-HTTP-Method-Override": "POST"
    },
    dataType: 'text', // 데이터 타입
    data: JSON.stringify({ // 보낼 데이터
        "id": id,
        "name": name,
        "password": password
    }),
    success: function (result) { // 결과 성공
        console.log(result);
    },
    error: function (request, status, error) { // 결과 에러

    }
});

처음 Ajax를 접하게 되었을 때 JQuery기반이구나 라고 알고있었지만 JQuery는 단지 XMLHttpRequest 객체를 편하게 사용하게끔 도와주는 거라고 알게되었다.

확실히 XMLHttpRequest 객체를 사용하는 것 보다 간단한 것같다. 저자체가 Json형식으로 담아서 넘겨주기 때문에 알아서 처리하게 끔 되어있는것같다.

위의 예와 같이 dataType을 text뿐만아니라 json으로도 받을 수 있다.

Ajax에서는 보편적으로 json을 많이 쓰는 것 같다.

let data = {
    "id": id,
    "name": name,
    "password": password
};

$.ajax({
    type: 'post',
    url: './ajax',
    contentType: "application/text; charset=utf-8",
    data: data,
    dataType: "json",
    success: function (data) {
        
        }, 
    error: function (request, status, error) {
    
    }
});

이런식으로 json으로 그냥 보내는 방식도 사용할 수 있다.