Ajax

cabbagepatchtapeInternet and Web Development

Feb 5, 2013 (4 years and 6 months ago)

158 views

University of Virginia

1

Modern Web Application
Development

Overview of some newer web applications methods



Web 2.0



Ajax fundamentals



Ruby on Rails


University of Virginia

2

Some Newer Architecture Frameworks


Software Architectures


Larger organization of components


Frameworks include:


Components we’re given as building blocks


Standard forms of behavior between components


Some frameworks for web
-
based applications


AJAX and supporting frameworks


Ruby on Rails

University of Virginia

3

Some General Issues


Client/Server architectures


Web interface through the browser


Client
-
side processing (Javascript)


Server needs


Underlying database management


Server side processing


Security, authorization, etc.


Transaction processing


Business logic


Etc.

University of Virginia

4

AJAX and Web 2.0


Have a look at:


Ajax: A New Approach to Web Applications,

by Jesse
James Garrett

http://www.adaptivepath.com/publications/essays/archives/000385.php


Building Rich Web Applications with Ajax,

by Linda
Dailey Paulson. (From IEEE
Software
.)

http://www.computer.org/portal/cms_docs_ieeecs/ieeecs/images/ajax.pdf


Book:
Pragmatic Ajax: A Web 2.0 Primer
(Overview)

University of Virginia

5

Usual Model for Web Apps


Interact with a page


Maybe enter info in forms, then hit Submit


Server receives the URL (and forms data etc.)


Processes information, and then…


New page is returned to the browser and loaded


Even small changes require entire page to be re
-
loaded



(The web as a hypertext system, not a SW app
platform)

University of Virginia

6

New Model: Web 2.0, Ajax


Web 2.0: just a buzzword?


See Wikipedia for the history


In part, Web 2.0 is about


The web as a computing platform


But also:


“new generation” of web usage


Collaboration, sharing, things linked together


Examples (?):


Blogs, social networking, Flickr, del.icio.us, Skype, games,
SecondLife, wikis, podcasts, RSS,…

University of Virginia

7

Ajax


Ajax


Named from “Asynchronous JavaScript and XML”


Used to refer to two things


Collection of “old” Web
-
related technologies


A web
-
based SW architecture


Example apps: Google maps; new Yahoo mail

University of Virginia

8

Ajax Component Technologies


Presentation with XHTML and CSS


Dynamic page display and interaction using the
DOM (Document Object Model) in the browser


Data interchange and processing with XML and
XSLT


Asynchronous data retrieval with
XMLHttpRequest (or equivalent)


JavaScript


Ties it all together on the client
-
side

University of Virginia

9

What’s Different than the Old Model?


Small events


Small request to the server that makes small change
to the page


No refresh of complete page!


Asynchronous processing


Browser doesn’t block while waiting


Key is a XMLHttpRequest (Javascript to server)


Richer events on the client
-
side


Browser recognizes and shares events much like a
GUI
-
application does

University of Virginia

10

Old vs. New


from Garrett’s
web article

University of Virginia

11

Page Modification in Ajax


From
Pragmatic Ajax


See explanation given in class

University of Virginia

12

Steps in Previous Diagram

1.
Browser requests original page

2.
Servers sends back complete page

3.
Browser displays and creates a DOM tree

4.
(later) Some user activity initiates a request to
the server


Asynchronous! To a different URL for a script

5.
Server returns data to browser to be handled
differently than in (3) above

6.
Browser process server
-
response and updates
current DOM in memory

University of Virginia

13

Handling Asynchronous Requests


On the client side with JavaScript


An object of type XMLHttpRequest (XHR for short)


On the server side


Most basic: any kind of script like those you’ve written
before


More complex and useful: a larger framework


E.g. servlets, Ruby on Rails, etc.


Get request (with parameters) and send back data
(not a webpage)


Simple, or more complex (XML)


Note that browsers must be “smarter” too

University of Virginia

14

XMLHttpRequest on the client


