1. Ajax Design Patterns – Programming Practices in Web Services
-Chirayu Poundarik
-Shruti Poundarik

2. Basic Outline What is Ajax and Why Ajax What are Web Services
The JavaScript XMLHttpRequest object
Design Patterns for Web Services
Questions

3. Ajax

4. Ajax Ajax = Asynchronous JavaScript + XML
Not a technology, but several technologies coming together in powerful new ways
Its Standards-based presentation using XHTML + CSS
Dynamic Display and interaction using DOM
Data interchange and manipulation using XML + XSLT
Async data retreival using XMLHttpRequest
JavaScript Binding it all together

5. Traditional Model for web applications vs Ajax Model

7. Features Continuous Feel Real Time Updates Graphical Interaction Not
Proprietary
Plugin Based
Browser Specific

8. Ajax
Ajax is a technology that complements Web 2.0 and the integration of many web services at once.
A higher level of interactivity in a HyperText Markup Language (HTML) page than was possible without Ajax technologies
The result is that an Ajax application changes from a web application to a web service manipulation technology
With Ajax, navigating content means navigating web services that could be generating HTML content, or Extensible Markup Language (XML) content

9. Ajax Lifecycle in browser
Visit: The user visits a site the usual way, i.e. by clicking on a link or typing a URL.
Initialization The page initially loads. Callbacks are established to handle user input, a loop might be established to continuously refresh page elements.
Event Loop:
Browser Event An event occurs, such as a keypress.
Server Request The browser sends a request to the server.
...<Server processes the event>
Server Response A moment later, the server responds, and the response is passed into a request callback function, one that was specified when the request was issued.
Browser Update The request callback function updates the DOM, including any Javascript variables, according to the response.

10. Web Services

11. Web Services
Server side components that provide clients with a tightly scoped functionality
eg:- “most recent stock quote”
A Web service is a software system designed to support interoperable machine-to-machine interaction over a network.
Web service will refer to any application that is accessed across the Internet using standard Internet protocols and that uses XML as its messaging format.
Other systems interact with the Web service in a manner prescribed by its description using SOAP messages, typically conveyed using HTTP with an XML serialization in conjunction with other Web-related standards.

12. Web Services The basic Web services platform is XML + HTTP.
Web services are application components
Web services communicate using open protocols
Web services are self-contained and self-describing
Web services can be used by other applications
XML is the basis for Web services

13. Web Remoting

14. Web Remoting
The Web Remoting patterns allow Javascript code to directly issue calls to the server.
Makes it easy to add Ajax features to any existing application by allowing Javascript and Java to interact in a simple way, and by helping you manipulate web pages with server-side data.
The point is to avoid a full page refresh, while allowing the browser to make a query or upload some data.
XMLHttpRequest Call used for this purpose

15. Web Remoting Ajax is not only Browser-side technology
Web Remoting impacts the design of server-side components
Web Service design involves a balance between the needs of your Ajax application and the needs of external clients also using that service

16. XMLHttpRequest(JavaScript Class)
The XMLHttpRequest object implements an interface exposed by a scripting engine that allows scripts to perform HTTP client functionality, such as submitting form data or loading data from a server.
It can request and respond to the data on the server even after the page has loaded
Calling the server using standard HTTP requests and capturing its response
The calls are quite specific in nature – ‘What is the user account balance?’
Calls are issued to a particular URL passing arguments in the URL for specific format

17. XMLHttpRequest Request Response
The calls are asynchronous – browser calls and the user can continue to work on other things while response returns
The calls can be synchronous
Requests can be made both over HTTP and HTTPS
Supports all the activity defined with HTTP requests or responses for the defined HTTP methods
Response
When a response arrives then the state changes(if async) and the response is displayed likewise

18. XMLHttpRequest Working

19. Ajax Design Patterns

20. RESTful Service
RPC Service
Semantic Response Based
Plain Text Message
XML Message
JSON Message

21. RESTFul Service Design

22. RESTful Service REST = Representational State Transfer
Style of s/w architecture for distributed hypermedia system such as www
Refers to a collection of n/w architecture principles which outline how resources are defined and addressed
Systems that follow these principles  RESTful Systems
An Architectural Style and not a standard

