What is Ajax? (Ajax란 무엇을까?)
Ajax 라는 것은 정보 교환 기법 중 하나입니다. javascript 구문 내에서 xml을 이용해서 비동기를 사용하기만 하면 Ajax이라고 할 수 있습니다.
Ajax를 사용하기 위해서 "XMLHttpRequest"라는 방식을 사용하고, 더 간단하고 편한 라이브러리들이 분명 존재하겠지만, 그 라이브러리들의 기반이 되는 방식이 XMLHttpRequest를 사용하여 Ajax를 사용해 볼 것입니다.
먼저 아래의 게시물을 보고 기본환경을 구축을 하고 시작하도록 하겠습니다.
https://taehyundev.tistory.com/4
[JavaScript] Node.js - express 프레임워크 시작하기
Express란 무엇일까? ( What is Express ) 앞서 설명한 Flask 처럼 웹 어플리케이션을 만드는 프레임워크이다. Express 프레임워크를 사용하기 전 ( Setting ) 윈도우즈 콘솔창에서 아래와 같이 입력하였을 때 버..
taehyundev.tistory.com
위의 게시물을 보시고, 기본적인 구현을 끝내셨다면, app.js만 있던 폴더에 public 이라는 폴더를 추가해주고,
public 이라는 폴더안에에 form.html 이라는 파일을 추가하도록 합니다.
<form.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>
<form method="POST">
<input class="name" type="text" name= "name"><br>
</form>
<button class="ajax"> ajax </button>
<div class="result"></div>
<script>
var ajax = document.querySelector('.ajax');
ajax.addEventListener('click', function(){
var inputData = document.forms[0].elements[0].value;
sendAjax("http://localhost:3000/ajax", inputData);
})
function sendAjax(url,data){
var nameData = {'name' : data};
nameData = JSON.stringify(nameData);
var xhr =new XMLHttpRequest();
xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(nameData);
xhr.addEventListener('load', function(){
//console.log(xhr.responseText)
var result = JSON.parse(xhr.responseText);
var resultDiv = document.querySelector('.result');
resultDiv.innerHTML = `my name is ${result.name}`;
})
}
</script>
</body>
</html>form.html 의 동작은 .ajax의 클래스를 가진 button을 클릭하면, 클릭 이벤트를 받아서 text의 값을 inputData에 넣고 sendAjax 함수로 넘겨줍니다. 넘길 때, 인자값으로 url과 data값을 올려줍니다.
nameData라는 변수에 딕셔너리 형태로 data를 담아주고, JSON형태로 변환 시킵니다. 이후 xhr 변수에 XMLHttpRequest라는 객체를 생성시켜주고, url에 POST콜을 보냅니다(요청). RequestHeader도 셋팅해주고 send를 통해서 nameData를 보냅니다. 그 이후 load 동작이 실행되면 .result 클래스를 가진 div에 `my name is ${result.name}` 이라는 정보가 화면으로 출력 되게 된다.
그리고 app.js 파일을 아래와 같이 수정하도록 합니다.
<app.js>
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.listen(3000, function(){
console.log("Start Server");
})
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:true}))
app.get('/', function(req,res){
res.sendFile(__dirname+"/public/form.html");
})
app.post('/ajax',function(req,res){
console.log(req.body.name);
var responseData = {'name' : req.body.name};
res.json(responseData);
})
위에서 말한대로 url로 POST 콜을 보내면, app.js의 app.post에서 받아서 동작을 진행한다.(/ajax)
responseData에 값을 다시 담아서 res.json으로 데이터를 보내준다. 그 데이터를 기반으로 화면에 값이 출력되게 된다.
수정이 끝난이후 js 파일 내에서 생소한 것들이 보일 텐데, 먼저 body-parser 입니다.
json 형태의 파일을 사용하기 위해서 parser를 진행시키는 모듈입니다. 아래와 같은 명령을 수행하여 설치를 진행하면 됩니다.
C:\> npm install body-parser --save
app.js 의 코드중 아래의 부분이 json 형태로 parser를 진행하는 작업을 수행합니다.
(XMLHttpRequest 방식을 사용했으므로 xml을 json형태로 변환시키는 작업임)
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:true}))
이로서 Ajax에 대한 간단한 설명은 여기서 끝내도록 하겠습니다.
혹시 모르는 부분이나, 피드백이 있으시면 댓글로 써주시면 감사하겠습니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] Node.js - express 프레임워크 시작하기 (0) | 2020.03.15 |
|---|
