2020.02.04 백엔드 공부(3) (Ajax, express, body-parser, ejs)

앞에 내용을 복습하면서 중간 실습 푸는 형식으로 진행

 

처음에 

 

npm init 

 

express, body-parser, ejs 설치하였다.  ajax 실행 시 오류로 인해 express-cache-controller 까지 설치해주었다.

 

var express=require('express')
var app=express()
var bodyParser=require('body-Parser')

 

사용해 준다는 뜻.

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:true}))

 

post 형식으로 주고받기 위해 bodyParser를 이용

 

res.sendFile(__dirname+"/public/main.html") 

 

public 안의 main.html 로 보내줌

 

  form action="email_post" method="post"

email :  <input type="text" name="email">

<input type="submit"> 

 

submit 시에 post 방식으로 email_post가 실행이됨 칸안에있는 것의 id는 email 임

 

app.post('/email_post',function(req,res){
  console.log(req.body.email)
  res.render('email.ejs',{'email':req.body.email})
})

 

받아온것 req.body 에서 .email .. 즉 id email를 콘솔에 찍어주고 post는 render로 보내는데, res.render 보내고 email.ejs에, object 형식으로 id email에 req.body.email를 넣어서 보낸다.

 

    

welcome <%=email%> email.ejs에 이렇게 email값을 받아서 출력한다.

 

ejs 를 사용하기 위해서 

app.set('view engine','ejs') 를 선언해 주었다. view engine 을 ejs로 처리하겠다는 뜻

 

    document.querySelector('.ajaxsend').addEventListener('click',
    function(){
      var inputdata=document.forms[0].elements[0].value;
      sendAjax('http://127.0.0.1:3000/ajax_send_email',inputdata);
    })

    function sendAjax(url,data){
      var data={'email': data};
      data=JSON.stringify(data);

      var xhr=new XMLHttpRequest();
      xhr.open('POST',url);
      xhr.setRequestHeader('Content-Type',"application/json");
      xhr.send(data);

      xhr.addEventListener('load',function(){
        var result=JSON.parse(xhr.responseText);
        if(result.result!="ok") return;
        document.querySelector(".result").innerHTML=result.email;
      });
    }

 

querySelector 는 안의 'selector' 의 첫 번째에 해당하는 부분을 셀렉함. 그것에 addEventListener 이벤트 리스너를 추가함 그 리스너 이름은 click 이고 function 선언

 

var inputdata=document.forms[0].elements[0].value;

불러오는 중입니다...

form안의 첫 번째의 element의 첫 번째 value 값 

첫 번째 form의 첫 번째 element니깐 email 값이다.

 

sendAjax('http://127.0.0.1:3000/ajax_send_email',inputdata);

ajax를 보냄

 

    function sendAjax(url,data){
      var data={'email': data};
      data=JSON.stringify(data);

      var xhr=new XMLHttpRequest();
      xhr.open('POST',url);
      xhr.setRequestHeader('Content-Type',"application/json");
      xhr.send(data);

      xhr.addEventListener('load',function(){
        var result=JSON.parse(xhr.responseText);
        if(result.result!="ok") return;
        document.querySelector(".result").innerHTML=result.email;
      });
    }

sendAjax 함수 선언

 

app.post('/ajax_send_email',function(req,res){
  console.log(req.body.email);
  var responseData={'result':'ok','email':req.body.email};
  res.json(responseData);
})

 

보내면 받음.

console에 찍고 responseData에 object를 만듬 그리고 res.json으로 responseData를 보내줌

res.json은 클라이언트로 json 을 보내는 것임

https://luckyyowu.tistory.com/346 참조

[node.js] express.js 라우트 요청 객체(req), 응답 객체(res) 정리

JSON은 경량의 data 교환 방식이다.

JSON이란?

JSON은 JavaScript Object Notation의 약자로, 브라우저와 서버사이에서 오고가는 데이터의 형식이다.

 

 

JSON.parse()란?

• parse 메소드는 string 객체를 json 객체로 변환시켜줍니다.

 

 

JSON.stringify란?

• stringify 메소드는 json 객체를 String 객체로 변환시켜 줍니다

    function sendAjax(url,data){ 
      var data={'email': data}; 
      data=JSON.stringify(data); 

      var xhr=new XMLHttpRequest(); 
      xhr.open('POST',url); 
      xhr.setRequestHeader('Content-Type',"application/json"); 
      xhr.send(data); 

      xhr.addEventListener('load',function(){ 
        var result=JSON.parse(xhr.responseText); 
        if(result.result!="ok") return; 
        document.querySelector(".result").innerHTML=result.email; 
      }); 
    }

 

data를 string 객체로 바꿔줌

 

XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위하여 사용됩니다. 전체 페이지의 새로고침없이도 URL 로부터 데이터를 받아올 수 있습니다. 이는 웹 페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해줍니다. XMLHttpRequest 는 AJAX 프로그래밍에 주로 사용됩니다.

 

이 XMLHttpRequest메소드 open()는 새로 작성된 요청을 초기화하거나 기존 요청을 다시 초기화합니다.

XMLHttpRequest .open ( method , url [, async [, user [, password ]]])

 

https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started

Ajax 시작하기

참조

 

http_request.responseText – 서버의 응답을 텍스트 문자열로 반환할 것이다.

 

document.querySelector(".result").innerHTML=result.email;

불러오는 중입니다...

result 를 클릭해서 result.email 값으로 .innerHTML 를 통해 바꿔주는 형식이다.