1. Ajax란?
Ajax란, JavaScript의 라이브러리중 하나이다. 브라우저가 가지고 있는 Request 객체를 이용해서 전체 페이지를 새로 고치지 않고 페이지의 일부만을 데이터를 로드하는 비동기 방식 기법이다. 즉, 쉽게 말하자면 자바스트립트를 통해서 서버에 데이터를 요청하는 것이다.
1.1 비동기 방식이란?
웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며 Ajax를 통해서 서버에 요청한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미이다. 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는대 이미지, 스크립트, 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생할 수 있게 되지만 비동기식 방식은 필요한 부분만 불러와 사용할 수 있다는 장점이 있다.
1.2 장점
- 웹페이지의 속도향상
- 서버의 처리가 완료될 때까지 기다리지 않고 처리 가능
- 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어듬
- 기존 웹에서는 불가능했던 다양한 UI를 가능
1.3 단점
- 히스토리 관리 X
- 페이지 이동 없는 통신으로 보안상의 문제
- 연속으로 데이터를 요청하면 서부 부하 증가
- Request를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다 (요청이 완료되기 전에 사용자가 페이지를 떠나거사 오작동할 우려)
- Ajax를 쓸 수 없는 브라우저 이슈?!
- HTTP 클라이언트 가능이 한정
- Script로 작성되므로 디버깅이 용이하지 않다.
- 동일-출처 정책으로 인해 다른 도메인과는 통신이 불가능하다(Cross-Domain 문제)
2. 사전 환경 설정
JavaScript의 라이브러리중 하나이기 때문에 npm 모듈을 통해 사용하려고 한다. 필요한 모듈은 express, ejs 2개만 install 하면 된다!! node.js를 다운을 받아준 다음에 파일이 있는 디렉토리에 npm i express ejs 명령어를 주면된다. 아래를 참고하면 편하다!
2021.07.02 - [스마트한 코딩 공부] - [Node.js] Node.js 로 간단한 웹서비스 만들기 #1
[Node.js] Node.js 로 간단한 웹서비스 만들기 #1
1. Node.js 란? Node.js 공식 홈페이지에 들어가면 "Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다." 라는 설명이 나온다. 간단하게 말하면 Node.js는 javascript를 실행해주는 환경..
smartseoullife.tistory.com
index.js에서 기본적으로 사용하는 코드이다. 코드가 실행되면 기본적으로 index.ejs 페이지가 호출된다.
//index.js
var express = require("express");
var path = require("path");
var app = express();
app.set("views", path.join( __dirname , "views") );
app.set("view engine",'ejs');
app.use(express.json());
app.use(express.urlencoded({ extended : false}));
app.use(express.static(path.join(__dirname, 'public')));
app.get("/",function(req,res){
res.render("index");
});
var port = 3000;
app.listen(port, function(){
console.log("웹서버 시작",port);
});//view.ejs 기본 구성
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<p id ="text"></p> <!-- function의 명령어로 메세지를 보여주는 부분 -->
</body>
</html>3. Ajax로 get, post 사용하기
3가지 코드로 나눠서 설명을 하려고 한다.
- index.ejs의 <script> 부분에 추가될 function 코드
- index.ejs의 <body> 부분에 추가될 코드
- index.js에 추가될 코드
3.1 ajax get 방식
//script
function Ajax(){
$.ajax({
url : "/ajax", //클라이언트가 HTTP요청을 보낼 서버의 주소
data : {
name : "nike",
phone : "0104234232",
division : "manager"
},
method : "GET",
datatype : "json"
})
.done(function(json){ //HTTP 요청이 성공하면 데이터가 done() 메소드로 전달
$("<h1>").text(json.name).appendTo("body"); //json.key값 = value 값 추출
$("<div>").html(json.html).appendTo("body"); //태그를 넣을 것이다
})
.fail(function(xhr, status, error){ //HTTP 요청이 실패하면 오류와 상태에 관한 정보가 전달
$("#text").html("오류가 발생했다.<br>")
.append("오류명: " + error + "<br>")
.append("상태 :" + status);
})
.always(function(xhr, status){ //요청이 완전히 완료됐을때 메세지 표시
$("#text").html("요청이 완료되었습니다!");
});
} <button onclick="Ajax()">Ajax Test</button>app.get("/ajax", function(req, res){
var name = req.query.name;
var phone = req.query.phone;
var division = req.query.division;
console.log(name, phone, division);
res.json({
name : name,
html : phone = "<br>" + division
})
})
Ajax Test 버튼을 클릭하면 아래와 같이 요청완료 메세지와 data 내용이 view.ejs <body>의 <p id ="text"></p> 부분에 표시된다. name 과 division을 각각 appendTo("body")명령어로 웹 페이지에 추가해줬다. appendTo 명령어를 사용했기 때문에 버튼을 누를때마다 메세지가 중복되서 추가된다.
3.2 ajax post 방식
function Ajax_post(){
$.ajax({
url : "/ajax", //클라이언트가 HTTP요청을 보낼 서버의 주소
data : {
message : "ajax post 연습"
},
method : "POST",
datatype : "json"
})
.done(function(json){ //HTTP 요청이 성공하면 데이터가 done() 메소드로 전달
$("<b>").html(json.message).appendTo("body"); //json.key값 = value 값 추출
})
.fail(function(xhr, status, error){ //HTTP 요청이 실패하면 오류와 상태에 관한 정보가 전달
$("#text").html("오류가 발생했다.<br>")
.append("오류명: " + error + "<br>")
.append("상태 :" + status);
})
.always(function(xhr, status){ //요청이 완전히 완료됐을때 메세지 표시
$("#text").html("요청이 완료되었습니다!");
});
}<button onclick="Ajax_post()">Ajax_post Test</button>app.post("/ajax", function(req,res){
var message = req.body.message;
console.log(message);
res.json({
message : "post 연습 잘 됐다"
})
})
위와 동일하게 data의 내용이 출력되고 res.json으로 데이터를 보내주었다.
3.3 get 방식
function get(){
$.get("/ajax_get",
{
name : "nike",
phone : "0104234232",
division : "manager"
},
function(data, status){
$("#text").html(data + "<br>" + status);
})
}<button onclick="get()">get_test</button>app.get("/ajax_get", function(req, res){
var name = req.query.name;
var phone = req.query.phone;
var division = req.query.division;
console.log(name, phone, division);
res.send("name: " + name + "phone :" + phone + "division :" + division)
})
동작시에 새로고침을 해주지 않으면 전에 눌렀던 버튼의 효과가 남아있을 수 있다. 리셋 명령어가 없기 때문에 !!
3.4 post 방식
function post(){
$.post("/ajax_post",
{
message : "ajax post 연습"
},
function(data, status){
$("#text").html(data + "<br>" + status);
})
}<button onclick="post()">post_test</button>app.post("/ajax_post", function(req,res){
var message = req.body.message;
console.log(message);
res.send("message :" + message)
})
3.5 json형태의 get 방식
function getJSON(){
var tem = $("#tem").val()
$.getJSON("/ajax_getJSON",
{
"tem" : tem
},
function(data){
$("#text").html(data.state);
})
}<input type ="number" id="tem" placeholder="온도"/>
<button onclick="getJSON()">getjson_test</button>app.get("/ajax_getJSON", function(req, res){
var tem = req.query.tem;
console.log(tem);
if (tem >32){
res.json({
state : "폭염주의"
})
}else{
res.json({
state : "날씨 괜춘"
})
}
})
data를 json형태로 불러와서 사용할 수도 있다. 다른 코드들과 다른점은 index.js 부분에서 var를 body가 아닌 query로 받는다는 것이다. 입력된 숫자가 32가 넘으면 "폭염주의" 메세지를, 그렇지 않으면 "날씨 괜춘" 메세지를 보내도록 만들었다.
'스마트한 개발 공부 > Node.js | Java | html' 카테고리의 다른 글
| [Node.js] 부트스트랩으로 그래프 그리기(router 사용) (0) | 2021.07.31 |
|---|---|
| [Node.js] Node.js에서 사용하는 MySQL (0) | 2021.07.13 |
| [jQuery] html에서 jQuery를 사용하는 방법 (0) | 2021.07.12 |
| [Node.js] Node.js에서 mysql을 이용하여 웹서비스 만들기 #2 (1) | 2021.07.09 |
| [Node.js] Node.js에서 mysql을 이용하여 웹서비스 만들기 #1 (0) | 2021.07.05 |