(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 JSON [Javascript Object Notation (JSON) (1)] 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 via 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': 'Summer 2011',
  'students': [
    { 
      'name': 'Angie Fredette',
      'year': 1 
    },
    { 
      'name': 'Philip Fall',
      'year': 4 
    },
    { 
      'name': 'Olivia Odum',
      'year': 2 
    } 
  ] 
}

(11) What happens on the server?

• Technologies like AJAX and JSON operate in the browser, but communicate with the HTTP server
• We've learned about some simple server-side PHP and the LAMP stack for serving dynamic web content, but that's just the beginning

(12) Server-side frameworks

• A server-side framework connects the HTTP server with the database and a programming environment
• Provides many of the objects and APIs for common server-side application logic
• Can also provide an application design paradigm to further structure an application
• An server-side application is sometimes called a "backend", as opposed to a "frontend" (the JavaScript application that runs in the browser)

(13) Common Frameworks

• Some common frameworks [http://en.wikipedia.org/wiki/Comparison_of_Web_application_frameworks] include:
• Java
  • Java servlets and JSP
  • Apache Struts, Apple WebObjects, Google Web Toolkit (GWT), JBoss
• PHP
  • CakePHP, Zend
• Python
  • Django, web2py, Zope
• Ruby on Rails

(14) How a server-side framework works

thepaisano.wordpress.com [http://thepaisano.wordpress.com/2008/04/24/stop-flipping-the-bird/]

(15) Into the Cloud...

• Cloud providers like Google AppEngine and Amazon AWS allow you to write applications against an abstracted set of computing resources. Looks less like LAMP and more like simple programming.
• Cloud platforms like Facebook and Salesforce.com allow you to write applications that integrate into their existing application environment.
• The same technologies like HTTP, AJAX, and databases are used in the Cloud, it's just that the details are more hidden from the end user to enable ease of development.