1. AJAX and REST

2. Slide 2 What is AJAX? It’s an acronym for Asynchronous JavaScript and XML Although requests need not be asynchronous It’s not really a single technology but several HTML / CSS / DOM / XML It’s used to dynamically update Web pages or at least parts of them

3. Slide 3 What is AJAX? It uses the HTTPRequest and HTTPResponse objects to Make a server request from client JavaScript And process the server-side response

4. Slide 4 AJAX (model) From W3Schools.com

5. Slide 5 AJAX Frameworks Most vendors have their own AJAX abstraction layers ASP has a script manager and an AJAX toolkit It’s a layer on top of AJAX There are several for PHP Phery, CJAX, Quicknet There are frameworks for Python, Perl, Ruby and others

6. Slide 6 RestFull APIs These are generally available APIs that accept and execute AJAX requests, and return data to the client Yahoo has YQL SQL-like queries are built into the URL (GET request) I’ll show this in class

7. Slide 7 RestFull APIS Google has a number of APIs These typically use JSON JSON is an alternative to moving the responses around as XML Easier to process with JavaScript

8. Slide 8 AJAX (The Mechanics) The XMLHttpRequest object is used to create a request The request gets configured with the open method The request gets sent with the send method The responseText and responseXML properties store the returned information Use the onreadystatechange event for async requests

9. Slide 9 AJAX XMLHttpRequest The following creates the request var req = new XMLHttpRequest(); The open method define the type of request The first argument contains the method to use (GET or POST) The second argument contains the URL The third argument contains true (asynchronous) or false (synchronous) The send method sends the request to the server

10. Slide 10 AJAX XMLHttpRequest (Example) Create open and send a synchronous request

11. Slide 11 AJAX Response (Synchronous) When the request completes, we get at the response through the following properties of the XMLHttpRequest object responseText – gets the response data as a string responseXML gets the response data as XML, which we can then parse using the DOM This is the same DOM we talked about with regard to the HTML document

12. Slide 12 AJAX Response (Synchronous)

13. Slide 13 AJAX Response (Asynchronous) The onreadystatechanged event fires as the request progresses Initialize Loading Loaded Interactive Completed Status and status contain the result status information 404 – not found / 200 success

14. Slide 14 AJAX Response (Asynchronous)

15. Slide 15 AJAX (jQuery) As usual, jQuery makes the process simple although the syntax is obscure

16. Slide 16 A Few Words about XML It’s the extensible markup language Data is frequently stored and transported as XML It looks like XHTML 5 Tags, attributes and elements Nesting concepts are the same However the tag and attribute names can be any valid name.NET knows about them

17. Slide 17 A Few Words about XML Sample XML document

18. Slide 18 REST Acronym for Representational State Transfer REST (restful Web services) is a way of exchanging HTTP requests and responses between client and server It’s an alternative to Web Services and SOAP It’s an alternative to Remote Procedure Calls (RPC)

19. Slide 19 REST For read requests we Send all data to the server via a URL and GET request URLs are logical locations, rather than physical resources (a file at the end of the URL) Data is typically returned as XML It’s not a standard but a way of doing things An architecture of style YQL is restful

20. Slide 20 A Few Words about YQL Yahoo Query Language Implemented as a Web service, they maintain a number of tables Finance Geography and many more http://developer.yahoo.com/yql/guide/yql- opentables-chapter.html# http://developer.yahoo.com/yql/guide/yql- opentables-chapter.html#

21. Slide 21 AJAX (References) http://w3schools.com/ajax/default.asp http://msdn.microsoft.com/en- us/library/bb924552.aspx http://developer.yahoo.com/yql/ http://msdn.microsoft.com/en- us/library/bb924552.aspx http://developer.yahoo.com/yql/