23. RESTful Service Web = Collection of Resources (item of interest)
A Boeing Aircraft may define a 747 resource
Clients may access the URL with
A representation of a resource is returned

24. RESTful Service
The representation places the client application in a state
The result of client traversing a hyperlink in 747.html is that another resource is accessed.
The new representation places the client in another state
Thus the client application changes (transfers) state with each resource representation – Representational State Transfer
747
748

25. Web Services using REST
The key to creating WEB services in a REST pattern is to identify all of the conceptual entities that you wish to expose as web services
Create a URL of each resource
The resources should be represented as nouns and not verbs (physical)
Instead (logical)

26. http://www.employee.com/employee/1234 - Working
There does not need to be a static HTML page for each part
Employees could implement a service that gets detailed data about a particular part by using a Java Servlet which parses the string after the host name
Uses the EmpID to query the employee DB
Formulate the query results as XML
Return the XML as payload of HTTP Response
URL should not reveal the implementation techniques used. Free to change the implementation without impacting clients

27. HTTP Methods in REST
The HTTP methods such as GET and POST are the verbs that the developer can use to describe the necessary create, read, update, and delete (CRUD) actions to be performed. Some may see an analogy to operations in SQL, which also relies on a few common verbs. However, the REST style and HTTP protocol are mutually exclusive.
Relationships Between SQL and HTTP Verbs  
Create Insert PUT
Read Select GET
Update Update POST
Delete Delete DELETE

28. RESTful Communication

29. Code sample RESTful Service
Using XMLHttpRequest object for communication
XMLHttpRequest xhr
xhr.open("GET",<URL>, true);

30. RESTful Service - Summary
Stateless
Each request from client server must contain all the information necessary to understand the request and no advantage of stored content on the server
Uniform Interface – all resources accessed by a generic interface (HTTP GET,POST,PUT,DELETE)

31. RPC Service 31

32. RPC Service
RPC is a form of communication where client invokes remote procedure calls on the server.
RPC’s are generally characterized by actions .URL is verb like
/game/createGame?game ID=1000
The remoting is designed to be transparent and the remoting framework acts as a bridge between client and server allowing clients to directly invoke backend operations.
Some forms of RPC are
XML-RPC
SOAP 32

33. Uses tags like <methodCall>,<methodName> and <param>
XML-RPC
XML-RPC is a protocol based on XML and HTTP. HTTP is used as a transport layer and XML is used for encoding.
Uses tags like <methodCall>,<methodName> and <param>
Calling application makes procedure calls on XML RPC clients indicating the URI to the server(procedure to be called and parameter to be sent).
XML-RPC client takes the method and parameter –builds XML container -----sent over ---HTTP POST request.
XML-RPC server receives POST ,determines the method to be called.
Method is executed and result packaged as XML and server returns XML result container.
Client parses the XML Response--- returns result to application. 33

34. Many frameworks are available to expose backend services as XML-RPC.
XML document is uploaded to make the call and another document is returned with the response.
Many frameworks are available to expose backend services as XML-RPC.
Properties of XML-RPC :-
Stateless
We cannot preserve state between different RPC calls.
Authentication
XML-RPC does not provide any kind of authentication mechanism.
Synchronous
Single XML-RPC call response from server is returned as response of HTTP POST. Protocol specifies that client must block until server provides a response. 34

35. SOAP RPC uses Request-Response model for message exchange.
Defines message syntax and exchange model but does not define how to exchange messages.
SOAP RPC uses Request-Response model for message exchange.
Making a RPC with SOAP only involves building a SOAP message.
E.g. Flickr API available to the developers is a good example of API with RPC styled URL’s which respects the rest conventions of GET (for reads) and PUT (for writes). 35

36. Plain-Text Messages 36

37. Plain-Text Message Example :-
:749||||date ||*Monday, 26 December 2005||||hour-17||*17:00|||| ||Posted about 3 minutes ago at 17:16||USER1||You can *SO* chat in real time|||| ||Posted about 2 minutes, 52 seconds ago at 17:16|||| ||.
User Messages are captured as a set of attributes or strings using pipe symbols.
Pass simple messages between browser and server in simple “Plain Text” format. 37

