AJAX Asynchronous JavaScript and XML is a technique for creating fast and dynamic web pages Theory AJAX

allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Classic web pages, (which do not use AJAX) must reload the entire page if the content should change. Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.

AJAX is based on internet standards, and uses a combination of: XMLHttpRequest object (to exchange data asynchronously with a server) JavaScript/DOM (to display/interact with the information) CSS (to style the data) XML (often used as the format for transferring data) AJAX applications are browser- and platform-independent! The XMLHttpRequest object is used to exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. (IE5 and IE6 uses an ActiveXObject)

BROWSER Asynchronous JavaScript and XML Not a technology * Not really! technology Not XMLHTTPRequest object (see later) JavaScript does not wait for a response

Role of browser in AJAX handles making requests to web server manages responses from server Stores servers response in the request object passes events (eg button clicks) to JavaScript function or server program Call back to JavaScript when gets a response returns control to user ( asynchronous)

AJAX in a nuttshell

1. var request=new XMLHttpRequest();

Object: // Var=variable

// Create XML HttpRequest

2. var url:="AJAXServlet" // You can specify here the URL of your servlet. This can be anything. It depends on the names of the servlet

3. // sent the request using XMLHTTPRequest Object Methods request.open("method,url,true") // method = (GET/POST) // URL = marshalling (for get) // true = asynchronous // client to continue during processing

request.send(null); // null refers to sending data: GET //if POST (then put here STRING) 4. // Add HTTP headers to the request. request.setRequestHeader(header,value) // header = header name // value = header value 5. Before calling: Sent()method, We need to tell the browser what to do with the response. Set onreadystatechange propperty of the XML HttpRequest object. // stores a function to be called automatically each time the readystate property changes.(IT CHECKS of DATA Is available) ! ReadyState property: Holds the status of the request. 0: request not initialised 1: request has been set up (intialised) - Have called open(..) but not send() 2: response is in process server program responding 3: Getting response: Browser opened communication with server, but server not finished. 4: request/response completed Response data received by request objects responseText property

/////////////////////////////////////////////////////////////////////// 0. request not initialezed 1. server connection established( have called open(); 2. request received 3. processing request 4. request finished and response is ready

// STATUS CHECK // 200: OK // 404: Page not found! reques.onreadystatechange=function(); { if (request.readyState==4&& request.status==200) { document.getElementby_ID("res").innerHTML.request.responseText; // Accesses any element on the page via its ID attribute. A fundamental method within the DOM for accessing elements on the page. } } request.send(null); // propperties for getting the response from the a server by request of XML HttpRequest object. responseText - return the reponse as a String; responseXML - response from server is XML, and needs to be parsed as an XML object using this property.

WEB SERVICES Webservices are used to convert applications to web-applications. Webservices are found, published and used though the web. Webservices are: Apllication componenets communcate using open protocol self-constains and self-describing can be discovered using UDDI XML us the basis of web services

Shift to providing components rather than large monolithic application.

A Web service is a software system designed to support interoperable machine-to-machine interaction over a network. It has an interface described in a machine-processable format (specifically WSDL). 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. Service Oriented Architecture (SOA) Architecture Roles Operations SOAP (Message structure) WSDL * Rest * Challenges A distributed systems architecture that has these properties: - Logical view The service is an abstracted, logical view of actual programs, databases, business processes, etc., defined in terms of what it does, typically carrying out a businesslevel operation. - Message orientation The service is formally defined in terms of the messages exchanged between provider agents and requester agents,and not the properties of the agents themselves.

* Services to be consumed over a network Self-contained contrast to monolithic applications =implementation of functionality * Interface Used in multiple contexts Not designed for a particular use/user ie focus NOT on implementation * Build applications using loosely-coupled components Interchangeable between providers with same interface (QoS, price etc)which means (see next slide!) Advantages of Web services Web Services Business Claims * Simple * Flexible responsive to change * Easy to construct, troubleshoot and debug * More effective mapping to business practices more natural way to model and build software addressing real-world needs * Improved business IT understandings: architecture = suite of co-operating business processes

Universal Description Discovery and Integration