node.js-3(Ajax 사용) XMLHttpRequest 객체

node.js 수업

node.js-3(Ajax 사용) XMLHttpRequest 객체

줄라이퍼스트 2020. 2. 24. 17:59

AJAX란?

Asynchronous JavaScript and XML의 약자로, 말 그대로 JavaScript와 XML을 이용한

비동기적 정보 교환 기법이다.

※ 1. Ajax 요청을 활용한 동적 요소 생성 - html

data_html_async.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // AJAX(Asynchronous JavaScript And XML) : XMLHttpRequest을 이용한 기본
        // XMLHttpRequest 객체를 생성합니다.
        var request = new XMLHttpRequest();
        
        // onreqdystatechange 이벤트 속성에 함수를 설정
        request.onreadystatechange = function(event){
            // readyState가 4 => server로 부터 데이터 모두 받았을 때
            if(request.readyState == 4){
                // status가 200 => 서버가 에러없이 정상적으로 처리했다는 의미
                if(request.status == 200){
                   // 데이터 출력                   
                    document.body.innerHTML += request.responseText;
                };              
            };
        };
        request.open('GET','http://127.0.0.1:8003/data.html',true);

        // send() 메서드에 소비되는 시간 측정
        request.send();
    </script>
</body>
</html>

server.js

// 모듈 추출
var http = require('http');
var express = require('express');
var cors = require('cors');
var bodyParser = require('body-parser');




// 변수를 선언합니다.

var items=[{
    name: '우유',
    price: '2000'
},{
    name:'홍차',
    price: '5000'
},{
    name:'커피',
    price:'5000'
}];

// 웹 서버 생성
var app = express();
app.use(express.static('public2'));
app.use(bodyParser.urlencoded({extended: false}));
app.use(cors());

app.all('/data.html', function(request,response){
    var output ='';
    output += '<!DOCTYPE html>';
    output += '<html>';
    output += '<head>';
    output += '     <title>Data HTML</title>';
    output += '</head>';
    output += '<body>';
    items.forEach(function(item){
        output +='<div>';
        output +='       <h1>'+ item.name + '</h1>';
        output +='       <h2>'+ item.price + '</h2>';
        output +='</div>';
    });
    output += "</body>";
    output += "</html>";
    response.send(output);
    
});





// 웹 서버 실행
http.createServer(app).listen(8003,function(){
    console.log('Server running at http://127.0.0.1:8003');
});

※ 1. 실행화면

1-1. chorme 개발자 도구를 이용해서 보면 정상적으로 200번(성공) 이 뜸

※ data_html_async.html 에서 request.open(); 파일 이름을 잘못 입력 할 경우에.

1-2. 404에러(클라이언트) data.html이 아닌 dataa.html로 입력했을 경우 오류가뜲

※ 2. Ajax 요청을 활용한 동적 요소 생성 - json

data_html_async.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <script>
      
        var request = new XMLHttpRequest();
        // onreqdystatechange 이벤트 속성에 함수를 설정
        request.onreadystatechange = function(event){
            // readyState가 4 => server로 부터 데이터 모두 받았을 때
            if(request.readyState == 4){
                // status가 200 => 서버가 에러없이 정상적으로 처리했다는 의미
                if(request.status == 200){
                    // 데이터를 가공합니다.
                    
                    var json = JSON.parse(request.responseText);
                    var output = '';

                    for(var i =0; i<json.length; i++){
                        for(var key in json[i]){
                            output += '<h1>' + i + ':' + json[i][key] + '</h1>'
                        }
                    }
                    // 출력합니다.
                    document.body.innerHTML += output;
                };              
            };
        };
        request.open('GET','http://127.0.0.1:8003/data.json',true);
        request.send();    


       
    </script>
</body>
</html>

server.js(기존 코드에서 json 추가)

// 모듈 추출
var http = require('http');
var express = require('express');
var cors = require('cors');
var bodyParser = require('body-parser');




// 변수를 선언합니다.

var items=[{
    name: '우유',
    price: '2000'
},{
    name:'홍차',
    price: '5000'
},{
    name:'커피',
    price:'5000'
}];

// 웹 서버 생성
var app = express();
app.use(express.static('public2'));
app.use(bodyParser.urlencoded({extended: false}));
app.use(cors());

app.all('/data.html', function(request,response){
    var output ='';
    output += '<!DOCTYPE html>';
    output += '<html>';
    output += '<head>';
    output += '     <title>Data HTML</title>';
    output += '</head>';
    output += '<body>';
    items.forEach(function(item){
        output +='<div>';
        output +='       <h1>'+ item.name + '</h1>';
        output +='       <h2>'+ item.price + '</h2>';
        output +='</div>';
    });
    output += "</body>";
    output += "</html>";
    response.send(output);
    
});

