WebFund 2015W Lecture 15

Video

The video from the lecture given on March 4, 2015 is now available.

Code

Files from persistent-notes that were changed/added:

public/javascripts/notes.js

$(function() {
    $.getJSON("/testdata", function(data) {
        $("#otheruser").text("Or is it " + data.username + "?");
    });
});

views/layout.jade

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src="//code.jquery.com/jquery-1.11.2.min.js")
    script(src="//code.jquery.com/jquery-migrate-1.2.1.min.js")
    block header
  body
    block content

views/notes.jade

extends layout

block header
  script(src="/javascripts/notes.js")

block content
  h1 #{username} Account
  p Welcome #{username}

  p#otheruser

  - if(error)
    div.error #{error}

  form(action="/logout", method="post")
        button(type="submit") Logout
  
  h2 Notes
  ul
    - for (i=0; i < userNotes.length; i++)
      li
        div
          b= userNotes[i].title + ": "
          -var note_url = "/edit/" + userNotes[i]._id
          a(href=note_url) [edit]
          p!= userNotes[i].content
  form(action="/new", method="post")
        button(type="submit") New Note

routes/index.js

// add before modules.exports line at the end

router.get("/testdata", function(req, res) {
    res.send({"username": "Bob"});
});

Notes

From Lecture:

AJAX
----

Asynchronous JavaScript And XML

more AJAJ (XML => JSON)

Old JavaScript just ran in response to local events
 - timer
 - mouse, keyboard
 - on page load

AJAX allows background processing, particularly of network communication
 - do GETs and POSTs in the background

Allows for "single page" web apps

XMLHttpRequest - originally an ActiveX object
 - now native
 - written by Microsoft for Outlook Web Access

jQuery provides nicer interfaces to XMLHttpRequest
* $.getJSON()
* $.post()

Arguments:
 - URL (path on the server)
 - callback