Client-side Interactivity Through Javascript – jQuery and AJAX

Posted on by

Jason Woodward
Director of Administrative Computing, Cornell University
@jdwcornell

October 4, 2009

http://2009.highedweb.org/EventDetail.aspx?guid=4c46d953-9dbb-495e-b8b0-02fd694e7aa4

http://heweb09.jdwcornell.com/links.html

Part 0: Bookkeeping

Part 1: Tech Review

JSON

XML

XHTML

CSS

HTTP

DOM

JavaScript

Part 2: jQuery

$ is a function as in $(document) that returns jQuery object.

ready is the method

Getting Started

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>#heweb09 Twitter Session Companion</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
      alert('DOM ready!');
      });
    </script>
  </head>
  <body>
  </body>
</html>

Selectors

Traversal

Manipulation

CSS

Events

Effects and UI

Ajax

Browser State Preservation

Use browser state preservation when someone bookmarks a page with AJAX code.

Part 3: The Project

Wireframe / Mockup

Break it Down

Build The Pieces

Putting them Together

Appendix

#heweb09 twitter session helper API

http://heweb09.jdwcornell.com/oauth/twitter/login

http://heweb09.jdwcornell.com/oauth/twitter/logout

http://heweb09.jdwcornell.com/api/heweb09/screenname

http://heweb09.jdwcornell.com/api/twitter/search.json?q=%23heweb09

And any other read-only Twitter API  http://apiwiki.twitter.com/

http://heweb09.jdwcornell.com/api/heweb09/populate/

http://heweb09.jdwcornell.com/api/heweb09/rightnow/

http://heweb09.jdwcornell.com/api/heweb09/attendees/TPR

http://heweb09.jdwcornell.com/api/heweb09/attendees/TPR1

http://heweb09.jdwcornell.com/api/heweb09/schedule/

http://heweb09.jdwcornell.com/api/heweb09/schedule/TPR

http://heweb09.jdwcornell.com/api/heweb09/schedule/TPR1

http://heweb09.jdwcornell.com/api/heweb09/attending/jdwcornell

http://heweb09.jdwcornell.com/api/heweb09/attend session=TPR1 (POST)

http://heweb09.jdwcornell.com/etherpad/css/jdwcornell-heweb09-css1

http://heweb09.jdwcornell.com/etherpad/js/jdwcornell-heweb09-js