본문 바로가기
nodejs

[node.js] AJAX API 서버 만들기

by jinbro 2017. 6. 17.
[먼저 읽어봐야할 게시글]
- API 서버, JSON에 대한 개념 필요
1) [자바스크립트] JSON 객체 : http://jinbroing.tistory.com/156
2) [node.js] express로 REST API 서버 개발 : http://jinbroing.tistory.com/145
3) [자바스크립트] Ajax 통신: http://jinbroing.tistory.com/99


[AJAX란]
- 자바스크립트 XMLHttpRequest 객체를 사용해서 서버와 비동기적으로 통신하는 것을 말함
- 비동기 통신의 결과로 XML을 받았으나 데이터가 많아지면 그만큼 태그가 많아져 용량이 무거워져 경량 데이터 포멧 JSON을 사용함


[XMLHttpRequest 객체]
- 자바스크립트 코드에서 HTTP 통신을 쉽게하고 통신 결과 데이터를 받을 수 있음 
- 반드시 콜백함수를 지정해서 비동기적으로 통신하도록 해야함 
- 여러 메서드들이 있음
1) setRequestHeader() : 요청을 보내기 전 요청의 HTTP 헤더를 설정
2) getResponseHeader() : 응답 HTTP 헤더를 얻을 때 사용
3) open(http method, url, async, uname, pswd) : 요청의 유형, 비동기 처리 여부 등 요청 설정
4) send(string) : 요청을 서버로 보냄, string은 post 요청시에만 사용함

- 여러 프로퍼티들이 있음
1) onreadystatechange : readyState 속성이 변경될 때마다 자동으로 호출될 함수 저장(콜백함수)
2) readyState : XMLHttpReqest 상태를 가짐, 0 - 4까지의 상태값을 가짐
    (1) 0 : 요청이 초기화되지 않음
    (2) 1 : 서버 연결 설정됨
    (3) 2 : 요청 접수
    (4) 3 : 처리 요청
    (5) 4 : 요청이 완료되고, 응답이 준비됨 
    - 요청 처리 상태를 사용해서 그에 따라 코드를 작성하면 됨

3) responseText : 응답 데이터를 문자열로 반환 - JSON.parse를 통해 JSON으로 변환하면 됨
4) responseXML : 응답 데이터를 XML 형식으로 반환
5) status : 응답 코드(200, 400, 404, 409 등) - readyState 4 일때 status 체크 후 코딩하면 됨 
6) statusText : 응답 코드 텍스트("Not Found", "OK" 등)


[XMLHttpRequest를 사용해서 express API 서버와 비동기 통신하기]
1) express 서버 구현 : 이전에 여러 게시글로 서버 구현을 많이 했기 때문에 텍스트로만 설명
- 새로운 디렉토리 파기
- npm init : 프로젝트 및 의존 모듈 관리를 위한 package.json 생성
- express 설치
- index.js 작성하기 : 'http://호스트/' 로 접속한 뒤 버튼을 누르면 '/dataGet' URI 서버 요청 -> json 데이터 주기 만들 것
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const express = require('express');
const bodyParser = require('body-parser');
const port = 3000;
const app = express();
 
/* static file */
app.use(express.static('public'));
 
/* body-parser */
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
 
/* router */
app.get('/', function(req, res){
  res.render('index.html');
});
 
app.get('/dataGet', function(req, res){
  console.log('요청을 받았다!');
  res.status(200).json({"name": "jinbro"});
});
 
/* server run call back */
app.listen(port, function(){
  console.log(`server is running on ${port}`);
});
cs
- static 디렉토리 만들기 : 루트 디렉토리 내 public 생성 : app.use로 static 디렉토리 등록

- static 디렉토리 내 index.html 생성 : 버튼을 누르면 XMLHttpRequest 객체 생성 및 요청에 필요한 코드 작성(응답 콜백함수까지)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>json 받자</title>
  </head>
  <body>
    <div id="root">
      데이터가 붙을 곳입니다.
    </div>
 
    <button onclick="getData()">json 통신하기</button>
    <h1>새로고침 확인 텍스트 넣기 : </h1>
 
    <script type="text/javascript">
      const attach = document.getElementById('root');
 
      let getData = function(){
          let httpRequest;
          if(window.XMLHttpRequest){ //Chrome, Safari..
            httpRequest = new XMLHttpRequest();
          }
 
          httpRequest.onreadystatechange = function(){
            if(httpRequest.readyState === 4){
              /* 서버에 대한 요청 응답 처리 상태 : readyState */
              if(httpRequest.status === 200){
                /* 서버 응답 코드 : status */
                attach.innerHTML = httpRequest.responseText;
              }
            }
          }
 
          httpRequest.open('GET', '/dataGet', true);
          httpRequest.send();
      }
    </script>
  </body>
</html>
cs
- <h1>는 새로고침없이 통신하는지 테스트위해 만들어놓음 : 콘솔에서 태그 텍스트노드 수정하고 원래대로 돌아오는지 체크하기

- npm 명령어로 서버 실행을 위해 package.json npm script 만들기 : "start" : "node index.js"


2) 서버 실행하기 : npm start
3) 결과 확인




[덧붙이기]
- 위의 코드는 IE6이하 버젼을 고려하지않은 코드 : if문으로 그 이상 버젼과 타 브라우저만 되도록 설정
- 아주 간단하지만 api 서버와 json, ajax 개념이 충분하지않으면 어렵게 느껴짐 : 내가 그랬음....
- 통신만 확인하는 것이기 때문에 서버에서 어떤 처리를 할 것은 서버에서 수정하면됨 : post 요청을 위해 추가 과정이..


[더하기]
- DOM API 사용하지않고 리액트로 새로운 창 만들고 데이터 바인딩하기


[참고자료]

- W3School, XMLHttpRequest : https://www.w3schools.com/xml/dom_http.asp




저작자표시 비영리 동일조건

'nodejs' 카테고리의 다른 글

[node.js] express - session : 로그인  (0) 2017.06.19
[node.js] express - HTTP 쿠키 사용하기  (0) 2017.06.18
[node.js] 유저 목록 조회, 유저 조회, 삭제 테스트 + API 서버 구현  (0) 2017.06.16
[node.js] TDD 라이브러리 - mocha, assert, should, supertest  (0) 2017.06.12
[node.js] express로 REST API 서버 개발  (0) 2017.06.09

관련글

댓글

티스토리툴바