The document discusses various technologies related to Web 2.0 patterns, including:
- The programmable web which is based on HTTP and can encode data in formats like XML, HTML, plain text, and JSON.
- Rich Internet Applications (RIAs) which bring desktop functionality to the browser using technologies like Flash, Silverlight, and JavaFX.
- Asynchronous partial updates which allow parts of a resource like a webpage to be updated without reloading the entire page. This can be done with technologies like AJAX, AMF, and REST-based implementations.
Difference Between Search & Browse Methods in Odoo 17
Web 2.0 Patterns and Technologies - Lecture 07 - Web Information Systems (4011474FNR)
1. 2 December 2005
Web Information Systems
Web 2.0 Patterns and Technologies
Prof. Beat Signer
Department of Computer Science
Vrije Universiteit Brussel
http://www.beatsigner.com
2. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2November 14, 2014
The Programmable Web
Based on HTTP
Data often encoded in XML
Potential alternative data formats
HTML
plain text
JavaScript Object Notation (JSON)
binary formats
3. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3November 14, 2014
Rich Internet Applications (RIAs)
Bring the desktop to the browser
Highly responsive (good performance)
asynchronous and partial content updates
Rich Graphical User Interface (GUI)
various RIA toolkits and environments introduced earlier
- Adobe Flash, Apache Flex and AIR
- Microsoft Silverlight
- Sun JavaFX
- JavaServer Faces (JSF)
- Mozilla XUL (XML User Interface Language)
- OpenLaszlo
- ...
4. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4November 14, 2014
Asynchronous Partial Updates
Client Server
Rather than updating an entire resource (e.g. webpage),
we can asynchronously update parts of a resource
Updates initiated by the client (or the server) based on
user interaction, state change, timeout, …
Service Service
5. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5November 14, 2014
Asynchronous Partial Updates …
Updates cannot be initiated by the server if HTTP is used!
have to use polling or long polling (e.g. Comet model)
There are different possibilities how the partial update of
resources can be realised over the Web
AJAX
Action Message Format (AMF)
- used by Apache Flex
REST-based implementations
…
6. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6November 14, 2014
AJAX
Asynchronous JavaScript and XML
AJAX is not a technology by itself but a group
of existing technologies (term coined in 2005)
HTML and CSS for the visualisation
JavaScript in combination with DOM to dynamically change the
presented information and process messages on the client side
method to asynchronously exchange data between the client
(browser) and the server
- often via the XMLHttpRequest (XHR) JavaScript object
- data can be in different formats including XML, plain text, JavaScript Object
Notation (JSON), ...
client-side AJAX engine deals with asynchronous message
handling
7. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7November 14, 2014
XMLHttpRequest Object
The XMLHttpRequest (XHR) object has several
important properties
onreadystatechange
- registers a JavaScript function that will handle the response from the server
readyState
- represents a response status from the server
• 0 (unititialised): object has been created but is uninitialised
• 1 (open): object has been created but send method not yet called
• 2 (sent): send method has been called and the HTTP response headers have been received
• 3 (receiving): some data (body) has been received but response not yet available
• 4 (loaded): all data has been received and the response is available
- a function registered via onreadystatechage is executed each time readyState changes
responseText, responseBody and responseXML
- contains the server's response in different formats
8. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8November 14, 2014
AJAX Example
<html>
<body>
<script type="text/javascript">
function createXMLHttpRequest() {
if (typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
}
else if (typeof ActiveXObject != "undefined") { // code for IE5 and IE6
return new ActiveXObject("Microsoft.XMLHTTP");
}
else {
throw new Error("XMLHttpRequest object not supported!")
}
}
function getTime() {
xhr = createXMLHttpRequest();
xhr.onreadystatechange=function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.testForm.time.value=xhr.responseText;
}
}
xhr.open("GET","time.php",true);
xhr.send(null);
}
</script>
9. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9November 14, 2014
AJAX Example ...
createXMLHttpRequest() deals with different browser
versions
For more advanced AJAX examples see
http://www.w3schools.com/Ajax/
Getting Started with Ajax
http://refcardz.dzone.com/refcardz/
getting-started-ajax
<form name="testForm">
Input: <input type="text" name="input" onkeyup="getTime();" />
Time: <input type="text" name="time" />
</form>
</body>
</html>
10. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10November 14, 2014
Google Search (Suggest) AJAX Example
11. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11November 14, 2014
AJAX
Advantages
reduced load time and higher responsiveness
application state can be maintained across multiple pages since
the main container page is not reloaded
Disadvantages
not possible to bookmark any particular state of an application
content may not be crawled by certain search engines since they
do not execute JavaScript code
cannot be used in browsers with disabled JavaScript functionality
page updates are not automatically registered in the browser's
history engine
Various libraries simplify the AJAX development
e.g. the jQuery JavaScript library
12. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12November 14, 2014
Web Socket API
Bidirectional, full-duplex socket connection between
the server and browser for real-time web applications
(low latency) with asynchronous partial updates
server-initiated updates become possible!
client and server upgrade from the HTTP protocol to the
WebSocket protocol (initial HTTP handshake)
- via Upgrade: websocket HTTP header field
- browser as well as server have to support the Web Socket protocol
reduced "overhead" since no HTTP headers
no longer necessary to do any polling or long polling
- faster since in the polling approach the server can send nothing while a client
request is transmitted
similarly an EventSource object can be used if only the server
has to push information (server-sent events)
W3CCandidateRecommendation
13. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13November 14, 2014
Web Socket API ...
<script type="text/javascript">
var socket = new WebSocket("ws://chat-server.com");
socket.onopen = function(e) { alert("Opened connection ..."); };
socket.onmessage = function(e) {
var message = JSON.parse(e.data));
alert("Message received.");
...
};
socket.onclose = function(e) { alert("Closed connection."); };
socket.onerror = function(e) { alert("WebSocket Error" + e); };
socket.send("Hellow World");
...
socket.close();
</script>
W3CCandidateRecommendation
14. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14November 14, 2014
Web Sockets Support
When can I use..., http://caniuse.com/#search=socket
15. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15November 14, 2014
Example: Multiplayer Port of Quake II
Google's browser port of Quake II uses
canvas and WebGL
<audio> for sound
<video> for in-game videos
Web Sockets for communication with the server (other players)
Local Storage for managing preferences and saved games
16. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16November 14, 2014
JavaScript Object Notation (JSON)
Developed as an XML alternative to represent JavaScript
objects as strings (language independent)
Easy to produce and faster to parse than XML
supports different data types
JSON is based on a subset of JavaScript
JSON document can be read via the JavaScript eval() function
- security issues: note that this approach can be dangerous if the source is not
trusted since any JavaScript code might be executed
most recent browsers offer a JSON parser
- recognises only JSON data types and rejects any scripts
Many Web 2.0 Applications offer a JSON interface
Flickr, YouTube, Delicious, ...
17. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17November 14, 2014
JSON Data Types
The values themselves can be simple values (number,
boolean or string), arrays or objects
nesting is supported
Type Description
Number integer, real or float
Boolean true or false
String double-quoted Unicode (use backslash for escaping)
Array comma-separated ordered sequence of values enclosed in
square brackets
Object comma-separated collection of key:value pairs enclosed in
curly brackets
null null value
18. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18November 14, 2014
JSON Syntax Diagrams
http://www.json.org
20. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20November 14, 2014
JSON-RPC
Simple JSON-encoded remote procedure call protocol
that is very similar to XML-RPC (discussed earlier)
multiple requests might be sent to a peer and answered out of
order (use id to match a request with its response)
{
"version": "1.1",
"method": "Math.multiply",
"id": "24034824",
"params": [128.0, 256.0]
}
JSON-RPC Request
{
"version": "1.1",
"result": 32768.0,
"error": null,
"id": "24034824"
}
JSON-RPC Response
21. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21November 14, 2014
Service-Oriented Architecture (SOA)
Architecture that modularises functionality as
interoperable services
loose coupling of services
service encapsulation
interoperability between different operating systems and
programming languages
mashup of services
...
Software as a service (SaaS)
software is offered as a service and may itself be a composition of
third-party services
22. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22November 14, 2014
Representational State Transfer (REST)
REST is an architectural style for distributed hypermedia
systems requirering the following constraints
(1) separation of concerns between client and server
client and server can be developed and replaced independently
(2) uniform interface
identification of resources (e.g. URIs on the Web)
manipulation of resources on the server via representation on the client side
self-describing messages (e.g. MIME type on the Web)
hypermedia for application state change (e.g. hypertext links to related
resources)
(3) stateless
no client state is stored on the server side
(4) cacheability
responses must explicitly or implicitly define whether they are cacheable
23. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23November 14, 2014
Representational State Transfer (REST) ...
(5) layering
intermediary servers (proxies) can be transparently added between the client
and the server
(6) code on demand (optional)
the server can send application logic (code) to the client (e.g. Java Applets)
A service that conforms at least to the first five
constraints is called a RESTful service
The Web is an implementation of a system conforming to
the REST architectural style
however, RESTful services can also be implemented over
protocols other than HTTP
24. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24November 14, 2014
Web Services
Web-based client-server communication
over HTTP
Two main types of Web Services
Big Web Services
- Universal Description, Discovery and Integration (UDDI)
- Web Services Description Language (WSDL)
- Simple Object Access Protocol (SOAP)
RESTful Web Services
- better integrated with HTTP and web browsers
- makes use of GET, POST, PUT and DELETE HTTP methods
25. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25November 14, 2014
Big Web Services
Service
Provider
Service
Requester
Service
Broker
UDDI
WSDL
SOAP
SOAP
WSDL
26. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26November 14, 2014
Big Web Services ...
Universal Description, Discovery and Integration (UDDI)
yellow pages for WSDL
"global" registry describing available business services
very complex
Microsoft and IBM shut down their public UDDI registries in 2006
Web Service Description Language (WSDL)
XML application to describe a Web Service's functionality
complex
Simple Object Access Protocol (SOAP)
defines an envelope for transporting XML messages
The Web Service Stack contains many other protocols
BPEL, WS-Security, WS-Reliability, WS-Transaction, ...
27. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27November 14, 2014
SOAP
Successor of XML-RPC (discussed earlier)
Introduced in 1998 as Simple Object Access Protocol
Dave Winer, Don Box, Bob Atkinson and Mohsen Al-Ghosein
since version 1.2 the name is no longer treated as an acronym
XML-based communication protocol
A SOAP message consists of an <Envelope> element
which contains
an optional <Header> element
a <Body> element
- remote procedure call or response information
SOAP requests are often sent via HTTP POST requests
28. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28November 14, 2014
SOAP Request Message Example
predefined SOAP attributes
- encodingStyle: defines the used data types
- mustUnderstand: if set to 1 then the server has to understand the header
- actor: can be used to delegate the header to an intermediary receiver (proxy)
<?xml version="1.0"?>
<soap:Envelope xmlns:soap="http://www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">
<soap:Header>
<t:username xmlns:t="http://wise.vub.ac.be/transaction/"
soap:mustUnderstand="1">pellens</t:username>
</soap:Header>
<soap:Body xmlns:c="http://wise.vub.ac.be/courses/">
<c:getCourseInfo>
<c:courseID>4011474FNR</c:courseID>
</c:getCourseInfo>
</soap:Body>
</soap:Envelope>
29. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29November 14, 2014
SOAP Response Message Example
note that also a response message can have a <Header> element
the body contains a <Fault> element if something went wrong on
the server side
<?xml version="1.0"?>
<soap:Envelope xmlns:soap="http://www.w3.org/2001/12/soap-envelope"
soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">
<soap:Body>
<c:getCourseInfoResponse xmlns:c="http://wise.vub.ac.be/courses">
<c:title>Web Information Systems</c:title>
<c:description>The goal of this course is to teach students the concepts and
technologies for realising Web Information Systems (WIS). This ranges from basic
network technologies and protocols to high level frameworks for the design and
...
</c:description>
</c:getCourseInfoResponse>
</soap:Body>
</soap:Envelope>
30. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30November 14, 2014
SOAP ...
Advantages
platform and language independent
SOAP over HTTP results in less problems with proxies and
firewalls than other remote procedure call solutions (e.g. CORBA)
there exist a lot of tools and language bindings that automatically
create the required client and server-side functionality
- e.g. Java API for XML Web Services (JAX-WS)
Disadvantages
slower than non-verbose protocols (e.g. CORBA)
Big Web Services are not simple
HTTP is reduced to a simple transport protocol for a large amount
of XML metadata payload
- does not make use of the rich functionality offered for HTTP envelopes
no mechanism for the caching of results
31. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31November 14, 2014
RESTful Web Services
A RESTful web service (or RESTful Web API) is a simple
web service implemented using HTTP
The definition of RESTful web service includes
the URI of the web service (e.g. http://wise.vub.be/course/)
- different resources identified by unique URIs
the type (MIME) of data supported by the service
- e.g. application/json, application/xml, ...
supported set of operations via HTTP methods
- e.g. GET, POST, PUT, DELETE
One-to-one mapping between create, read, update, and
delete (CRUD) operations and HTTP methods
POST (create), GET (read), PUT (update) and DELETE (delete)
32. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32November 14, 2014
RESTful Web Service Example
POST /users HTTP/1.1
Host: wise.vub.ac.be
Content-Type: application/xml
<?xml version="1.0"?>
<user>
<name>Roels</name>
</user> create
GET /users/Roels HTTP/1.1
Host: wise.vub.ac.be
Accept: application/xml read
PUT /users/Roels HTTP/1.1
Host: wise.vub.ac.be
Content-Type: application/xml
<?xml version="1.0"?>
<user>
<name>Signer</name>
</user> update
DELETE /users/Signer HTTP/1.1
Host: wise.vub.ac.be
Accept: application/xml delete
33. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33November 14, 2014
Apache CouchDB
Document-oriented database
provides a RESTful JSON API
- manage the database by simply using POST, GET, PUT and DELETE HTTP
requests with JSON payload
non-relational database
- manages a collection of JSON documents
free and open source
Implemented in Erlang
functional programming language that is ideal for building
concurrent distributed systems
leads to a flexible CouchDB design that is scalable and extensible
Nice example of a RESTful web service that can easily
be accessed from various types of clients
34. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34November 14, 2014
Really Simple Syndication (RSS)
Format that is used to read and write frequently updated
information on the Web
e.g. blog entries
specific channels on news sites
...
Special RSS readers or aggregators
Two main RSS variants
simple fork (Dave Winer)
- RSS 0.92, RSS 0.93, RSS 0.94 and RSS 2.0
RDF fork
- RSS 1.0
RSS feeds are represented as XML documents
35. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35November 14, 2014
RSS Example
many other elements
<language>, <copyright>, <pubDate>, ...
<?xml version="1.0" encoding="ISO-8859-1" ?>
<rss version="2.0">
<channel>
<title>W3Schools Home Page</title>
<link>http://www.w3schools.com</link>
<description>Free web building tutorials</description>
<item>
<title>RSS Tutorial</title>
<link>http://www.w3schools.com/rss</link>
<description>New RSS tutorial on W3Schools</description>
</item>
<item>
<title>XML Tutorial</title>
<link>http://www.w3schools.com/xml</link>
<description>New XML tutorial on W3Schools</description>
</item>
...
</channel>
...
</rss>
36. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36November 14, 2014
Atom
Two related standards
Atom Syndication Format
- similar to RSS
- supports more content formats (e.g. videos) than RSS
Atom Publishing Protocol (APP)
- HTTP-based approach for creating and editing Web resources
- similar to the RESTful web service example shown earlier
Many web service interfaces are based on
the Atom protocol
Microsoft Windows Live
OpenSocial
…
37. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37November 14, 2014
Mashups
Combine content or functionality from existing
websites, web services and RSS feeds
different mashup tools may address different types
of users (e.g. developers vs. end users)
Various Mashup tools
Yahoo Pipes
IBM Mashup Center
...
38. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38November 14, 2014
Video: Yahoo Pipes
Creating a basic pipe, http://blip.tv/file/get/Jc174-YahooPipesBasics201.wmv
39. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39November 14, 2014
Video: Yahoo Pipes ...
Sorting, filtering, and debugging, http://blip.tv/file/get/Jc174-YahooPipesSortingFilteringAndDebugging584.wmv
40. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40November 14, 2014
Video: Yahoo Pipes ...
Using other People’s Pipes, http://blip.tv/file/get/Jc174-YahooPipesTheYahooSearchModuleUnionModuleAndUsingOther879.wmv
41. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 41November 14, 2014
Exercise 7
Mashup Tools
42. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 42November 14, 2014
References
AJAX Tutorial
http://www.w3schools.com/Ajax/
Mike Amundsen, Building Hypermedia APIs with HTML5
& Node, O'Reilly Media, December 2011
Jim Webber, Savas Parastatidis and Ian Robinson, REST
in Practice: Hypermedia and Systems Architecture,
O'Reilly Media, September 2010
Dave Crane, Getting Started with Ajax
http://refcardz.dzone.com/refcardz/getting-started-
ajax