What’s it need to do?


Be created and used by some JavaScript function


Create a request to a script on the server


E.g. a URL with parameters


Send it


Be linked to a call
-
back function that will be run on the
client when the data is returned

University of Virginia

15

Example: making the call


From the demo (simplified)


var xhr = XMLHttpRequest(); // not for older IE

xhr.onreadystatechange=
callback
-
func
-
name
;

xhr.open(“GET”, “/
scriptURL
?” +
param
);

xhr.send(null);

University of Virginia

16

Example: Processing Responses


Server talks to the call
-
back function multiple
times


xhr.readystate
--

an int that indicates status


Value of 4 means it’s done and data is ready


Also, xhr.status is set to HTTP response code


E.g. 404 “not found”.


200 means “OK”


In call
-
back function, after checking the above:


Get data sent back: xhr.responseText (text data)


Process it and update current page using DOM


No reload of entire page occurs!

University of Virginia

17

See demo


http://people.virginia.edu/~tbh3f/cs453/ajax1/


Two
very

simple demos of XMLHttpRequest
processing with JavaScript


Very simple server
-
side processing with PHP


University of Virginia

18

Ajax Support


Server
-
side “remoting”


Frameworks and toolkits to support communications
more easily


Client
-
side


GUI toolkits for Ajax apps (Java Script)


More complete toolkits for building larger apps


Rails, Tapestry, Dojo, Django, …


SEAS Final 4 Bracket Challenge


Aptana, includes support for Ajax/Javascript libraries


Used Dojo and Yahoo UI

University of Virginia

19

Ajax and Frameworks


Many frameworks use Ajax and provide


Higher
-
level support for requests and responses


Data integration between DBs on the server and
client
-
side objects


GUI support


Separation of data, control, presentation, business
rules


“components” or “helpers”: sessions, carts, etc.


Internationalization


PHP users:


Check out symfony

University of Virginia

20


University of Virginia

21

Ruby on Rails


A framework for developing web apps


Remember what a framework is?


Rails derived from a real commercial application


Features


client
-
side dynamic pages (DHTML)


good integration with database on the server


coding written in Ruby


based on the MVC architecture


AJAX characteristics


Book:
Agile Web Development with Rails

University of Virginia

22

Concepts behind Rails


More slogans!


DRY: Don’t repeat yourself


Things defined in code in one place only


Convention over Configuration


Code less by submitting to defaults


Often depends on naming conventions


Can override these if needed

University of Virginia

23

ORM in Rails


Challenge: putting together an OO program with
class design and a set of database tables


ORM: object
-
relational mapping


Rails version of ORM called
Active Record


Define class and get both Ruby class and DB table


Get certain methods for free


Other parts of the architecture rely on naming
conventions etc. to make all work together with far
less programming effort

University of Virginia

24

Rails and MVC Architecture


MVC is a design pattern for interactive
applications


Model: just like in Observer


Also enforces business rules


View: displays the user
-
interface


Controller


receives external events from the user etc.


interact with model and view


Many other frameworks also use MVC


E.g. Struts, JavaServer Faces

University of Virginia

25

MVC in Rails Diagram

(from book
Agile Web Development with Rails)

University of Virginia

26

Views, Controllers in Rails


First step: Rails code generation…


Views:


You write HTML pages with embedded Ruby


Your code interacts with the controller


Controller:


You write code focused on application
-
specific
functions


Rails provides


routing events/requests from pages/views to your handlers


sessions, caching, …

University of Virginia

27

Summary


The high
-
level big picture here is:


Certain kinds of applications…


(E.g. web
-
applications, DB
-
centered, etc.)


… benefit from particular architecture models…


(E.g. Ajax ideas)


… and we use frameworks at the architecture level…


(E.g. Rails or AJAX environments)


… and lower
-
level design and coding “tools”


(E.g. specific IDEs, toolkits, GUI libraries,…)


… to build larger, better systems quicker.