Subsecciones


Práctica: Comma Separated Values. CSV usando Ajax

Ejemplo usando Ajax con jQuery y Express.js

Código del server:

[~/javascript/jquery/how-jquery-works-tutorial(getallparams)]$ cat app.js
var express = require('express');
var app = express();
var path = require('path');

app.use(express.static('public'));

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.get('/', function (req, res) {
  res.render('index', { title: 'Express' });
})

app.get('/chuchu', function (req, res) {
  var isAjaxRequest = req.xhr;
  console.log(isAjaxRequest);
  if (isAjaxRequest) {
    console.log(req.query);
    res.send('{"answer": "Server responds: hello world!"}')
  }
  else {
    res.send('not an ajax request');
  }
});

var server = app.listen(3000, function () {

  var host = server.address().address
  var port = server.address().port

  console.log('Example app listening at http://%s:%s', host, port)

});

To use callbacks, it is important to know how to pass them into their parent function.

En el directorio views hemos puesto el template:

[~/javascript/jquery/how-jquery-works-tutorial(getallparams)]$ cat views/index.ejs 
<!doctype html>
<html>
  <head>
    <title><%- title %></title>
  </head>
  <body>
    <h1><%- title  %></h1>
    <ul>
      <li><a href="http://jquery.com/" id="jq">jQuery</a>
      <li><a href="/chuchu">Visit chuchu!</a>
    </ul>
    <div class="result"></div>
    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script>
      $( document ).ready(function() {
          $( "#jq" ).click(function( event ) {
              event.preventDefault();
              $.get( "/chuchu", {nombres: ["juan", "pedro"]}, function( data ) {
                $( ".result" ).html( data["answer"]);
                console.log(data);
              }, 'json');
          });
      });
    </script>
  </body>
</html>

Estas son las dependencias:

[~/javascript/jquery/how-jquery-works-tutorial(getallparams)]$ cat package.json 
{
  "name": "ajaxjquery",
  "version": "0.0.0",
  "description": "",
  "main": "hello.js",
  "dependencies": {
    "express": "*",
    "ejs": "*",
    "gulp-shell": "*",
    "body-parser": "~1.12.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "node hello.js"
  },
  "author": "",
  "license": "ISC"
}
Además hemos instalado a nivel global gulp y node-supervisor.

Podemos arrancar el servidor usando este gulpfile:

[~/javascript/jquery/how-jquery-works-tutorial(getallparams)]$ cat gulpfile.js 
var gulp    = require('gulp');
var shell = require('gulp-shell');

gulp.task('default', ['server']);

// npm install supervisor -g
gulp.task('server', function () {
  return gulp.src('').pipe(shell([ 'node-supervisor app.js' ]));
});

gulp.task('open', function() {
  return gulp.src('').
           pipe(shell("open https://github.com/crguezl/how-jquery-works-tutorial/tree/getallparams"));
});

Ejemplo de como Desplegar una Aplicación Express sobre Node.JS en Heroku

Véase:

GitHub Issues

Mastering Issues

Requisitos de la Práctica

A los requisitos de la práctica Comma Separated Values. CSV 1.4 anterior:

Le añadimos

Casiano Rodríguez León
2016-03-27