(4) AJAX Flow Diagram

Courtesy of http://loadstorm.com/2009/load-testing-ajax-loadstorm

(5) AJAX Auto Complete with JQuery(JavaScript)/PHP/Mysql

• JQuery (JS library) connects to php script through form input string
• PHP (serverside) connects to database
• Mysql(serverside) process data request and returns values from db

  Demo  auto-complete  [http://courses.ischool.berkeley.edu/i153/s11/ajax/index.htm] on Fedora Core 14 (Laughlin) running Apache 2, PHP 5.3.6, Mysql 5

• AJAX Countries [http://courses.ischool.berkeley.edu/i153/s11/ajax/index.htm] auto complete (Courtesy of Nodstrum [http://www.nodstrum.com/2007/09/19/autocompleter/])

(6) Web Service APIs

• These two resources compose a very simple Application Programming Interface [http://en.wikipedia.org/wiki/Application_programming_interface]
• An API is an interface intended for use by programs rather than people
  • people use UIs (User Interfaces)
• There are thousands [http://www.programmableweb.com/apis/directory] of Web APIs
• Mashups [http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)] combine data from multiple APIs to create a new application
  • example: Craigslist and Google Maps [http://joesmap.org]
• Web APIs are built using URIs and HTTP just like Web UIs are
  • Representations are different: XML or rather than HTML

(7) Javascript Object Notation (JSON)

• JSON is a very simple text format for sending data over HTTP
• There are two basic structures: objects and arrays
  • objects are collections of name/value pairs enclosed in { }
  • arrays are lists of values enclosed in [ ]
• Values can be objects, arrays, text strings, numbers, true or false, or null

(8) Javascript Object Notation (JSON)

• 1. Client side Javascript Objects
• JSON parser transforms object to string
• URL encoded JSON is sent to the server vid HTTP request

• 2. Server Side
• Decode incoming JSON string with parser into object
• The object can now be handled by any prefered server side language

• 3. Client-side
• Returned JSON string is transformed into new object with JSON parser on client

(9) JSON Example

{ 
  'name': 'Web Architecture & Information Management',
  'semester': 'Spring 2011',
  'students': [
    { 
      'name': 'Angie Fredette',
      'year': 1 
    },
    { 
      'name': 'Philip Fall',
      'year': 4 
    },
    { 
      'name': 'Olivia Odum',
      'year': 2 
    } 
  ] 
}

(11) Midterm

• Wednesday, March 16, during class
• no notes, no laptops
• 17 short-answer questions, you pick 15
• each question is 4 points for a total of 60

(12) Review Session

• Place and time TBA?
• we can also use the remaining time in class today for Q&A