38. Again XMLHttpRequest works well for Plain-Text response.
Browser decides how to interpret the response using XMLHttpRequest switches between responseText & responseXML properties 38

39. Plain-Text format include:-
Response Code:-Comprises of numeric Id/Text message,
eg:- Ok,Failed.
Simple Text String:-
eg:- Users name
List :-
eg:- comma seperated list of search results.
Plain-text is useful when “Simpler Messages” are being transferred once the string starts getting complex ,its better to rely on XML support. 39

40. XML Messages
Pass messages between server and browser in Extensible Markup Language(XML) format.
On server side data is exposed as Text/XML
On Browser side applications can download XML 40

41. With XMLHttpRequest Call and use it in different ways.
When Browser wants to upload complex data it is serialized as XML and uploaded in the body of XMLHttpRequest Call.
Content type in XMLHttpRequest is Text/XML.
To retrieve an object XMLHttpRequest points to URL known to serve XML
xReq.open("GET"," ?categoryName=Overviews",true);
Response delivered either as DOM object or
var domObject = xReq.responseXML
alert(domObject) // Outputs "[Object]" (IE)
Plain-Text
var xmlString = xReq.responsetText
alert(xmlString) // Outputs the whole string // i.e. "<category ...> ... </category>" 41

42. Complex data can be uploaded from the browser-server also.
To do this with XMLHttpRequest simply pass
the whole XML string as an argument to
send()
Also transport type is subtitled as POST (or PUT)
Or use libraries to convert from any object to XML string. 42

43. Json Message 43

44. JSON Messages
Data can be retrieved from the server using 2 properties of XMLHttpRequest object, which are response.XML and response.Text.
But it is difficult to parse XML and extract data that you want to add to your page.
JSON –Java Script Object Notation is another data exchange format that is now being used for AJAX styled pages.
It is also a text based data exchange format.
Data formatted according to JSON standard is lightweight and can be parsed using JavaScript implementation. 44

45. Being a simpler notation it requires less specialized software.
JSON is primarily a data format which can be used where ever application needs to exchange/store structured information.
Being a simpler notation it requires less specialized software.
e.g. language JavaScript and python JSON notation is built into the programming language so no additional software is needed ,
in other languages little JSON specific code is needed (like a package of 3 classes or so).
Consists of 2 Data Structures:-
Objects:-Ordered collection of name/value pair.
(in most language this is struct,hash tables,record)
Array :- Ordered collection of values.
(in most languages this is realized as vector,list,sequence) 45

46. There is no variable or control structures in JSON.
Designed only for transmitting data.
Syntax is based on Java Script syntax of Object Literals and Array Literals.
Object literals define members of an object and their values.
e.g. var mailingaddress={
“address” : “111 xyz”,
“city” : “atlanta” };
e.g. array literals consist of zero or more expressions
Var array1=[“How”, “you”, “doing”];
Array elements and object values can be objects ,arrays, strings, numbers ,boolean values or null. 46

47. JSON can be parsed as JavaScript:
Advantages of JSON:-
JSON is JavaScript :
JSON text can be easily converted to JavaScript objects and arrays using eval() method. Extract data from server response using JavaScript.
JSON is typed:
JSON object has JavaScript datatype. Datatypes for XML can be included by using the XML schema in XML structure, but JavaScript data type is not a built in feature of XML.
JSON can be parsed as JavaScript:
JSON represents javaScript in text format.Using javaScript you can convert JSON text into JavaScript.
Returning data as XML requires parsing of data in XML.Which requires DOM methods manipulation leading to complexities. 47

48. JSON is a better data exchange format . Use XML.......
Use JSON…….
If you want to serialize data structure that’s not to text heavy and you want the receiver to get the same data structure that with minimal effort.
JSON is a better data exchange format .
Use XML
If you are sending more like a document than a structure, or if the order of the data matters or it the data is potentially long lived.
XML is a better document exchange format. 48

49. END  49