// json data format으로 client에게 보내는 방식
app.all('/data.json',function(request, response){
    // send : 일반 javascript 오브젝트(객체)를 web browser 전송할 때 자동으로 json 형태로 변환하여 넘겨줌
    response.send(items);
});





// 웹 서버 실행
http.createServer(app).listen(8003,function(){
    console.log('Server running at http://127.0.0.1:8003');
});

※ 2. 실행화면

※ 3. Ajax 요청을 활용한 동적 요소 생성 - xml

04_data_xml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <script>
      
        var request = new XMLHttpRequest();
        // onreqdystatechange 이벤트 속성에 함수를 설정
        request.onreadystatechange = function(event){
            // readyState가 4 => server로 부터 데이터 모두 받았을 때
            if(request.readyState == 4){
                // status가 200 => 서버가 에러없이 정상적으로 처리했다는 의미
                if(request.status == 200){
                    // 변수를 선언합니다.
                    
                    parser = new DOMParser();
                    var xml = parser.parseFromString(request.responseText,"text/xml");

                    // 데이터를 가공합니다.
                    var names = xml.getElementsByTagName('name');
                    var prices = xml.getElementsByTagName('price');

                    for(var i=0; i<names.length; i++){
                        var name = names[i].childNodes[0].nodeValue;
                        var price = prices[i].childNodes[0].nodeValue;
                        document.body.innerHTML += '<h1>' + name + '</h1>';
                        document.body.innerHTML += '<h2>' + price + '</h2>';
                    }
                    
                    // 출력합니다.
                    document.body.innerHTML += output;
                };              
            };
        };
        request.open('GET','http://127.0.0.1:8003/data.xml',true);
        request.send();        


       
    </script>
</body>
</html>

server.js(기존 코드에서xml 추가)

// 모듈 추출
var http = require('http');
var express = require('express');
var cors = require('cors');
var bodyParser = require('body-parser');




// 변수를 선언합니다.

var items=[{
    name: '우유',
    price: '2000'
},{
    name:'홍차',
    price: '5000'
},{
    name:'커피',
    price:'5000'
}];

// 웹 서버 생성
var app = express();
app.use(express.static('public2'));
app.use(bodyParser.urlencoded({extended: false}));
app.use(cors());

app.all('/data.html', function(request,response){
    var output ='';
    output += '<!DOCTYPE html>';
    output += '<html>';
    output += '<head>';
    output += '     <title>Data HTML</title>';
    output += '</head>';
    output += '<body>';
    items.forEach(function(item){
        output +='<div>';
        output +='       <h1>'+ item.name + '</h1>';
        output +='       <h2>'+ item.price + '</h2>';
        output +='</div>';
    });
    output += "</body>";
    output += "</html>";
    response.send(output);
    
});

// json data format으로 client에게 보내는 방식
app.all('/data.json',function(request, response){
    // send : 일반 javascript 오브젝트(객체)를 web browser 전송할 때 자동으로 json 형태로 변환하여 넘겨줌
    response.send(items);
});



app.all('/data.xml', function(request,response){
    var output ='';    
    output += '<?xml version="1.0" encoding="UTF-8" ?>';
    output += '<products>';
    items.forEach(function(item){
        output +='<product>';
        output +='       <name>'+ item.name + '</name>';
        output +='       <price>'+ item.price + '</price>';
        output +='</product>';
    });
    output += "</products>";    
    // response.type('text/xml');
    response.setHeader ("Content-Type","text/xml");
    response.send(output);
});




// 웹 서버 실행
http.createServer(app).listen(8003,function(){
    console.log('Server running at http://127.0.0.1:8003');
});

※ 3. 실행화면

'node.js 수업' 카테고리의 다른 글

node.js-6 CRUD2 실습- jQuery_ajax (0)	2020.02.25
node.js-5(Ajax 사용) 데이터사용-(get(), post(), put(), delte()) (0)	2020.02.25
node.js-4 실습 (0)	2020.02.24
node.js-2 클라이언트 요청처리(put(), del()) (0)	2020.02.24
node.js-1 server로 데이터 전달( html, json, xml,parameter) (0)	2020.02.21

현재글node.js-3(Ajax 사용) XMLHttpRequest 객체

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

줄라이퍼스트

node.js-3(Ajax 사용) XMLHttpRequest 객체

AJAX란?

Asynchronous JavaScript and XML의 약자로, 말 그대로 JavaScript와 XML을 이용한

비동기적 정보 교환 기법이다.

※ 1. Ajax 요청을 활용한 동적 요소 생성 - html

server.js

※ 1. 실행화면

※ 2. Ajax 요청을 활용한 동적 요소 생성 - json

※ 2. 실행화면

※ 3. Ajax 요청을 활용한 동적 요소 생성 - xml

※ 3. 실행화면

'node.js 수업' 카테고리의 다른 글

'node.js 수업'의 다른글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역