ajax는 비동기식 통신이다.
ajax를 사용하는 기본적인 방법은 브라우저에서 제공하는 XML Http Request를 사용하는 것이다.가장 raw한 만큼 응용의 폭은 넓지만, 사용하기 불편하다.그래서 등장한 것이 jquery의 ajax이다.API 문서 : http://api.jquery.com/jquery.ajax/ 서버 소스 : https://github.com/justkukaro/REST-Test-Server
예제에서 서버에 사용하는 코드는 위의 서버 소스를 다운로드한 후(node js이므로 node js 와 npm 설치 필요) npm start를 하면 된다. 또는 직접 서버를 만들어보자.
get로 데이터를 수신한다.
예제 코드
ajax의 세팅.url: 송신할 주소를 적는다. 당연하지만 없어서는 안 된다.type: 보낼 타입을 지정한다. 설정하지 않으면 get로 가기 때문에 실은 위의 예제에서는 생략해도 가능하다.통상 가독성을 위해 쓰는 경우가 많은 method:type과 동등하다. 실은 type가 오래전부터 있었고, method가 뒤에 생겼다. 이전 버전은 type만 사용 가능 데이터: body에 데이터를 넣을 때 사용한다. post 등 body가 필요하면 선택해야 하는 headers: 헤더 지정 가능, jsobject에 넣는다. 토큰 같은 거 사용할 때 보통 쓴다데이터 타입: 데이터 타입을 개략적으로 지정할 수 있다. 보통 안쓰는게 좋지만 옛날부터 쓰고 아직도 쓰는 사람이 있어.content Type: 콘텐츠 유형을 직접 결정할 수 있지만 사용하지 않는 것이 좋다. mime 타입을 지정하려면 headers로 바꾸는 것이 정석, 경우에 따라서는 처음부터 안 될 수도 있으니 주의. async: 기본적으로는 true이지만 false를 지정하게 되면 동기화할 수 있지만 머리에 총알이 박힌 것이 아니면 사용할 수 없다. 웹 화면을 멈추려면 사용하세요.before Send: 송신 직전에 행하는 행동을 정의한다. 모듈화를 깨끗하게 하려면 자주 사용하는 것 같다. jsonp:jsonp를 사용하는지 물어본다. 요즘은 cors가 많아 잘 사용하지 않지만 경우에 따라서는 사용할 수도 있다.success:callback function에서 성공했을 때의 행동을 묻는다. done과 동등하다. 만약 “done”처럼 사용하려면 “done”보다 먼저 작동한다.error : callback function 에서 실패했을 때의 행동을 묻는다. fail과 동등하다. 만약 fail과 같이 쓰려면 fail보다 먼저 작동한다.complete : callback function 에서 종료되었을 때의 행동을 묻는다. always와 동등하다. 만약 always와 함께 사용한다면 always보다 먼저 작동한다.
success와 error, complete에서 콜백을 만드는 경우가 보다 일반적으로 사용되어 온 방식이다.마지막 인자인 jqXHR은 현재 사용하고 있는 XHLHttpRequset 자체를 의미한다.
ajax 의 promise method: callback 우선순위 위에서 아래로.done: 성공하였을 때 동작한다.fail : 실패 시 동작한다.always : 종료 시 동작한다. 파라미터는 각각 done과 fail의 순서대로 매칭된다. 예를 들어 성공하고 종료했을 경우, param1은 데이터이지만 실패하고 종료했을 경우, param1은 jqXHR이다.then: 성공과 실패를 불문하고 작동한다.
json 형식으로 바꾸고 싶으면 header를 손질하고 데이터를 직렬화(application/json형으로 인코딩)시킨다.참고한 블로그 [출처] https://kamang-it.tistory.com/entry/RESTfulajaxjquery-ajax%EC%82%AC%EC%9A%A9%EB%B2%95-2