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

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

Ajax

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

Traditional Model for web applications vs Ajax Model

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

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

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.

Web Services

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.

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

Web Remoting

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

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

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

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

XMLHttpRequest Working

Ajax Design Patterns

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

RESTFul Service Design

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

RESTful Service Web = Collection of Resources (item of interest) A Boeing Aircraft may define a 747 resource Clients may access the URL with http://www.boeing.com/aircraft/747 A representation of a resource is returned

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

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) http://www.employee.com/employee/getEmpID?id=1234 Instead (logical) http://www.employee.com/employee/1234

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

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

RESTful Communication

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

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)

RPC Service 31

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

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

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

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). http://www.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=ap1000&photo_id=2000 35

Plain-Text Messages 36

Plain-Text Message Example :- 1135646360:749||||date-1135646204||*Monday, 26 December 2005||||hour-17||*17:00||||1135646204||Posted about 3 minutes ago at 17:16||USER1||You can *SO* chat in real time||||1135646212||Posted about 2 minutes, 52 seconds ago at 17:16||||1135646212||. 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

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

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

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

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","http://ajax.com/run/portal/drilldown/drilldown.phtml ?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

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

Json Message 43

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

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

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

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

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

END  49