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

On-screen notes

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

AJAX

AJAX stands for Asynchronous JavaScript And XML. Sometimes it's written as AJAJ instead when JSON is used in place of XML.

Old JavaScript ran only in response to local events like timers, mouse and keyboard input, and the page loading.

AJAX allows background processing, particularly of network communication. It enables you to do GETs and POSTs in the background, allowing for 'single page' web apps that don't require constant reloading. This is in contrast to older web apps, which had to reload any time an action changed the state of the page (bad GUI design!). AJAX is based on XMLHttpRequest - originally an ActiveX object. It was written by Microsoft for Outlook Web Access to implement additional functionality. It is now a native feature.

jQuery provides nicer interfaces to XMLHttpRequest. The jQuery methods we're interested in:

• $.getJSON() : requests a JavaScript object from the server
• $.post()  : sends a JavaScript object to the server

The arguments for these methods consist of a URL (the path on the server), and a callback function. We don't know how long the server will take to respond, so callbacks are necessary!

Coding with jQuery

The $ sign is a substitution for "jQuery".

To add jQuery to a Jade document, we can add the following lines:

script(src="//code.jquery.com/jquery-1.11.2.min.js")
script(src="//code.jquery.com/jquery-migrate-1.2.1.min.js")

Similarly, to add client-side code: script(src="/javascripts/notes.js")

These scripts should be placed in the head of the document. The code in notes.js will be run once the page is fully loaded. Generally, for scripts running on the client side, all the code should be contained inside a function for the 'on page load' event, like so:

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

$.getJSON("/testdata", function(data) {...} simply translates to a GET request. If the GET request fails, the code in function will not run. testdata does not need to be a physical file. We can define it as a route in index.js:

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

To access an element in our Jade code from notes.js, we first want to give the element an ID. In Jade, this is done by prefacing it with the # sign: p#otheruser. This is semantically equivalent to <p id = "otheruser"> in HTML. Then we can query it from notes.js like so: $("#otheruser").text("Or is it " + data.username + "?");

The indicated text will be loaded in place of #otheruser after the page has loaded.

Changes made to the DOM by client side scripts will not be visible when viewed from the page source, as the source only shows what was received from the server. The above code will appear as <p id = "otheruser"> in the page source rather than the change indicated in notes.js. The element inspector, however, does show changes made on the client side.