728x90

참고:

[RESTful][ajax]ajax란? XMLHttpRequest사용법 - (1)


ajax를 쓰는 가장 기본적인 방법은 브라우저에서 제공해주는 XMLHttpRequest를 사용하는 것이다.

가장 raw한 만큼 응용의 폭은 매우 넓지만 항상 프로그래밍이 그렇듯 그 응용폭은 거의 쓰지 않고 핵심 기능만 쓴다는 것이 문제이다.

그리고 사용하기도 까다롭고... 여튼 거지같다.

경우에 따라서 XMLHttpRequest는 좋은 선택이 될순 있지만 대부분의 상황에서는 그냥 까다롭기만하다.

그래서 가장 먼저 등장한것이 바로 jquery의 ajax이다.


jquery는 ajax라는 강력한 기능을 제공한다.

더 나아가서 ajax를 이용해서 html을 뿌려주는 기능도 있지만 그 기능을 언급하진 않겠다.

점점 프론트엔드가 발전하면서 jquery의 사용빈도가 낮아지곤 있지만

아직까진 웹에서의 인지도가 상당하므로 jquery는 알아두는게 좋다.


API 문서 : http://api.jquery.com/jquery.ajax/

서버 소스 : https://github.com/justkukaro/REST-Test-Server


예제에서 서버로 사용할 코드는 위의 서버 소스를 다운로드한 후(node js이므로 nodejs와 npm 설치 필요)

npm start를 해주면된다. 뭐 아니면 서버를 직접 만들어도 되니 공부를 하고자 하시는 분은 직접 만드는걸 추천하긴한다.


그럼 이번에도 저번 처럼 get을 날려서 데이터를 받아보도록 하자.


<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
    $.ajax({
        url: 'http://localhost:3000/single-json',
        type: 'GET'
    }).done((data, textStatus, jqXHR) => {
        console.log('성공');
        console.log(data);
        console.log(textStatus);
        console.log(jqXHR);
    }).fail((jqXHR, textStatus, errorThrown) => {
        console.log('실패');
        console.log(jqXHR);
        console.log(textStatus);
        console.log(errorThrown);
    }).always((param1, param2, param3) => {
        console.log('종료');
        console.log(param1);
        console.log(param2);
        console.log(param3);
    }).then((data, textStatus, jqXHR) => {
        console.log('성공 캐이스')
    }, (jqXHR, textStatus, errorThrown) => {
        console.log('실패 캐이스')
    });
</script>
</body>
</html>


예제 코드이다. 어려워보이지만 쉽다.

보기 쉽게 하기위해서 잘라서 보도록 하자.


$.ajax({
    url: 'http://localhost:3000/single-json',
    type: 'GET'
}).done((data, textStatus, jqXHR) => {
    /*성공*/
}).fail((jqXHR, textStatus, errorThrown) => {
    /*실패*/
}).always((param1, param2, param3) => {
    /*종료*/
}).then((data, textStatus, jqXHR) => {
    /*성공*/
}, (jqXHR, textStatus, errorThrown) => {
    /*실패*/
});

ajax의 setting : 많은 인자가 있지만 중요한 것만 설명


url: 보낼 주소를 적는다. 당연하지만 없어선 안된다.

type: 보낼 타입을 지정한다. 설정안하면 get으로 가므로 사실 위의 예제에서는 생략해도 가능. 보통 가독성때문에 적는 경우가 많음

method: type과 동등하다. 사실 type이 옛날부터 존재하고 method가 뒤에생겼다. 구버전은 type만 사용가능

data: body에 data를 실을 때 사용한다. post등 body가 필요하다면 선택해얗나다.

headers: 헤더지정가능, js object로 넣어준다. 토큰같은거 사용할때 보통 사용한다.

dataType: 데이터의 타입을 개략적으로 지정할 수 있다. 보통 안쓰는게 권장이나 옜날부터 사용해서 아직도 쓰는 사람이 있다.

contentType: 컨텐트 타입을 직접 정할 수 있는데 안쓰는게 권장이다. mime타입을 지정하려면 headers에서 바꿔주는게 정석, 경우에 따라 아예 안될 수 있으니 조심.

async: 기본적으로는 true인데 false를 지정하면 동기로 만들 수 있으나 머리에 총맞은거 아니면 사용할 일 없다. 웹 화면 멈추게 할거면 사용하라.

beforeSend: 보내기 직전에 할 행동을 정의한다. 모듈화를 깔끔하게 하고싶으면 자주 사용하는 것 같다.

