RATSENO

[JS]Ajax 본문

DEV/JS

[JS]Ajax

RATSENO 2019. 11. 19. 17:47

Ajax는 비동기적 자바스크립트와 XML의 약어입니다. AJAX를 통해 서버와 비동기적 통신하면 페이지 전체를 새로 고칠 필요없이 서버에서 데이터를 받아올 수 있습니다. 

 

Ajax의 핵심 개념은 간단합니다. 브라우저 자바스크립트에서 HTTP요청을 만들어 서버에 보내고 데이터를 받습니다.

받는 데이터는 보통 JSON 형식입니다. XML로 받을 수도 있지만 JSON이 자바스크립트로 처리하기 훨씬 쉽습니다. 그리고 브라우저에서 받은 데이터를 사용합니다. 

 

Ajax를 사용하려면 서버가 필요합니다. 간단하게 node.js로 서버를 만들어 Ajax 서비스를 제공하겠습니다.

https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

밑의 예제와 같이 Server.js 파일을 만드세요.

const http = require('http');

const server = http.createServer(function(req, res){
    res.setHeader('Content-Type', 'application/json');
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.end(JSON.stringify({
        platform : process.platform,
        nodeVersion : process.version,
        uptime : Math.round(process.uptime())
    }));
});

const port = 7070;
server.listen(port, function(){
    console.log(`Ajax server started on port ${port}`);
});

 

각자 사용하고 있는 IDE를 이용하여 코드를 작성하고 (저는 VSCODE를 사용하였습니다.)

터미널을 이용하여 먼저 노드가 설치되어있는지 확인하기 위해 node -v 로 확인 후, 파일이 생성되어있는 디렉토리로 이동 후 node 파일명.js 를 실행합니다. 서버가 실행된 로그가 출력이 되고

 

브라우저를 이용하여 http://localhost:7070에 방문하게 되면 서버가 출력하는 결과를 볼 수 있습니다.

생성된 서버를 이용하여 샘플HTML 페이지에서 Ajax 코드를 사용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
</head>
<body>
    <div class="serverInfo">
        Server is running 
        <!-- 서버에서 받은 테이트를 노출할 영역 -->
        <span data-replace="platform">????</span>
        with Node
        <!-- 서버에서 받은 테이트를 노출할 영역 -->
        <span data-replace="nodeVersion">????</span>
        It has been up for 
        <!-- 서버에서 받은 테이트를 노출할 영역 -->
        <span data-replace="uptime">????</span>
        seconde
    </div>
    <script>
        function refreshServerInfo(){
            const req = new XMLHttpRequest();
            req.addEventListener('load', function(){
                console.log(this.responseText);
            });

            req.open('GET', 'http://localhost:7070', true);
            req.send();
        }

        refreshServerInfo();
    </script>
</body>
</html>

위의 샘플HTML페이지 내의 스크립트는 기본적인 Ajax 호출을 보냅니다.

먼저 XMLHttpRequest 객체를 만들고, 

const req = new XMLHttpRequest();

Ajax호출이 성공했을 때 발생할 load 이벤트에 대한 이벤트 리스너를 반들었습니다.

req.addEventListener('load', function(){
    console.log(this.responseText);
});

위의 샘플에서는 서버응답 this.responseText를 콘솔에 출력하기만 합니다.

다음에는 open을 호출해 서버에 실제 연결합니다. 이 함수에서는 브라우저에 웹 페이지에 방문할 때 사용하는 것과 같은 HTTP GET 요청을 쓴다고 명시하고, 서버 URL을 넘겼습니다. 

req.open('GET', 'http://localhost:7070', true);
//XMLHttpRequest.open(method: string, url: string, async: boolean, username?: string, password?: string)
//이러한 옵션들이 있습니다.

마지막으로 send를 호출해 요청을 실행했습니다.

req.send();

예제를 실행하게 되면 서버에서 반환한 데이터가 콘솔에 기록됩니다. 이제 서버에서 받은 데이터를 이용하여 샘플HTML의 텍스트를 교체해보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
</head>
<body>
    <div class="serverInfo">
        Server is running 
        <span data-replace="platform">????</span>
        with Node
        <span data-replace="nodeVersion">????</span>
        It has been up for 
        <span data-replace="uptime">????</span>
        seconde
    </div>
    <script>
        function refreshServerInfo(){
            const req = new XMLHttpRequest();
            req.addEventListener('load', function(){
                //this.resonseText는 JSON이 들어있는 문자열입니다.
                //JSON.parse를 써서 문자열을 객체로 바꿉니다.
                const data = JSON.parse(this.responseText);

                //이 예제에서는 클래스가 serverInfo인 <div>의 텍스트만 교체합니다.
                const serverInfo = document.querySelector('.serverInfo');

                //서버에서 반환한 객체를 키 기준으로 순회합니다.
                Object.keys(data).forEach(p => {
                    //텍스트를 교체할 요소를 찾습니다.
                    const replacements = serverInfo.querySelectorAll(`[data-replace="${p}"]`);

                    //서버에서 받은 값으로 텍스트를 교체합니다.
                    for(let r of replacements){
                        r.textContent = data[p];
                    }
                });
            });

            req.open('GET', 'http://localhost:7070', true);
            req.send();
        }

        refreshServerInfo();
    </script>
</body>
</html>

간단하게 Ajax 요청에 관한 기본적인 개념만 설명해보았습니다. 좀 더 자세히 알고싶다면 MDN에서 XMLHttpRequest를 설명한 문서를 참고해보세요.

 

 

참고도서 : 러닝 자바스크립트

'DEV > JS' 카테고리의 다른 글

[JS]Promise (프라미스) - 2  (0) 2019.11.21
[JS]Promise (프라미스) - 1  (0) 2019.11.20
[JS]이벤트 버블링과 캡처링  (0) 2019.11.15
[JS]moment.js를 이용한 날짜 형식 다루기  (0) 2019.11.13
[JS]날짜 데이터 전송하기  (0) 2019.11.13
'DEV/JS' Related Articles more
Comments