Node.js Ajax Request

Question

I am running a node server that has no data on it. I want to push data up to the server and then take it down again on a button click.I've tried following other examples but I'm quite new to ajax requests and I want to understand the code that I'm writing this is what I have so far:

***script.js(Client file)***
$(document).ready(function() {
$.ajax({
    url: 'http://localhost:8080',
    dataType: "jsonp",
    data: '{"data": "TEST"}',
    type: 'POST',
    jsonpCallback: 'callback', 
    success: function (data) {
        var ret = jQuery.parseJSON(data);
        console.log(data)
        console.log('Success: ')
    },
    error: function (xhr, status, error) {
        console.log('Error: ' + error.message);

    },
});




$('#button').click(function(){

$.ajax({
    url: 'http://localhost:8080',
    dataType: "jsonp",

    type: 'GET',
    jsonpCallback: "callback", 
    success: function (data) {
        var ret = jQuery.parseJSON(data);
        console.log(data)
        console.log('Success: Kick Ass!')
    },
    error: function (xhr, status, error) {
        console.log('SOMETHING HAS GONE WRONG :(');

    },
});
});
});




    ***Index.js(Server File)***
var http = require('http');
var util = require('util')
http.createServer(function (req, res) {

    console.log('Request received: ');
    util.log(util.inspect(req)) // this line helps you inspect the request so you can see whether the data is in the url (GET) or the req body (POST)
    util.log('Request recieved: \nmethod: ' + req.method + '\nurl: ' + req.url) // this line logs just the method and url

    res.writeHead(200, { 'Content-Type': 'text/plain' });
    req.on('data', function (chunk) {
        console.log('GOT DATA!');
    });
    res.end('callback(\'{\"msg\": \"OK\"}\')');

}).listen(8080);
console.log('Server running on port 8080');

Please help. Thanks so much!

Answer 1

I implemented a server in a way to serve your requests of showing the index html, saving the user on server memory, and sending the user (stored on the memory server) to the client.

My index.js file looks like this:

var http = require('http');
var url = require('url');
var querystring = require('querystring');
var fs = require('fs');

var server = http.createServer();

var userStoredInMemory = {};

// listening requests from clients
server.on('request', function (request, response) {
  var currentRoute = url.format(request.url);
  var currentMethod = request.method;
  var requestBody = '';

  switch (currentRoute) {
    // serving the html index to client
    case '/':
      fs.readFile(__dirname + '/index.html', function (err, data) {
        var headers = {
          'Content-Type': 'text/html'
        };

        response.writeHead(200, headers);
        response.end(data);
      });

    break;

    // handling requests from client with route /api/user
    case '/api/user':
      // if request is a POST, then the user is sending a user
      if (currentMethod === 'POST') {
        // reading the body of the request
        request.on('data', function (chunk) {
          requestBody += chunk.toString();
        });

        // once the body of the request was loaded
        request.on('end', function () {

          // saving the user sent on the request body
          userStoredInMemory = querystring.parse(requestBody);

          // responding to the user
          var headers = {
            'Content-Type': 'text/plain'
          };
          response.writeHead(200, headers);
          response.end('User was already stored.');
        });
      } 

      // if request is a GET, then the client is requesting
      // to see the user stored.
      else if (currentMethod === 'GET') {
        var headers = {
          'Content-Type': 'application/json'
        };

        response.writeHead(200, headers);
        response.end(JSON.stringify(userStoredInMemory));
      }
    break;
  }
});

server.listen(8080, function () {
  console.log('server up and running at 8080 port');
});

And the index html file looks like this:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<h1>Hello World!</h1>

  <div>
    <h1>Sending User</h1>
    <form id="userForm">
      <label for="name">Name</label>
      <input id="name" name="name"/>
      <br/>

      <label for="age">Age</label>
      <input id="age" name="age"/>
      <br/>

      <input type="submit" value="Send"/>
    </form>
  </div>

  <br/>
  <br/>

  <div>
    <h2>Click the button below for getting User from server and showing it</h2>
    <button id="getUserButton">Get User</button>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <script>
    $(document).ready(function () {

      $('#userForm').submit(function (e) {
        var user = {
          name: $('input[name=name]').val(),
          age: $('input[name=age]').val()
        };

        $.ajax({
          type: 'POST',
          url: 'http://localhost:8080/api/user',
          data: user
        })
        .done(function (data) {
          // clear form
          $('input[name=name]').val('');
          $('input[name=age]').val('')


          alert(data);
        });

        e.preventDefault();
      });

      $('#getUserButton').click(function (e) {
        $.ajax({
          type: 'GET',
          url: 'http://localhost:8080/api/user'
        })
        .done(function (data) {
          alert(JSON.stringify(data));
        });
      });
    });
  </script>
</body>
</html>

But look how the code and complexity reduces when you use a framework when you are creating your HTTP Server, in this case Express.JS, first install express and body parser :

so my index.js looked like:

var express = require('express');
var app = express();

var bodyParser = require('body-parser');

var userStoredInMemory = {};

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

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.get('/api/user', function (req, res) {
  res.json(userStoredInMemory);
});

app.post('/api/user', function (req, res) {
  userStoredInMemory = req.body;
  res.send('User was already stored from express.');
});

app.listen(8080, function () {
  console.log('server up and running at 8080 port');
});

Node.js Ajax Request

Question

1 answers

solution1
2 2015-06-11 13:55:57

Node.js Ajax Request

Question

1 answers

solution1 2 2015-06-11 13:55:57

solution1
2 2015-06-11 13:55:57