jsonp: jsonp를 사용할지 물어본다. 요즘은 cors가 대세라서 잘 안쓰이나 경우에 따라서는 써야할 수 있다.

success: callback function으로 성공했을 때의 행동을 물어본다. done과 동등하다. 만약 done과 같이 쓴다면 done보다 먼저 작동한다.

error: callback function으로 실패했을 때의 행동을 물어본다. fail과 동등하다. 만약 fail과 같이 쓴다면 fail보다 먼저 작동한다.

complete: callback function으로 종료했을 때의 행동을 물어본다. always와 동등하다. 만약 always와 같이 쓴다면 always보다 먼저 작동한다.


더 많긴 한데 자주쓰는것은 위의 정도이다.

겁먹을 필요없는게 사실 위에꺼도 다 쓰지는 않는다.


$.ajax({
    url: 'http://localhost:3000/single-json',
    type: 'GET',
    success: (data, textStatus, jqXHR) => {
        console.log('success');
        console.log(data);
        console.log(textStatus);
        console.log(jqXHR);
    }
})

사실 위와 같은 형태를 훨씬더 자주 봤을 것이다.

success와 error, complete로 안에서 콜백을 만드는 경우가 일반적이다.

아니 정확히 말하면 일반적으로 사용해 왔던 방식이다.

마지막 인자인 jqXHR은 현재 사용하고있는 XHLHttpRequest자체를 의미한다.

promise로 구현되어있기에 then으로 체이닝해서 사용하는것도 가능하다.

물론 ajax객체이므로 done이나 fail, always도 사용가능하다.



ajax의 promise method : callback 우선순위는 위에서 부터 아래로


done: 성공했을때 동작한다.

fail: 실패했을때 동작한다.

always: 종료했을때 동작한다. 파라메터들은 각각 done과 fail의 순서대로 맞게 매칭된다. 예를들자면 성공해서 종료됬을 시 param1은 data지만 실패해서 종료됬을 시 param1은 jqXHR이다.

then: 성공, 실패 가리지 않고 동작한다.


시대의 흐름에 맞게 promise역시 jquery에 추가되었다.

사실 추가된지는 좀 됬으나 아직도 모르는 사람이 많다.

promise를 쓰고 싶다면 success등의 내부에서 jqXHR에서 프로미스 체이닝 해서 사용하는 경우도 되지만,

보통의 경우(라고 하기엔 캐이스가 적지만)위의 method 4총사를 사용하게 된다.


<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
</head>
<body>
<script>
    $.ajax({
        url: 'http://localhost:3000/single-json',
        type: 'POST',
        data: {'age': 26, 'lang': 'JS', 'drink': 'zero coke'}
    }).then((data, textStatus, jqXHR) => {
        console.log(data);
    }, (jqXHR, textStatus, errorThrown) => {
        /*pass*/
    })
</script>
</body>
</html>

post데이터를 날리고 싶다면 위처럼 날리면된다.

XMLHttpRequest는 post로 보내도 일일히 타입을 바꿔줘야했지만

jquery ajax에서는 default로 appliation/x-www-form-urlencoded로 되어서 수정을 가할필요는 없다.

만약 json형태로 바꾸고 싶다면 header를 손봐주고 데이터를 직렬화(application/json형으로 인코딩) 시킨다.


$.ajax({
    url: 'http://localhost:3000/single-json',
    type: 'POST',
    data: JSON.stringify({'age': 26, 'lang': 'JS', 'drink': 'zero coke'}),
    headers: {'Content-Type': 'application/json'},
}).then((data, textStatus, jqXHR) => {
    console.log(data);
}, (jqXHR, textStatus, errorThrown) => {
    /*pass*/
})

만약 직렬화시키지 않고 보내면 에러가 난다.


이번에는 jquery를 이용해서 ajax를 사용했다.

확실하 여러가지면에서 XMLHttpRequest를 쓰는것 보다 좋아졌다.

다음에는 다른 방법으로 ajax를 보내보도록 하자.

저작자표시

'Usage > JavaScript' 카테고리의 다른 글

[Nightwatch]JavaScript에서 e2e Test하기 - 왕초보만  (0) 2019.02.12
[Mocha]JavaScript에서 Unit Test하기 - 왕초보만  (0) 2019.02.08
[RESTful][ajax]ajax란? XMLHttpRequest사용법 - (1)  (0) 2018.12.28
[Package][Promise]Promise와 js에서의 동기화, 에러처리 - (2)  (0) 2018.11.22
[Cordova][Ionic][Vue][JavaScript]vue로 ionic사용하기  (0) 2018.09.30

+ Recent posts

티스토리툴바