Vanilla Javascript - #31 Ajax com NodeJS
02/07/2019No tutorial de hoje trabalharemos o ajax com o NodeJS, ou seja, trabalharemos com Javascript tanto no lado frontend quanto backend.
Antes de mais nada precisamos baixar o NodeJS
Posteriormente abriremos o terminal do sistema operacional, no windows vá em iniciar >> cmd
Vá até a pasta raiz do seu projeto, no caso utilizamos:
cd c:/wamp64/wwwPosteriormente instalaremos os pacotes node pra estarmos trabalhando de forma mais rápida e simples:
Express
� um framework que auxilia bastante a utilização do node.
npm install --save expressNodemon
O módulo nodemon facilita bastante para que o servidor atualize as mudanças automaticamente:
npm install --save nodemonBody Parser
Este módulo facilita o recebimento de dados advindos de formulários.
npm install --save body-parserCors
Oferece as permissões necessárias para trabalhar com requisições na linguagem backend.
npm install --save corsCriando o arquivo app.js
O arquivo app.js é o core do nosso sistema. Nele receberemos todos os módulos externos, configuraremos nosso servidor e nossas rotas de acesso.
//Constantes
'use strict';
const express=require('express');
const bodyParser=require('body-parser');
const cors=require('cors');
let app=express();
app.use(cors());
let urlencodedParser=bodyParser.urlencoded({extended:false});
app.get('/',function(req,res){
res.send('Hi');
});
let port=3000 || process.env.PORT;
app.listen(port);Até agora trabalhamos no lado servidor com o NodeJS. Agora trabalharemos com o arquivo javascript.js no lado cliente.
Vamos criar primeiramente um index.html linkando nosso javascript.js (lado cliente)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Ajax com NodeJS</title>
</head>
<body>
<script src="javascript.js"></script>
</body>
</html>E o nosso javascript.js ficará da seguinte forma:
(function readyJS(win,doc){
'use strict';
let ajax=new XMLHttpRequest();
ajax.open('GET','http://localhost:3000');
ajax.onreadystatechange=function(){
console.log(ajax.responseText);
};
ajax.send();
})(window,document);Sucesso nos códigos e na vida!
Posts Relacionados
